/* ========================================================================== RESPONSIVE.CSS — Mobile layout for screens up to 768px Based on design specs from iPhone_17_-_21.jpg & Mobile_main.jpg Link AFTER style.css in the HTML ========================================================================== */ @media (max-width: 768px) { /* ======================================================================== GLOBAL BODY & CONTAINER ======================================================================== */ body { min-height: unset; overflow-x: hidden; } .container { padding: 0 24px; } /* ======================================================================== TOP NAV BAR Mobile: dark bar, logo pushed to the right (RTL = start), same height ======================================================================== */ .top-nav-bar { padding: 24px 0; position: relative; z-index: 200; } .top-bar-container { padding: 0 24px; justify-content: space-between; align-items: center; } .brand-logo-icon { height: 40px; } /* Close / X button — shown only on mobile, hidden on desktop */ .mobile-nav-close-btn { display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: #FFFFFF; padding: 4px; display: none; } .mobile-nav-close-btn svg { width: 28px; height: 28px; } /* ======================================================================== SITE WRAPPER — single column on mobile ======================================================================== */ body .site-wrapper { flex-direction: column; gap: 0; padding-top: 0 !important; } .main-page { width: 100%; flex: none; min-width: 0; order: 1; } /* ======================================================================== HERO SECTION Mobile: stacks vertically — badge → big title → logo graphic below ======================================================================== */ .hero { width: 100%; padding: 0px 0 32px 0; margin: 0; } .hero-main-content { flex-direction: column-reverse; align-items: flex-start; gap: 24px; padding: 0 24px; } /* Badge: "יום פתוח / 13.05" stays same style, sits above the title */ .badge-date-hero { font-size: 14px; height: auto; padding: 6px 10px; margin-bottom: 10px; width: auto; min-width: 160px; } /* Logo graphic goes BELOW the text block on mobile (design shows it top-right, but in single-column flow it appears after the heading) */ .logo-graphic-container { order: 2; margin: 0 auto; /* display: none; */ /* Hidden in mobile scroll view per Mobile_main.jpg — logo shows in hero area inline */ width: 100%; height: auto; /* width: 50%; */ margin: 0; } /* Text block fills full width */ .text-brand-block { order: 1; width: 100%; } .main-title-hero { align-items: flex-start; } /* Large hero title — approx 90px on a 390px screen */ .title-line-1 { font-size: clamp(72px, 18.5vw, 96px); line-height: 0.82; font-size: clamp(65px, 10vw, 96px); } .title-line-2 { font-size: clamp(72px, 18.5vw, 96px); line-height: 0.82; margin-top: 0; font-size: clamp(65px, 10vw, 96px); } .sub-title-hero { font-size: 22px; margin-top: 12px; } /* ======================================================================== TICKER / USP BAR Mobile: 2×2 grid layout (per Mobile_main.jpg) ======================================================================== */ .ticker-bar { height: auto; padding: 24px; max-width: 100%; } .ticker-container { width: 100%; display: grid; grid-template-columns: 1fr 1fr; padding: 0 !important; } .ticker-item { /* icon on left, text on right in RTL = icon end */ gap: 10px; align-items: flex-start; flex-wrap: wrap; flex-flow: row; } .ticker-icon{ width: 32px; /* height: 32px; */ } .ticker-item br { display: none; } .ticker-item p { font-size: 16px; line-height: 1.3; width: calc(100% - 32px); } .ticker-icon img { width: 32px; height: 32px; } /* ======================================================================== PROGRAM ABOUT SECTION Mobile: image hidden, text full width (per Mobile_main.jpg image shows below the text as a photo with rounded visible edge) ======================================================================== */ .program-about-section { padding: 40px 0; padding-top: 0; } .program-about-container, .program-about-inner { flex-direction: column-reverse; gap: 24px; width: 100%; padding: 0; } .program-content-stack { max-width: 100%; width: 100%; padding: 0 24px; } .program-main-title { font-size: 40px; margin-bottom: 16px; } .program-sub-heading { font-size: 22px; margin-bottom: 16px; max-width: 100%; } .program-description-text { font-size: 17px; line-height: 1.6; } .program-image-wrapper { width: 100%; height: 220px; flex-shrink: 0; } /* ======================================================================== SPEECH BUBBLES SECTION Mobile: single column, stacked vertically ======================================================================== */ .speech-bubbles-section { padding: 0 0 40px 0; max-width: 100%; } .bubbles-grid-container { flex-direction: column; align-items: stretch; gap: 32px; padding: 0 24px; } .align-right-side, .align-left-side { width: 100%; max-width: 100%; } .tag-speech-bubble { font-size: 20px; height: auto; padding: 12px 16px; margin-right: 0; min-width: unset; width: auto; align-self: flex-start; margin-bottom: 16px; } /* Reset the negative margin used for desktop overlap effect */ .align-right-side .tag-speech-bubble { margin-right: 0; } .sub-header-bar-blue { width: 100%; font-size: 20px; height: auto; padding: 12px 16px; align-self: stretch; width: max-content; align-self: flex-end; } .main-stats-card-bubble { width: 100%; height: auto; padding: 16px 20px; align-self: flex-end; gap: 16px; flex-wrap: wrap; } .counter-huge-number { font-size: 40px; } .counter-label-desc { font-size: 16px; } .main-description-card-bubble { width: 95%; height: auto; padding: 20px; align-self: flex-end; } .audience-paragraph-text { font-size: 16px; line-height: 1.5; } /* ======================================================================== VIDEO SECTION Mobile: full width, shorter height, title above ======================================================================== */ .students-video-section { padding: 40px 0 48px 0; } .video-section-inner { width: 100%; padding: 0; } .video-section-title { font-size: 28px; margin-bottom: 24px; } .video-player-wrapper { width: 100%; max-width: 100%; height: 220px; } .video-custom-play-btn { width: 80px; height: 64px; padding: 16px 24px; } /* ======================================================================== SPLIT REQUIREMENTS (משך לימודים / תנאי קבלה) Mobile: stacked vertically, full width ======================================================================== */ .split-requirements-section { padding: 0; } .split-requirements-container { flex-direction: column; max-width: 100%; padding: 0; } .requirement-block { width: 100%; min-height: unset; padding: 32px 24px; } .block-main-heading { font-size: 40px; justify-content: center; margin: 0 0 12px 0; } .block-sub-heading-text { font-size: 16px; margin-bottom: 16px; } .duration-tracks-stack { gap: 16px; } .track-unit { align-items: center; text-align: right; } .track-title { font-size: 18px; } .track-details-row { font-size: 18px; flex-wrap: wrap; } .admissions-matrix-stack { width: 100%; width: 80%; } .admission-row { grid-template-columns: auto 1fr; gap: 8px; } .admission-label { font-size: 15px; width: 63%; width: 90px; } .admission-desc { font-size: 15px; width: auto; line-height: 1; } /* ======================================================================== SCHOLARSHIPS SECTION Mobile: 2-column icon+text grid per Mobile_main.jpg ======================================================================== */ .scholarships-section { padding: 40px 0 60px 0; max-width: 100%; } .scholarships-inner { width: 100%; padding: 0 24px; } .scholarships-main-title { font-size: 40px; margin-bottom: 32px; text-align: center; } .scholarships-grid-matrix { grid-template-columns: max-content; row-gap: 32px; column-gap: 20px; margin: 0 auto; justify-content: center; } .scholarship-card-item { flex-direction: row; gap: 12px; align-items: flex-start; width: 220px; align-items: center; } .scholarship-graphic-icon { width: 40px; height: 40px; flex-shrink: 0; } .scholarship-text-content h3 { font-size: 15px; line-height: 1.3; } /* ======================================================================== FOOTER Mobile: stacked, centered ======================================================================== */ .main-footer { padding: 24px 0 100px; } .footer-container { flex-direction: column-reverse; gap: 16px; align-items: center; text-align: center; padding: 0 24px; } .footer-links { gap: 20px; } /* ======================================================================== STICKY LEAD FORM — MOBILE OVERLAY Must live as a direct child (outside site-wrapper) so that position:fixed is never clipped by a flex/transform ancestor. visibility+opacity keeps the element paint-ready; the delay on visibility lets the slide-out animation complete before hiding. ======================================================================== */ .hero-form-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; flex: none !important; z-index: 999; background-color: #202020; padding: 0; gap: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; /* Hidden: slid off-screen + invisible */ visibility: hidden; opacity: 0; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0s linear 0.35s; height: 100vh; } /* Open: slides up, fully visible */ .hero-form-container.is-open { visibility: visible; opacity: 1; transform: translateY(0); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, visibility 0s linear 0s; } /* Mobile form inner layout */ .form-header-block { padding: 24px 24px 0 24px; width: 100%; } .form-top-meta-list { font-size: 20px; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .form-top-meta-list li:not(:last-child)::after { margin-right: 8px; } .form-main-heading-title { font-size: 96px; font-size: 50px; line-height: 0.9; margin-bottom: 32px; } .sticky-lead-form-grid { padding: 0 24px; row-gap: 36px; width: 100%; } .floating-input-group { width: 100%; height: 32px; } .floating-input-group input, .floating-input-group select { font-size: 18px; height: 32px; } .floating-input-group label { font-size: 18px; } .marketing-checkbox-group { width: 100%; margin-top: 0; } .marketing-consent-text { font-size: 14px; line-height: 1.4; } /* Buttons: side by side, full width of form */ .form-action-buttons-row { padding: 0 24px 32px 24px; gap: 12px; width: 100%; flex-direction: row; padding-inline: 0; } .btn-action-submit, .btn-action-call { flex: 1 1 0; min-width: 0; height: 52px; font-size: 18px; border-radius: 0; } /* ======================================================================== MOBILE FORM TRIGGER BUTTONS These float at the bottom of the page and open the form overlay. Add .mobile-form-trigger-bar to your HTML (see HTML changes note below). ======================================================================== */ .mobile-form-trigger-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 998; flex-direction: row; gap: 0; } .mobile-form-trigger-bar .btn-action-submit { flex: 1; height: 56px; font-size: 18px; border-radius: 0; } .mobile-form-trigger-bar .btn-action-call { flex: 1; height: 56px; font-size: 18px; border-radius: 0; } /* ======================================================================== MOBILE CLOSE BUTTON inside the form overlay Shown at top-left (LTR) / top-right won't cover logo ======================================================================== */ .mobile-form-close-btn { display: flex; background: transparent; border: none; color: #FFFFFF; cursor: pointer; padding: 20px 24px 8px 24px; align-self: flex-start; font-size: 28px; line-height: 1; } /* Desktop: hide mobile-only elements */ .mobile-form-trigger-bar { display: flex; /* visible on mobile */ background: #202020; padding: 20px; gap: 12px; /* z-index: 999; */ } .mobile-form-close-btn { display: flex; /* visible on mobile */ } } /* ========================================================================== Desktop: always hide mobile-only elements ======================================================================== */ @media (min-width: 769px) { .mobile-form-trigger-bar { display: none; } .mobile-form-close-btn { display: none; } .mobile-nav-close-btn { display: none; } }