/**
* Proportional Zoom CSS
* zoom on scales everything uniformly.
* Widget normalization: ensures identical appearance across ALL pages.
*/
body {
overflow-x: hidden;
}
/* ====== PRACTICE PAGE - compact mobile layout ====== */
/* "תרגול" button - small + centered */
html.is-mobile .practiceButton {
font-size: 24px !important;
padding: 10px 30px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
display: block !important;
width: fit-content !important;
}
/* Gray practice buttons - compact */
html.is-mobile .button span {
width: auto !important;
min-width: 100px !important;
white-space: nowrap !important;
padding: 6px 14px !important;
font-size: 14px !important;
}
html.is-mobile .button {
margin-bottom: 2px !important;
}
/* Green/blue/red header buttons - compact + no bottom margin */
html.is-mobile .myButtonGreen,
html.is-mobile .myButtonBlue,
html.is-mobile .myButtonRed {
font-size: 18px !important;
padding: 6px 14px !important;
margin-bottom: 0 !important;
margin-top: 6px !important;
}
/* Kill ALL br spacing in practice button area */
html.is-mobile .practice-page .practice-courses-list br {
display: none !important;
}
html.is-mobile .practice-page .practice-courses-list {
line-height: 1 !important;
font-size: 0 !important;
}
html.is-mobile .practice-page .practice-courses-list * {
font-size: 14px !important;
}
html.is-mobile .practice-page .practice-courses-list a.button {
margin: 2px 0 !important;
display: block !important;
}
html.is-mobile .practice-page .practice-courses-list .myButtonGreen,
html.is-mobile .practice-page .practice-courses-list .myButtonBlue,
html.is-mobile .practice-page .practice-courses-list .myButtonRed {
font-size: 18px !important;
margin: 2px auto !important;
display: block !important;
width: fit-content !important;
}
/* Tirgul/practice content pages: force mobile layout */
html.is-mobile .practice-page #content {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
html.is-mobile .practice-page #upper_info {
display: none !important;
}
html.is-mobile .practice-page table {
width: 100% !important;
max-width: 100vw !important;
table-layout: fixed !important;
}
html.is-mobile .practice-page td {
display: block !important;
width: 100% !important;
max-width: 100vw !important;
}
html.is-mobile .practice-page #header {
font-size: 18px !important;
padding: 8px !important;
}
html.is-mobile .practice-page img {
max-width: 100% !important;
height: auto !important;
}
/* Practice/tirgul pages: hide chat buttons and contact circle */
html.is-mobile body.practice-page .wa-floating-btn,
html.is-mobile body.practice-page .msg-floating-btn,
html.is-mobile body.practice-page .ig-floating-btn,
html.is-mobile body.practice-page .tt-floating-btn,
html.is-mobile body.practice-page .ai-floating-btn,
html.is-mobile body.practice-page .mobile-contact-circle,
html.is-mobile body.practice-page .wa-chat-popup,
html.is-mobile body.practice-page .msg-chat-popup {
display: none !important;
}
/* ====== WIDGET NORMALIZATION (applies to ALL pages) ====== */
/* Mobile: hide floating form - mobile_contact_form.php handles toggle */
html.is-mobile .floating-form { display: none !important; }
/* Mobile: accessibility button = 36px (same visual weight as chat buttons) */
html.is-mobile .accessibility-toggle {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
bottom: 12px !important;
left: 8px !important;
}
/* Mobile: contact circle - consistent position above accessibility */
html.is-mobile .mobile-contact-circle {
bottom: 56px !important;
left: 8px !important;
}
/* Mobile: chat buttons - consistent bottom row */
html.is-mobile .wa-floating-btn,
html.is-mobile .msg-floating-btn,
html.is-mobile .ig-floating-btn,
html.is-mobile .tt-floating-btn,
html.is-mobile .ai-floating-btn {
width: 42px !important;
height: 42px !important;
bottom: 8px !important;
}
html.is-mobile .wa-floating-btn svg,
html.is-mobile .msg-floating-btn svg,
html.is-mobile .ig-floating-btn svg,
html.is-mobile .tt-floating-btn svg,
html.is-mobile .ai-floating-btn svg {
width: 24px !important;
height: 24px !important;
}
/* ====== MOBILE HEADER NORMALIZATION (for PHP pages like /login) ====== */
/* Top panel compact */
html.is-mobile .top-panel { padding: 4px 0 !important; }
html.is-mobile .top-panel-inner { padding-right: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; gap: 0 !important; }
html.is-mobile .top-panel-link { flex: 0 1 auto !important; font-size: 0.75rem !important; padding: 8px 4px !important; white-space: nowrap !important; }
/* Navbar scrolls away + compact */
html.is-mobile .navbar { position: relative !important; top: auto !important; }
html.is-mobile .top-panel { position: relative !important; }
html.is-mobile .navbar-inner { max-width: 100% !important; padding: 0 8px !important; }
/* Logo constrained */
html.is-mobile .logo-wrapper { max-width: 55vw !important; display: inline-block !important; margin-top: 0 !important; margin-bottom: 0 !important; margin-right: 0 !important; }
html.is-mobile .logo-img { max-width: 100% !important; height: 60px !important; width: auto !important; }
/* Nav links wrap */
html.is-mobile .nav-links { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px 4px !important; padding: 4px 2px !important; list-style: none !important; margin: 0 !important; width: 100% !important; }
html.is-mobile .nav-links .nav-link { font-size: 11px !important; padding: 4px 4px !important; white-space: nowrap !important; }
html.is-mobile .nav-links .nav-link i { display: none !important; }
html.is-mobile .nav-links .dropdown-menu { display: none !important; }
html.is-mobile .nav-actions { display: none !important; }
/* User bar compact */
html.is-mobile .user-bar-inner { padding: 0 4px !important; gap: 3px 6px !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; }
html.is-mobile .user-bar-inner .btn-login { margin-left: 0 !important; }
html.is-mobile .user-bar-inner .btn-register,
html.is-mobile .user-bar-inner .btn-login { flex: 1 1 40% !important; font-size: 11px !important; padding: 5px 8px !important; text-align: center !important; justify-content: center !important; min-width: 0 !important; box-sizing: border-box !important; }
html.is-mobile .btn-calculator { position: static !important; right: auto !important; top: auto !important; transform: none !important; font-size: 10px !important; padding: 3px 8px !important; }
html.is-mobile .user-bar .user-settings { width: 26px !important; min-width: 26px !important; height: 26px !important; position: static !important; left: auto !important; top: auto !important; transform: none !important; }
html.is-mobile .user-bar .user-btn { font-size: 10px !important; padding: 3px 6px !important; white-space: nowrap !important; }
html.is-mobile .user-bar .user-settings + .user-btn { position: static !important; left: auto !important; top: auto !important; transform: none !important; }
/* ====== MOBILE GLOBAL OVERFLOW + BODY FIX ====== */
/* Force ALL content to fit viewport width on mobile */
html.is-mobile,
html.is-mobile body {
overflow-x: hidden !important;
max-width: 100vw !important;
}
html.is-mobile * {
max-width: 100vw !important;
box-sizing: border-box !important;
}
html.is-mobile img,
html.is-mobile table,
html.is-mobile .frameBg,
html.is-mobile .frameBgs {
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
html.is-mobile td {
max-width: 100vw !important;
word-wrap: break-word !important;
}
/* Overflow containment for major containers */
html.is-mobile section,
html.is-mobile nav,
html.is-mobile footer,
html.is-mobile .container,
html.is-mobile .user-bar,
html.is-mobile .user-bar-inner {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* ====== MOBILE FOOTER NORMALIZATION ====== */
/* Footer - 2 columns grid, extra bottom padding for floating buttons */
html.is-mobile footer[role="contentinfo"] {
padding: 20px 12px 100px !important;
overflow-x: hidden !important;
}
html.is-mobile footer[role="contentinfo"] div[style*="grid-template-columns:repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
html.is-mobile footer[role="contentinfo"] div[style*="border-top"] {
flex-direction: column !important;
text-align: center !important;
gap: 8px !important;
}
/* Quick links section - stack for mobile */
html.is-mobile section[aria-label="קישורים מהירים"] {
overflow-x: hidden !important;
max-width: 100vw !important;
}
html.is-mobile section[aria-label="קישורים מהירים"] div[style*="padding:0 40px"],
html.is-mobile section[aria-label="קישורים מהירים"] div[style*="padding: 0 40px"] {
padding: 0 12px !important;
}
html.is-mobile section[aria-label="קישורים מהירים"] div[role="navigation"] {
flex-wrap: wrap !important;
gap: 4px 8px !important;
justify-content: center !important;
}
html.is-mobile section[aria-label="קישורים מהירים"] div[role="navigation"] > a {
font-size: 12px !important;
white-space: nowrap !important;
}