/* === Fluent Advance: Subscribe (Stay Informed) full-width blue section === */ .ml-embedded { background-color: #0A2342 !important; width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; padding: 48px 24px !important; box-sizing: border-box !important; } .ml-embedded .ml-form-align-center { max-width: 480px !important; margin: 0 auto !important; } .ml-embedded .ml-form-embedWrapper, .ml-embedded .ml-form-embedBody, .ml-embedded .ml-form-embedContainer { background-color: transparent !important; box-shadow: none !important; } .ml-embedded h4 { color: #ffffff !important; background-color: transparent !important; } .ml-embedded p { color: #ffffff !important; } /* === Fluent Advance: Mobile Header fix === */ /* Make the header NON-FIXED on mobile so it scrolls with the page and stops covering Home / Contact buttons on every page. This also frees up screen space so the mobile menu overlay (which is the WordPress default) can show all items. */ @media (max-width: 781px) { header.wp-block-template-part { position: static !important; top: auto !important; } } /* === Mobile Hamburger Menu: full-page, top-aligned w/ safe centering, white bg, blue text === */ @media (max-width: 781px) { html .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open, html .wp-block-navigation__responsive-container.is-menu-open.has-modal-open { background-color: #ffffff !important; background: #ffffff !important; color: #1e3a8a !important; padding: 4.5rem 1rem 2.5rem !important; box-sizing: border-box !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; position: fixed !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; transform: none !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: auto !important; max-width: 100% !important; padding: 0 !important; margin: auto 0 !important; text-align: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 1.5rem !important; width: 100% !important; padding: 0 !important; margin: 0 !important; list-style: none !important; text-align: center !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, .wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item { width: 100% !important; text-align: center !important; justify-content: center !important; display: flex !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { color: #1e3a8a !important; background: transparent !important; font-size: 1.5rem !important; font-weight: 600 !important; text-align: center !important; justify-content: center !important; padding: 0.25rem 0 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container.is-menu-open button.wp-block-navigation__responsive-container-close { color: #1e3a8a !important; fill: #1e3a8a !important; position: absolute !important; top: 1rem !important; right: 1rem !important; z-index: 100001 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { fill: #1e3a8a !important; } } /* === Desktop Header Fix: prevent fixed header from obscuring Home button === */ @media (min-width: 782px) { body .wp-site-blocks > main, body .wp-site-blocks > .wp-block-group:not(header):first-of-type, body > .wp-site-blocks { padding-top: 30px; } } /* === Fluent Advance: Vertical Scroll Carousel for About hero === */ .fa-hcarousel-section { position: relative; width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; height: 300vh; /* Three slides worth of vertical scroll */ background-color: #0a2342; padding: 0 !important; } .fa-hcarousel { position: relative; width: 100%; height: 100%; } .fa-hcarousel__sticky { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; background-color: #0a2342; } /* Vertical track: stack slides on top of each other and translate Y */ .fa-hcarousel__track { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100vw; height: 300vh; /* 3 slides x 100vh */ will-change: transform; transition: transform 0.05s linear; } .fa-hcarousel__slide { flex: 0 0 100vh; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 5vh 8vw; box-sizing: border-box; color: #ffffff; } .fa-hcarousel__heading { font-size: clamp(2rem, 6vw, 5rem); font-weight: 700; line-height: 1.1; font-style: italic; color: #ffffff; margin: 0; text-align: center; max-width: 1100px; } .fa-hcarousel__text { font-size: clamp(1.1rem, 2.2vw, 1.75rem); line-height: 1.5; color: #c8d8f0; max-width: 800px; text-align: center; margin: 0; } .fa-hcarousel__image { max-width: min(90vw, 1100px); max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 18px 60px rgba(0,0,0,0.35); } @media (max-width: 768px) { .fa-hcarousel-section { height: 180vh; } .fa-hcarousel__slide { padding: 3vh 6vw; } .fa-hcarousel__heading { font-size: clamp(2.4rem, 9vw, 5rem); } .fa-hcarousel__text { font-size: clamp(1.15rem, 4vw, 1.75rem); } } /* Vertical progress dots on the right side */ .fa-hcarousel__dots { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 5; } .fa-hcarousel__dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255,255,255,0.35); transition: background-color 0.25s ease, transform 0.25s ease; } .fa-hcarousel__dot.is-active { background-color: #ffffff; transform: scale(1.25); } /* Override theme h2 background for carousel */ .fa-hcarousel__heading, .fa-hcarousel__slide h1, .fa-hcarousel__slide h2, .fa-hcarousel__slide h3 { background-color: transparent !important; background: transparent !important; color: #ffffff !important; } .fa-hcarousel__text { color: #c8d8f0 !important; background: transparent !important; } /* === Turbocharge Your Business — Professional Layout, Form & Scroll Burst === */ /* Container styling */ .wp-block-group:has(> h2.animated-contact) { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 4rem 1.5rem !important; position: relative; } /* Heading */ .wp-block-group:has(> h2.animated-contact) > h2.animated-contact { font-size: clamp(2rem, 4vw, 3.25rem) !important; margin-bottom: 0.5rem !important; letter-spacing: -0.02em; line-height: 1.1; } .wp-block-group:has(> h2.animated-contact) > h2.animated-contact::after { content: ""; display: block; width: 80px; height: 4px; background: linear-gradient(90deg, #0e6dc2, #4ea7ff); margin: 1rem auto 0; border-radius: 2px; } /* Description paragraph */ .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph { max-width: 720px; margin: 0 auto 2.5rem !important; font-size: 1.125rem; line-height: 1.6; color: #4a5a6a; } /* Side-by-side layout on desktop */ @media (min-width: 900px) { .wp-block-group:has(> h2.animated-contact) > .wp-block-image { width: 46% !important; max-width: 46% !important; margin: 0 2% 0 0 !important; float: left; } .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph { width: 48%; float: right; text-align: left !important; margin: 0 0 1.5rem !important; padding-top: 0.5rem; } .wp-block-group:has(> h2.animated-contact) > .fa-contact-form { width: 48%; float: right; clear: right; } .wp-block-group:has(> h2.animated-contact)::after { content: ""; display: block; clear: both; } } /* Image */ .wp-block-group:has(> h2.animated-contact) > .wp-block-image img { border-radius: 16px !important; box-shadow: 0 20px 50px rgba(13, 41, 80, 0.18), 0 4px 12px rgba(13, 41, 80, 0.08); width: 100% !important; height: auto !important; transition: transform 0.5s ease, box-shadow 0.5s ease; } .wp-block-group:has(> h2.animated-contact) > .wp-block-image:hover img { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(13, 41, 80, 0.22), 0 6px 16px rgba(13, 41, 80, 0.10); } /* Style the existing "Contact us now" button block as a real-looking inline form via CSS-only: we keep the original button for accessibility/fallback, but visually transform the container into a polished call-to-action card next to the image. */ .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { background: #ffffff; border-radius: 16px; padding: 1.75rem; box-shadow: 0 12px 40px rgba(13, 41, 80, 0.10), 0 2px 6px rgba(13, 41, 80, 0.05); border: 1px solid rgba(14, 109, 194, 0.08); text-align: left; box-sizing: border-box; display: block !important; justify-content: flex-start !important; } @media (min-width: 900px) { .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { width: 48%; float: right; clear: right; } } /* Add a heading and form fields ABOVE the original button using ::before content with HTML attribute trick won't work. Instead, we visually beautify the button container and let the JS-injected form replace it. For now, keep button visible & pretty as a fallback. */ .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons::before { content: "Get in touch"; display: block; font-size: 1.25rem; font-weight: 700; color: #0d2950; margin-bottom: 0.75rem; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons::after { content: "We'll respond within 1 business day."; display: block; margin-top: 0.75rem; font-size: 0.85rem; color: #6b7a8a; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons .wp-block-button { width: 100%; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons .wp-block-button__link { width: 100%; display: block; padding: 0.95rem 1.25rem !important; background: linear-gradient(135deg, #0e6dc2 0%, #1a8bd9 100%) !important; color: #fff !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.02em; text-align: center; box-shadow: 0 6px 18px rgba(14, 109, 194, 0.30); transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons .wp-block-button__link:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 24px rgba(14, 109, 194, 0.38); } /* Hidden form scaffold rendered by injected JS (if present); else this rule is dormant */ .fa-contact-form { background: #ffffff; border-radius: 16px; padding: 1.75rem; box-shadow: 0 12px 40px rgba(13, 41, 80, 0.10), 0 2px 6px rgba(13, 41, 80, 0.05); border: 1px solid rgba(14, 109, 194, 0.08); text-align: left; box-sizing: border-box; } .fa-contact-form h3 { margin: 0 0 1rem; font-size: 1.25rem; color: #0d2950; font-weight: 700; } .fa-contact-form .fa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; } @media (max-width: 600px) { .fa-contact-form .fa-row { grid-template-columns: 1fr; } } .fa-contact-form input, .fa-contact-form textarea { width: 100%; padding: 0.75rem 0.9rem; border: 1px solid #d6dde6; border-radius: 10px; font-size: 0.95rem; font-family: inherit; background: #f8fafc; color: #0d2950; box-sizing: border-box; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .fa-contact-form input:focus, .fa-contact-form textarea:focus { outline: none; border-color: #0e6dc2; background: #fff; box-shadow: 0 0 0 3px rgba(14, 109, 194, 0.15); } .fa-contact-form textarea { min-height: 110px; resize: vertical; margin-bottom: 0.85rem; } .fa-contact-form button { width: 100%; padding: 0.85rem 1.25rem; background: linear-gradient(135deg, #0e6dc2 0%, #1a8bd9 100%); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: 0.02em; transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 6px 18px rgba(14, 109, 194, 0.30); } .fa-contact-form button:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 24px rgba(14, 109, 194, 0.38); } /* === Burst-in scroll animation using modern CSS scroll-driven animations === */ @keyframes faBurstIn { from { opacity: 0; transform: translateY(40px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @supports (animation-timeline: view()) { .wp-block-group:has(> h2.animated-contact) > h2.animated-contact, .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph, .wp-block-group:has(> h2.animated-contact) > .wp-block-image, .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { animation: faBurstIn linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; } .wp-block-group:has(> h2.animated-contact) > h2.animated-contact { animation-range: entry 0% entry 50%; } .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph { animation-range: entry 5% entry 55%; } .wp-block-group:has(> h2.animated-contact) > .wp-block-image { animation-range: entry 10% entry 60%; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { animation-range: entry 15% entry 65%; } } /* Fallback for browsers without scroll-driven animations: simple one-time burst on page load (only if the section is initially in viewport, otherwise it's already visible by default). */ @supports not (animation-timeline: view()) { .wp-block-group:has(> h2.animated-contact) > h2.animated-contact, .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph, .wp-block-group:has(> h2.animated-contact) > .wp-block-image, .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { animation: faBurstIn 0.9s cubic-bezier(.2,.8,.2,1) both; } .wp-block-group:has(> h2.animated-contact) > h2.animated-contact { animation-delay: 0.05s; } .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph { animation-delay: 0.20s; } .wp-block-group:has(> h2.animated-contact) > .wp-block-image { animation-delay: 0.30s; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { animation-delay: 0.45s; } } @media (prefers-reduced-motion: reduce) { .wp-block-group:has(> h2.animated-contact) > * { animation: none !important; opacity: 1 !important; transform: none !important; } } /* === End Turbocharge section === */ /* IELTS/TOEFL test page - hide redundant quiz header in welcome screen */ #fa-welcome .quiz-header { display: none; } #fa-quiz .quiz-header { display: none; } /* === Fluent Advance: Blog post readability layout === */ /* Constrain and center the content of single blog posts only (not pages) */ .single-post .entry-content, .single-post .wp-block-post-title, .single-post .entry-title { max-width: 740px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .single-post .entry-content { line-height: 1.7; } .single-post .entry-content p { margin-bottom: 1.25em; } /* === Fluent Advance: Resources / page readable content width === */ .entry-content.is-layout-constrained { max-width: 720px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } .entry-content.is-layout-constrained > * { max-width: 100%; } /* === Fluent Advance: Resources card layout === */ .wp-block-latest-posts.is-grid{ display:flex; flex-wrap:wrap; gap:28px; margin:24px 0; padding:0; list-style:none; } .wp-block-latest-posts.is-grid li{ flex:1 1 320px; max-width:420px; background:#ffffff; border:1px solid #e6e9ef; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.05); display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; } .wp-block-latest-posts.is-grid li:hover{ box-shadow:0 6px 20px rgba(0,0,0,0.10); transform:translateY(-2px); } .wp-block-latest-posts__featured-image{ margin:0; overflow:hidden; } .wp-block-latest-posts__featured-image img{ width:100%; height:200px; object-fit:cover; display:block; } .wp-block-latest-posts.is-grid li > a:first-child, .wp-block-latest-posts.is-grid li .wp-block-latest-posts__post-title{ display:block; font-weight:700; font-size:1.1rem; line-height:1.3; margin:16px 18px 6px; } .wp-block-latest-posts__post-date{ display:block; margin:0 18px 10px; font-size:.8rem; color:#8a94a6; text-transform:uppercase; letter-spacing:.03em; } .wp-block-latest-posts__post-excerpt{ margin:0 18px 18px; font-size:.95rem; line-height:1.55; color:#4a5568; } .wp-block-latest-posts__post-excerpt a{ display:inline-block; margin-top:6px; font-weight:600; text-decoration:none; } /* === Streamline gap between Contact section and Offerings section === */ .wp-block-group.wp-container-core-group-is-layout-774ddb76:has(> h2.animated-contact) { padding-bottom: 16px !important; margin-bottom: 0px !important; } .wp-block-group.wp-container-core-group-is-layout-f6f5c76e:has(> h2.animated-contact) { padding-top: 16px !important; } .wp-block-group.alignwide.wp-container-core-group-is-layout-774ddb76:has(> h2.animated-contact.has-custom-accent-blue-color) > .wp-block-buttons { margin-bottom: 16px !important; } /* === Mobile language switcher: show flags/languages like desktop, but hide the redundant duplicate toggle link === */ @media (max-width: 781px) { html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-item__content, html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-navigation-language-switcher > .wp-block-navigation-submenu__toggle { display: none !important; } html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-polylang-navigation-language-switcher { display: block !important; } html body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-polylang-navigation-language-switcher { position: static !important; opacity: 1 !important; visibility: visible !important; height: auto !important; min-width: 0 !important; width: 100% !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; } } /* === Fluent Advance: Mobile Header v4 - logo anchored to right edge === */ @media (max-width: 781px) { header.wp-block-template-part .wp-block-group.is-content-justification-space-between { justify-content: flex-start !important; align-items: center !important; gap: 0.3rem !important; } header.wp-block-template-part .wp-block-site-title, header.wp-block-template-part .wp-block-site-title.wp-block-site-title a { font-size: 0.95rem !important; line-height: 1.15 !important; margin-left: 0 !important; } header.wp-block-template-part .wp-block-group.is-content-justification-space-between > :nth-child(2) { gap: 0.3rem !important; } header.wp-block-template-part .wp-block-buttons { flex-shrink: 0 !important; } header.wp-block-template-part .wp-block-button__link { white-space: nowrap !important; font-size: 0.72rem !important; padding: 0.4rem 0.55rem !important; } header.wp-block-template-part .wp-block-navigation { flex-shrink: 0 !important; } header.wp-block-template-part .wp-block-group.is-content-justification-space-between > .wp-block-image { flex-shrink: 0 !important; margin-left: auto !important; } header.wp-block-template-part .wp-block-group.is-content-justification-space-between > .wp-block-image img { width: 74px !important; height: 74px !important; } } /* === Fluent Advance: Mobile header spacing cleanup (logo/menu row) === */ @media (max-width: 781px) { header.wp-block-template-part .fa-header-row.fa-header-row { flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; row-gap: 10px !important; column-gap: 14px !important; padding: 12px 16px !important; } header.wp-block-template-part .fa-header-brand { flex: 0 0 auto !important; margin: 0 !important; } header.wp-block-template-part .fa-header-actions { flex: 0 0 auto !important; gap: 10px !important; margin: 0 !important; } header.wp-block-template-part .fa-header-logo.fa-header-logo.fa-header-logo { margin-left: 0 !important; margin-top: 0 !important; flex: 0 0 auto !important; } } /* === Fluent Advance: Desktop spacing fix for "Turbocharge / Get in touch" CTA section === */ /* Scoped to desktop only (min-width: 900px), mobile/tablet below this is untouched. The prior float-based two-column attempt was unreliable (the image float was being overridden elsewhere), which caused inconsistent, oversized gaps between the paragraph and the "Get in touch" button card on real desktop browsers. This neutralizes the float/clear mechanics and uses simple centered block stacking with tight, consistent margins instead, so the gap is always small and predictable. */ @media (min-width: 900px) { .wp-block-group:has(> h2.animated-contact) > .wp-block-image { float: none !important; width: 100% !important; max-width: 480px !important; margin: 0 auto 2rem !important; } .wp-block-group:has(> h2.animated-contact) > p.wp-block-paragraph { float: none !important; width: 100% !important; max-width: 720px !important; margin: 0 auto 1.5rem !important; text-align: center !important; } .wp-block-group:has(> h2.animated-contact) > .wp-block-buttons { float: none !important; clear: none !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } .wp-block-group:has(> h2.animated-contact) > .fa-contact-form { float: none !important; clear: none !important; margin: 1.5rem auto 0 !important; } } /* === Fluent Advance: Fix oversized gap between team image and "Share a few details" text (DESKTOP ONLY, mobile untouched) === */ @media (min-width: 782px) { figure.wp-block-image.has-custom-border + p.has-theme-5-color { margin-top: 20px !important; } } } } /* === Fluent Advance: Business English Training Packages - full width desktop layout === */ @media (min-width: 782px) { .wp-container-core-group-is-layout-197240e9 { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: clamp(24px, 5vw, 64px) !important; padding-right: clamp(24px, 5vw, 64px) !important; box-sizing: border-box !important; } .wp-container-core-group-is-layout-197240e9 .alignwide { max-width: 1300px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .wp-container-core-columns-is-layout-f2cc9303 { gap: 40px !important; } .wp-container-core-columns-is-layout-f2cc9303 > .wp-block-column { display: flex !important; flex-direction: column !important; } .wp-container-core-columns-is-layout-f2cc9303 > .wp-block-column > .wp-block-group { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .wp-container-core-columns-is-layout-f2cc9303 .wp-block-buttons { margin-top: auto !important; padding-top: 20px !important; } } /* === FIX: Stay Informed -> Footer seam (added 2026-08-05) === */ /* 1. WordPress wraps inline