/**
* Proportional Zoom CSS
* zoom on scales everything uniformly.
* Widget normalization: ensures identical appearance across ALL pages.
*/
/* overflow-x hidden only via is-mobile rules below - NOT on body globally.
Global overflow-x:hidden breaks MultiLevelPushMenu sidebar on tirgul pages. */
/* ====== 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 + centered */
html.is-mobile .practice-page .button span {
width: auto !important;
min-width: 100px !important;
white-space: nowrap !important;
padding: 6px 14px !important;
font-size: 14px !important;
color: #3A474D !important;
}
html.is-mobile .practice-page .button {
margin-bottom: 2px !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !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 {
text-align: center !important;
width: 100% !important;
}
html.is-mobile .practice-page .practice-courses-list * {
font-size: 14px !important;
}
html.is-mobile .practice-page .practice-courses-list a.button {
margin: 6px auto !important;
display: block !important;
width: fit-content !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
float: none !important;
transform: translateX(30px) !important;
}
html.is-mobile .practice-page .practice-courses-list a.button span {
color: #3A474D !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;
transform: translateX(30px) !important;
}
/* Tirgul/psychometry pages: force mobile layout */
html.is-mobile .bodyBg .container {
min-width: 0 !important;
width: 100% !important;
max-width: 100vw !important;
}
html.is-mobile .bodyBg table.frameBg {
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html.is-mobile .bodyBg table.frameBg img {
max-width: 100% !important;
height: auto !important;
}
html.is-mobile .bodyBg .mp-pusher {
min-width: 0 !important;
width: 100% !important;
}
html.is-mobile .bodyBg #nview {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Practice page buttons: 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;
margin-left: auto !important;
margin-right: auto !important;
}
html.is-mobile .practice-page td {
display: block !important;
width: 100% !important;
max-width: 100vw !important;
text-align: center !important;
padding-left: 0 !important;
padding-right: 0 !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: scroll-to-top button - match chat button size, right above wa button */
html.is-mobile .scroll-top-btn {
bottom: 55px !important;
right: 8px !important;
width: 36px !important;
height: 36px !important;
z-index: 9989 !important;
}
html.is-mobile .scroll-top-btn svg {
width: 14px !important;
height: 14px !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 - 2 row layout on mobile */
html.is-mobile .user-bar-inner {
padding: 2px 4px !important;
gap: 2px 4px !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
display: flex !important;
}
/* Row 1: register + login + calculator */
html.is-mobile .user-bar-inner .btn-register,
html.is-mobile .user-bar-inner .btn-login {
order: 1 !important;
flex: 1 1 30% !important;
font-size: 10px !important;
padding: 4px 6px !important;
text-align: center !important;
justify-content: center !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
}
html.is-mobile .btn-calculator {
order: 1 !important;
position: static !important;
right: auto !important;
top: auto !important;
transform: none !important;
font-size: 10px !important;
padding: 4px 6px !important;
flex: 0 1 auto !important;
}
/* Row 2: greeting + all user buttons + phone */
html.is-mobile .user-bar-inner .user-greeting {
order: 2 !important;
font-size: 11px !important;
font-weight: bold !important;
white-space: nowrap !important;
flex: 0 0 auto !important;
}
html.is-mobile .user-bar .user-btn {
order: 2 !important;
font-size: 9px !important;
padding: 3px 5px !important;
white-space: nowrap !important;
}
html.is-mobile .user-bar .user-settings {
order: 2 !important;
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
}
html.is-mobile .user-bar .user-settings + .user-btn {
order: 2 !important;
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 footer,
html.is-mobile .user-bar,
html.is-mobile .user-bar-inner {
overflow-x: hidden !important;
max-width: 100vw !important;
}
/* nav + .container excluded: overflow-x:hidden breaks MultiLevelPushMenu sidebar */
/* ====== 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;
}
/* ====== TIRGUL/PSYCHOMETRY MOBILE FIXES ====== */
/* Task 13: Hide old welcomUser bar on mobile (redundant with new_header) */
html.is-mobile .bodyBg > .gradientBoxesWithOuterShadows {
display: none !important;
}
/* Task 14: Reduce gap above "פרק כמותי" + center title */
html.is-mobile .bodyBg .frameBg tr:first-child {
height: auto !important;
}
html.is-mobile .bodyBg .frameBg tr:first-child td {
padding: 8px 10px !important;
}
html.is-mobile .bodyBg .frameBg div[style*="font-size:35px"] {
text-align: center !important;
font-size: 26px !important;
margin-top: 5px !important;
}
/* Task 15+23: Green button - wider, one line, flatter perspective, max text size */
html.is-mobile .bodyBg #trigger {
white-space: nowrap !important;
width: auto !important;
min-width: 300px !important;
margin: 10px auto !important;
transform: perspective(none) !important;
-webkit-transform: none !important;
}
html.is-mobile .bodyBg #trigger .outer,
html.is-mobile .bodyBg #trigger .height {
transform: none !important;
-webkit-transform: none !important;
}
html.is-mobile .bodyBg #trigger .inner {
white-space: nowrap !important;
font-size: 18px !important;
font-weight: bold !important;
padding: 12px 20px !important;
transform: none !important;
-webkit-transform: none !important;
}
/* Also for trigger on subpages */
html.is-mobile .bodyBg a#trigger.menu-trigger {
white-space: nowrap !important;
font-size: 16px !important;
font-weight: bold !important;
display: block !important;
text-align: center !important;
margin: 8px auto !important;
float: none !important;
}
/* Push menu: overlay mode on mobile (no content push) */
html.is-mobile .mp-menu {
width: 280px !important;
font-size: 14px !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
height: 100dvh !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 99999 !important;
transform: translateX(-100%) !important;
-webkit-transform: translateX(-100%) !important;
transition: transform 0.3s ease !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
}
/* Prevent pusher from pushing content - menu overlays instead */
html.is-mobile .mp-pusher.mp-pushed {
transform: none !important;
-webkit-transform: none !important;
}
/* Show menu when opened - slides in from left */
html.is-mobile .mp-pusher.mp-pushed .mp-menu {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
}
/* Dark overlay behind menu */
html.is-mobile .mp-pusher.mp-pushed::after {
content: '' !important;
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0,0,0,0.4) !important;
z-index: 99998 !important;
}
/* Flatten all sub-levels so categories are visible */
html.is-mobile .mp-pusher.mp-pushed .mp-menu .mp-level {
position: relative !important;
width: 100% !important;
height: auto !important;
overflow-y: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
html.is-mobile .mp-menu h2 {
font-size: 1.3em !important;
padding: 0.6em !important;
}
html.is-mobile .mp-menu ul li > a {
font-size: 1.1em !important;
padding: 0.5em 0.8em !important;
}
/* Reduce padding chain on mobile for max content width */
html.is-mobile .bodyBg .container {
padding: 0 !important;
}
html.is-mobile .bodyBg table.frameBg {
padding: 6px !important;
margin: 0 !important;
}
html.is-mobile .bodyBg .frameBg td {
padding: 4px 2px !important;
}
/* Task 18: Force entire question chain to full width on mobile */
html.is-mobile .bodyBg #lby-content,
html.is-mobile .bodyBg #lby-demo,
html.is-mobile .bodyBg #lby-content .header,
html.is-mobile .bodyBg #lby-content .img-container {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html.is-mobile .bodyBg #lby-content ul {
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding: 0 5px !important;
box-sizing: border-box !important;
}
html.is-mobile .bodyBg #lby-content img,
html.is-mobile .bodyBg #lby-demo img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Question content table - full width */
html.is-mobile .bodyBg #lby-content table {
width: 100% !important;
table-layout: auto !important;
}
html.is-mobile .bodyBg #lby-content td {
display: block !important;
width: 100% !important;
}
/* Answer radio buttons - single row (1 rightmost, 4 leftmost) */
html.is-mobile .bodyBg #lby-content ul li table {
width: 100% !important;
margin-right: 0 !important;
float: none !important;
}
html.is-mobile .bodyBg #lby-content ul li table tr {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: center !important;
gap: 2px !important;
direction: rtl !important;
}
html.is-mobile .bodyBg #lby-content ul li table td {
width: auto !important;
display: inline-block !important;
flex: 0 0 auto !important;
padding: 0 !important;
}
/* Labelauty buttons - compact, styled, no radio dot */
/* NOTE: background and color WITHOUT !important so inline styles from check mechanism can override */
html.is-mobile .bodyBg .labelauty + label {
min-width: 0 !important;
width: auto !important;
padding: 3px 4px !important;
font-size: 9px !important;
min-height: 0 !important;
height: auto !important;
line-height: 1.2 !important;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
border: 1px solid #4caf50 !important;
border-radius: 4px !important;
color: #2e7d32;
font-weight: 600 !important;
cursor: pointer !important;
text-align: center !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
transition: all 0.2s !important;
max-width: 80px !important;
overflow: hidden !important;
white-space: nowrap !important;
}
/* Hide the radio dot visually but keep element for JS check functionality */
html.is-mobile .bodyBg .labelauty + label > span.labelauty-unchecked-image,
html.is-mobile .bodyBg .labelauty + label > span.labelauty-checked-image,
html.is-mobile .bodyBg .labelauty + label > span:first-child:not(.labelauty-unchecked):not(.labelauty-checked) {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
/* Also hide icon element if present */
html.is-mobile .bodyBg .labelauty + label > i,
html.is-mobile .bodyBg .labelauty + label > span[style*="background"] {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
}
/* Selected state - no !important on background/color so check mechanism inline styles can override */
html.is-mobile .bodyBg .labelauty:checked + label {
background: linear-gradient(135deg, #4caf50, #388e3c);
color: #fff;
border-color: #2e7d32 !important;
box-shadow: 0 2px 6px rgba(76,175,80,0.4) !important;
}
html.is-mobile .bodyBg #lby-content ul li {
height: auto !important;
margin-bottom: 4px !important;
}
/* Action buttons - centered row, no underline, reduced gap from answers */
html.is-mobile .bodyBg .button2 {
font-size: 11px !important;
padding: 6px 8px !important;
margin: 2px 3px !important;
text-decoration: none !important;
display: inline-block !important;
}
/* Remove triple br between answers and action buttons */
html.is-mobile .bodyBg #lby-content br + br + br {
display: none !important;
}
html.is-mobile .bodyBg #lby-content br + br {
display: none !important;
}
/* Center the action buttons wrapper */
html.is-mobile .bodyBg #lby-content {
text-align: center !important;
}
/* Action buttons wrapper - centered */
html.is-mobile .bodyBg #lby-content .hr {
clear: both !important;
}
/* "תשובה" prefix on answer labels via CSS */
html.is-mobile .bodyBg .labelauty + label::before {
content: 'תשובה ' !important;
font-size: 9px !important;
}
/* Check animation - correct answer V / wrong answer X */
.pz-anim {
position: absolute !important;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-size: 26px;
font-weight: 900;
pointer-events: none;
animation: pzPop 0.6s ease-out forwards;
z-index: 10;
line-height: 1;
}
.pz-anim-correct {
color: #1b5e20;
text-shadow: 0 0 10px rgba(27,94,32,0.7), 0 0 20px rgba(76,175,80,0.4);
}
.pz-anim-wrong {
color: #c62828;
text-shadow: 0 0 10px rgba(198,40,40,0.7), 0 0 20px rgba(244,67,54,0.4);
}
@keyframes pzPop {
0% { opacity: 0; transform: translateX(-50%) scale(0.2); }
40% { opacity: 1; transform: translateX(-50%) scale(1.5); }
70% { transform: translateX(-50%) scale(0.9); }
100% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
/* Mobile fancybox - full width, tall enough for image */
html.is-mobile .fancybox-wrap {
width: 96vw !important;
max-width: 96vw !important;
left: 2vw !important;
top: 5vh !important;
position: fixed !important;
}
html.is-mobile .fancybox-skin {
width: 100% !important;
}
html.is-mobile .fancybox-inner {
width: 100% !important;
height: 85vh !important;
max-height: 85vh !important;
overflow: auto !important;
}
html.is-mobile .fancybox-iframe {
width: 100% !important;
height: 100% !important;
image-rendering: -webkit-optimize-contrast;
}
/* Calculator button position + size + highlight override */
.btn-calculator { right: 570px !important; padding: 8px 18px !important; font-size: 13px !important; gap: 6px !important; border-radius: 22px !important; background: linear-gradient(135deg, #357a1a, #4CAF50) !important; color: #fff !important; border-color: #357a1a !important; box-shadow: 0 2px 8px rgba(53,122,26,0.3) !important; animation: calcPulse 2.5s ease-in-out infinite !important; }
.btn-calculator:hover { background: linear-gradient(135deg, #2d6b15, #43A047) !important; box-shadow: 0 4px 14px rgba(53,122,26,0.45) !important; transform: translateY(-52%) scale(1.05) !important; animation: none !important; }
.btn-calculator i { color: #fff !important; }
@keyframes calcPulse { 0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 2px 8px rgba(53,122,26,0.3); } 50% { transform: translateY(-50%) scale(1.06); box-shadow: 0 4px 16px rgba(53,122,26,0.5); } }
/* Shift greeting+actions group 40px left */
.user-bar-inner .btn-login { margin-left: 341px !important; }