/* =====================================================================
Sayarut brand stylesheet · mobile-first · RTL
Palette + fonts taken from the live brand site (sayarut.org.il):
earth brown #8E6939 deep maroon #361214
olive green #778234 brand blue #004997
CTA orange #F69625
Fonts: "Secular One" (display) + "Alef" (body), Hebrew subset.
Loaded LAST in the master so it overrides Bootstrap / jQuery
Mobile without changing any markup or server-control IDs.
===================================================================== */
:root {
--brand-brown: #8E6939;
--brand-brown-dark: #5E4424;
--brand-maroon: #361214;
--brand-green: #778234;
--brand-green-dark: #5C6627;
--brand-blue: #004997;
--brand-orange: #F69625;
--brand-orange-dark:#D97C12;
--ink: #2A2724; /* body text – warm near-black */
--ink-soft: #5C564F; /* secondary text */
--line: #E4DDD3; /* hairline borders */
--surface: #FFFFFF; /* cards */
--surface-2: #FAF6F0; /* warm page background */
--surface-3: #F1E9DD; /* zebra / subtle fill */
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 2px 4px rgba(54,18,20,.06), 0 8px 24px rgba(54,18,20,.08);
--shadow-sm: 0 1px 2px rgba(54,18,20,.08);
--tap: 48px; /* minimum touch target */
--maxw: 640px; /* mobile-first content column */
}
/* ---------- base ---------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
/* override mystyle.css: was background lightgray, color blue */
background: var(--surface-2) !important;
color: var(--ink) !important;
direction: rtl;
font-family: "Alef", "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 {
font-family: "Secular One", "Alef", Arial, sans-serif;
font-weight: 400;
color: var(--brand-maroon);
line-height: 1.25;
margin: 0 0 .5em;
}
a { color: var(--brand-blue); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
p { margin: 0 0 1em; }
/* honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ---------- app header (master shell) ------------------------------- */
.sy-appbar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: var(--surface);
border-bottom: 3px solid var(--brand-green);
box-shadow: var(--shadow-sm);
}
.sy-appbar__logo {
height: 44px;
width: auto;
flex: 0 0 auto;
display: block;
}
.sy-appbar__who {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
margin-inline-start: 4px;
}
.sy-appbar__hello { font-size: 12px; color: var(--ink-soft); }
.sy-appbar__name {
font-family: "Secular One", "Alef", sans-serif;
font-size: 16px;
color: var(--brand-maroon);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sy-appbar__spacer { flex: 1 1 auto; }
.sy-appbar__logout {
flex: 0 0 auto;
min-height: 40px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
color: var(--brand-maroon);
font-family: "Alef", sans-serif;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background .2s, border-color .2s;
}
.sy-appbar__logout:hover { background: var(--surface-3); border-color: var(--brand-brown); }
.sy-appbar__logout:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }
/* page content column */
.sy-main {
max-width: var(--maxw);
margin: 0 auto;
padding: 16px 16px 48px;
}
/* ---------- jQuery-Mobile page headers (data-role="header") --------- */
/* the pages render their titles inside these; rebrand as a band */
.ui-content > [data-role="header"],
[data-role="header"] {
background: linear-gradient(135deg, var(--brand-brown) 0%, var(--brand-maroon) 100%) !important;
border: 0 !important;
border-radius: var(--radius) var(--radius) 0 0 !important;
box-shadow: none !important;
padding: 14px 18px !important;
margin: 0 0 16px !important;
text-shadow: none !important;
}
[data-role="header"] h1,
[data-role="header"] h2 {
color: #fff !important;
font-family: "Secular One", "Alef", sans-serif !important;
font-size: 20px !important;
margin: 0 !important;
text-shadow: none !important;
}
[data-role="footer"] { background: transparent !important; border: 0 !important; box-shadow: none !important; min-height: 8px; }
/* ---------- card / form wrapper ------------------------------------- */
.max-form,
.ui-content > .max-form {
max-width: 100% !important;
max-height: none !important;
width: 100%;
margin: 0 auto !important;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px 18px;
}
.ui-content { background: transparent !important; border: 0 !important; }
/* ---------- inputs -------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
display: block;
width: 100%;
min-height: var(--tap);
padding: 11px 14px;
margin: 6px 0 14px;
font-family: "Alef", sans-serif;
font-size: 16px; /* >=16px stops iOS zoom-on-focus */
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
transition: border-color .2s, box-shadow .2s;
-webkit-appearance: none;
appearance: none;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--brand-green);
box-shadow: 0 0 0 3px rgba(119,130,52,.18);
}
input::placeholder, textarea::placeholder { color: #A89F92; }
/* ---------- buttons ------------------------------------------------- */
.btn,
input[type="submit"],
input[type="button"],
button {
font-family: "Alef", sans-serif;
font-weight: 700;
cursor: pointer;
touch-action: manipulation;
}
.btn-primary,
.btn.btn-primary,
input[type="submit"].btn-primary {
background: var(--brand-green) !important;
border: 1px solid var(--brand-green-dark) !important;
color: #fff !important;
border-radius: var(--radius-sm) !important;
min-height: var(--tap);
padding: 12px 20px !important;
font-size: 17px !important;
box-shadow: var(--shadow-sm);
transition: background .2s, box-shadow .2s, transform .05s;
text-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--brand-green-dark) !important; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; }
.btn-block { display: block; width: 100%; }
.btn-lg { font-size: 18px !important; }
/* the "pay now" call-to-action gets the warm orange accent */
#btnPay.btn-primary,
input[id$="btnPay"].btn-primary {
background: var(--brand-orange) !important;
border-color: var(--brand-orange-dark) !important;
color: #3a2400 !important;
}
#btnPay.btn-primary:hover { background: var(--brand-orange-dark) !important; color:#fff !important; }
/* jQuery Mobile wraps each grid button in a .ui-input-btn whose is an
absolute, near-transparent overlay that MUST cover the whole visible button
to stay tappable. Force full coverage so taps always hit the input (a stray
width:auto previously shrank it to ~28px, so taps on the button did nothing). */
.ui-input-btn input,
.EU_DataTable .ui-input-btn input {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
}
/* GridView action buttons (rendered as ) */
.table-stripe,
input.table-stripe {
min-height: 40px;
padding: 6px 14px;
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
white-space: nowrap;
}
.table-stripe:hover { background: #00356f; }
/* disabled state */
.btn[disabled], input[disabled], .btn-primary[disabled] {
opacity: .5 !important;
cursor: not-allowed !important;
filter: grayscale(.3);
}
/* ---------- bootstrap labels used as field captions ----------------- */
.label-primary {
display: inline-block;
background: transparent !important;
color: var(--brand-maroon) !important;
font-family: "Secular One", "Alef", sans-serif;
font-size: 15px !important;
font-weight: 400;
padding: 0 !important;
}
h4 .label-primary { font-size: 16px !important; }
/* required-field asterisk stays red */
.ast { color: #C0392B; font-weight: 700; }
/* explicit field label (wraps its input for accessible association) */
.sy-field-label {
display: block;
margin: 0 0 4px;
}
.sy-field-label > .label-primary { display: block; margin: 0 0 2px; }
/* secondary / "back to previous step" button (anchor or input) */
.sy-btn-ghost {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
min-height: var(--tap);
line-height: var(--tap);
padding: 0 18px;
margin-top: 10px;
border: 1.5px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--brand-maroon);
font-family: "Alef", sans-serif;
font-weight: 700;
font-size: 16px;
cursor: pointer;
}
.sy-btn-ghost:hover { background: var(--surface-3); text-decoration: none; }
/* full-width secondary link (e.g. "forgot password") */
.sy-link-block {
display: inline-block;
margin-top: 10px;
min-height: 44px;
line-height: 44px;
color: var(--brand-blue);
font-weight: 700;
}
/* ---------- data tables (GridView .EU_DataTable) -------------------- */
/* Desktop: a normal styled table; JS wraps it in .sy-tbl-scroll so wide
tables scroll instead of breaking the column. Mobile: the media query
far below turns each row into a labelled card. */
.sy-tbl-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 18px;
}
.EU_DataTable {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--surface);
box-shadow: var(--shadow-sm);
margin: 0 0 18px;
}
.EU_DataTable th,
.EU_DataTable tr th {
background: var(--brand-maroon) !important;
color: #fff !important;
font-family: "Alef", sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 12px 10px !important;
border: 0 !important;
border-bottom: 2px solid var(--brand-brown) !important;
white-space: nowrap;
text-align: center;
}
.EU_DataTable td,
.EU_DataTable tr td {
color: var(--ink) !important;
font-family: "Alef", sans-serif !important;
font-size: 15px !important;
padding: 11px 10px !important;
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
vertical-align: middle;
background: var(--surface) !important;
}
.EU_DataTable tr:nth-child(2n+1) td { background: var(--surface-3) !important; }
.EU_DataTable tr:hover td { background: #FBE9CF !important; }
/* totals row emphasis (Label1 / lblSum live just below the grids) */
[id$="lblSum"], [id$="Label1"] {
font-family: "Secular One", "Alef", sans-serif !important;
color: var(--brand-maroon) !important;
}
[id$="lblSum"] { color: var(--brand-green-dark) !important; }
/* "no activities" empty-state labels */
[id$="lblNoActivities"], [id$="lblNoActivitiesToPay"] {
display: block;
text-align: center;
color: var(--ink-soft) !important;
font-family: "Alef", sans-serif !important;
padding: 24px 8px;
}
/* back / continue buttons sit in a 2-column table that clips on mobile -
stack the cells so each button is full width (a hidden parentTD stays hidden). */
.sy-btnrow,
.sy-btnrow tbody,
.sy-btnrow tr { display: block !important; width: 100%; }
.sy-btnrow td:not(.hiddenClass) {
display: block !important;
width: 100% !important;
padding: 0 !important;
}
/* ---------- payment iframe (Tranzila) ------------------------------- */
#paymentFrame, iframe[id$="paymentFrame"] {
width: 100% !important;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
}
/* section sub-headings the activity list uses inside .col-md-* */
.col-md-6 > h3, h3 {
font-family: "Secular One", "Alef", sans-serif;
color: var(--brand-brown-dark);
font-size: 18px;
margin: 18px 0 8px;
}
/* ---------- jQuery-Mobile button neutralisation --------------------- */
/* jQM themes enhanced buttons flat grey; rebrand them. Scoped so the
grid action buttons (.table-stripe -> blue) and pay CTA keep their own. */
.ui-btn:not(.table-stripe):not([id*="btnPay"]):not(.form-check-label):not(.form-check):not([class*="ui-radio"]):not([class*="ui-checkbox"]):not(.btn-secondary),
a.ui-btn:not(.table-stripe) {
background: var(--brand-green) !important;
border: 1px solid var(--brand-green-dark) !important;
color: #fff !important;
text-shadow: none !important;
font-family: "Alef", sans-serif !important;
border-radius: var(--radius-sm) !important;
min-height: var(--tap);
box-shadow: var(--shadow-sm);
}
.ui-btn:not(.table-stripe):not([id*="btnPay"]):not(.form-check-label):not(.form-check):not([class*="ui-radio"]):not([class*="ui-checkbox"]):not(.btn-secondary):hover {
background: var(--brand-green-dark) !important;
}
.ui-btn.ui-state-disabled, .ui-btn[disabled] { opacity: .5 !important; filter: grayscale(.3); }
/* jQM input wrappers */
.ui-input-text, .ui-field-contain { background: transparent !important; border: 0 !important; box-shadow: none !important; }
/* Radio / checkbox option labels are also jQM .ui-btn elements (here mixed with
Bootstrap .form-check / .btn-secondary, with the state class on the label
itself). They must NOT get the solid-green button fill - render them as
neutral selectable rows, highlighting only the chosen one. */
.ui-btn.form-check-label,
.ui-btn.form-check,
.form-check .ui-btn,
.ui-btn[class*="ui-radio"],
.ui-btn[class*="ui-checkbox"],
label.btn-secondary.ui-btn,
.ui-radio .ui-btn,
.ui-checkbox .ui-btn {
background: var(--surface) !important;
color: var(--ink) !important;
border: 1.5px solid var(--line) !important;
box-shadow: none !important;
text-align: start !important;
font-weight: 400 !important;
text-shadow: none !important;
min-height: var(--tap);
}
.ui-btn[class*="ui-radio-on"],
.ui-btn[class*="ui-checkbox-on"],
label.btn-secondary.ui-btn.active,
.ui-radio .ui-btn-active,
.ui-checkbox .ui-btn-active {
border-color: var(--brand-green) !important;
background: #F1F6E8 !important;
color: var(--brand-maroon) !important;
}
.ui-btn[class*="ui-radio-on"]:after,
.ui-btn[class*="ui-checkbox-on"]:after { background-color: var(--brand-green) !important; }
/* Bootstrap btn-group-toggle controls (swim, photo-consent, the final
confirmation). jQuery Mobile is told to skip these (data-role="none") because
it dissociated the wrapping