/* ===================================================================== Trading Time — Mobile header / navigation fix --------------------------------------------------------------------- The Odoo export compiled all `xl:` utilities as `@media (min-width:10px)` (i.e. always-on) instead of the intended desktop breakpoint. As a result the hamburger (`xl:hidden`) stayed permanently hidden and the desktop nav (`xl:flex`) stayed permanently expanded, squeezed into the mobile header. The toggle JS already exists (it flips the `.hidden` class on `.js-mobile-nav`); this stylesheet only restores the correct mobile presentation below the desktop breakpoint (1280px, matching the `t:` utilities used by the existing markup). Loaded LAST in so it wins source order; `!important` is required to override the always-on `xl:` utilities. ===================================================================== */ /* ===================================================================== Root font-size floor (the cause of the "everything is tiny" problem) --------------------------------------------------------------------- The theme shrinks the whole layout below 1280px via html { font-size: calc((14 / 1280) * 100vw) } which at 390px collapses the rem base to ~4.3px, so every rem-based size renders at ~30%. We keep that fluid scaling for tablets but put a readable floor under it so phone text stays legible. Because the layout now reflows to a single column (xl: utilities re-scoped to desktop, js/mobile-adapt.js clearing fixed widths), the larger base no longer forces horizontal overflow. ===================================================================== */ @media (max-width: 1280px) { html { font-size: max(10.5px, calc((14 / 1280) * 100vw)) !important; } /* Never let an image push the page wider than the screen */ #wrapwrap img { max-width: 100% !important; height: auto !important; } /* Containment: the readable root size makes the theme's fixed rem widths (cards, text columns, tab panels) exceed the viewport. Cap the layout containers to their parent so nothing forces a horizontal scroll. Intended horizontal carousels keep their own overflow-x scroller. */ #wrapwrap [class*="col-lg"], #wrapwrap .custom-box, #wrapwrap .section-inside, #wrapwrap .container, #wrapwrap p, #wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap ul { max-width: 100% !important; } /* Safety net for any stray fixed-width descendant we did not target */ #wrapwrap { overflow-x: hidden !important; } /* Tabs: only the active pane should render. The export lost the Bootstrap `.tab-pane{display:none}` rule, so every robot pane stacked & overlapped and pushed the page wide. Show one at a time (JS toggles `.active`). */ .s_tabs_content > .tab-pane { display: none !important; } .s_tabs_content > .tab-pane.active { display: block !important; } /* Tab buttons -> horizontal scroll instead of overflowing the row */ .s_tabs .nav-pills { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .s_tabs .nav-pills .nav-item, .s_tabs .nav-pills .nav-link { flex: 0 0 auto !important; white-space: nowrap !important; } /* Robot cards: stack the two cards vertically and full-width, like the v3.1 mobile version (which adds `t:flex-col` to this row). The inline desktop widths are cleared by js/mobile-adapt.js; we keep each card's height so the background-image composition stays intact. */ /* The desktop layout constrains the tabs section to a short fixed height (cards were side-by-side); the now-stacked cards are far taller, so let the whole chain grow to fit its content instead of clipping. */ .s_tabs, .s_tabs > .container, .s_tabs .s_tabs_main, .s_tabs_content, .s_tabs_content .tab-pane, .s_tabs_content .custom-wrap-row { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* Stack the two cards: description on top, stats below (the markup lists the stats card first, so reverse). */ .s_tabs_content .custom-wrap-row { display: flex !important; flex-direction: column-reverse !important; align-items: stretch !important; width: 100% !important; } .s_tabs_content .custom-wrap-row > .custom-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: top center !important; height: auto !important; position: relative !important; } /* Stats card (first in markup -> shown at the bottom): tall portrait image fills it at its 736:1264 aspect (height from aspect-ratio; the inline desktop height is cleared by js/mobile-adapt.js). */ .s_tabs_content .custom-wrap-row > .custom-box:first-child { aspect-ratio: 736 / 1264 !important; margin-top: 16px !important; margin-bottom: 3.25rem !important; /* room for the caption below */ } /* Description card (last in markup -> shown on top): 736:816 aspect. */ .s_tabs_content .custom-wrap-row > .custom-box:last-child { aspect-ratio: 736 / 816 !important; } /* The "Мониторинг … MyFxBook" caption sits just below the stats card. */ .s_tabs_content .custom-box:first-child [data-name="Text container"] { position: absolute !important; top: 100% !important; left: 0 !important; width: 100% !important; padding: 8px 0 0 !important; text-align: center !important; } .s_tabs_content .custom-box:first-child [data-name="Text container"] p { color: #6b7280 !important; } /* Per-pane mobile images: stats (1-N), description (2-N) */ #nav_tabs_content_1741866387403_20 .custom-box:first-child { background-image: url("../web/image/1-2.jpg") !important; } #nav_tabs_content_1741866387403_20 .custom-box:last-child { background-image: url("../web/image/2-1.jpg") !important; } #nav_tabs_content_1741866387403_21 .custom-box:first-child { background-image: url("../web/image/1.3.jpg") !important; } #nav_tabs_content_1741866387403_21 .custom-box:last-child { background-image: url("../web/image/2-2.jpg") !important; } #nav_tabs_content_1741866387403_22 .custom-box:first-child { background-image: url("../web/image/1-4.jpg") !important; } #nav_tabs_content_1741866387403_22 .custom-box:last-child { background-image: url("../web/image/2-4.png") !important; } /* Trim the oversized desktop section padding so the robot block isn't wrapped in empty space on mobile. The theme's `.ptNNN` spacing classes use `#wrapwrap:not(.legacy-site) .ptNNN`, so we must match specificity. */ #wrapwrap:not(.legacy-site) .s_tabs { padding-top: 2.5rem !important; padding-bottom: 1rem !important; } #wrapwrap:not(.legacy-site) .s_click_scrolling { padding-top: 2.5rem !important; } } @media (max-width: 1280px) { /* ---- Hamburger button (was xl:hidden -> always hidden) ------------- */ .header .js-mobile-menu-button { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; padding: 9px; margin-left: auto; background: transparent; border: 0; cursor: pointer; position: relative; z-index: 320; } .header .js-mobile-menu-button span { display: block; width: 26px; height: 2px; background: #010000; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; } /* Hamburger -> X while the menu is open */ .js-mobile-nav:not(.hidden) ~ .js-mobile-menu-button span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .js-mobile-nav:not(.hidden) ~ .js-mobile-menu-button span:nth-child(2) { opacity: 0; } .js-mobile-nav:not(.hidden) ~ .js-mobile-menu-button span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Keep the header bar above the open overlay so the X stays tappable */ .header { position: relative; z-index: 300; background: #fff; } /* ---- Collapsed nav (was xl:flex -> always shown) ------------------- */ .js-mobile-nav.hidden { display: none !important; } /* ---- Open nav: full-width white drop-down panel ------------------- */ .js-mobile-nav:not(.hidden) { display: flex !important; flex-direction: column !important; align-items: stretch !important; position: fixed !important; top: 5.14286rem !important; /* header height */ left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 20px 24px 40px !important; background: #ffffff !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 250 !important; } /* Inner containers -> stack full width */ .js-mobile-nav:not(.hidden) > div, .js-mobile-nav:not(.hidden) .header__nav, .js-mobile-nav:not(.hidden) .header__list, .js-mobile-nav:not(.hidden) .header__auth_container, .js-mobile-nav:not(.hidden) .language-custom-position { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; height: auto !important; margin: 0 !important; flex-grow: 0 !important; } .js-mobile-nav:not(.hidden) .header__nav { border: 0 !important; padding-bottom: 8px !important; margin-bottom: 8px !important; } /* Menu links -> comfortable tap targets with separators */ .js-mobile-nav:not(.hidden) .header__item { width: 100% !important; height: auto !important; margin: 0 !important; border-bottom: 1px solid #eee !important; } .js-mobile-nav:not(.hidden) .header__item .language__link, .js-mobile-nav:not(.hidden) .header__item .header__button { width: 100% !important; padding: 15px 2px !important; } .js-mobile-nav:not(.hidden) .header__button_text { font-size: 1.15rem !important; line-height: 1.3 !important; } /* Single-language site: the language switcher is an empty dropdown whose `t:min-h-screen` injects a tall blank spacer in the menu. Hide it. */ .js-mobile-nav:not(.hidden) .auth__language_container { display: none !important; } /* Buttons block: force column + full width all the way down to the CTA (ancestors carry always-on xl:flex-row / xl:w-40 that otherwise collapse the button into a tiny circle in the corner). */ .js-mobile-nav:not(.hidden) .header__auth_container, .js-mobile-nav:not(.hidden) [data-name="Buttons Container"] { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; } .js-mobile-nav:not(.hidden) [data-name="Buttons Container"] > div { width: 100% !important; margin: 0 !important; } /* The empty
spacer ("order-last") block */ .js-mobile-nav:not(.hidden) [data-name="Buttons Container"] > .order-last { display: none !important; } /* "Получить" CTA -> prominent full-width pill below the links */ .js-mobile-nav:not(.hidden) .btn-custom__register { display: inline-flex !important; width: 100% !important; max-width: none !important; height: 3.42857rem !important; padding: 0 24px !important; margin: 18px 0 0 !important; background-color: var(--tt-accent, #0071e3) !important; border-radius: 32px !important; font-size: 1.07143rem !important; } } /* ===================================================================== Body layout below the desktop breakpoint (works together with js/mobile-adapt.js, which clears the inline desktop widths so these rules can take effect). ===================================================================== */ @media (max-width: 1279px) { /* Feature / step cards -> one comfortable card per row. The `.icons-wrap.xl\:icons-wrap__N .icons-wrap__item` rules are class-keyed (not media-gated) and force desktop column widths at every size, so we must match their specificity to win below 1280px. */ .icons-wrap { flex-direction: column !important; align-items: stretch !important; } .icons-wrap.xl\:icons-wrap__two .icons-wrap__item, .icons-wrap.xl\:icons-wrap__three .icons-wrap__item, .icons-wrap.xl\:icons-wrap__four .icons-wrap__item, .icons-wrap.xl\:icons-wrap__five .icons-wrap__item, .icons-wrap.xl\:icons-wrap__six .icons-wrap__item { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 1.25rem !important; } .icons-wrap .icons-wrap__item:last-child { margin-bottom: 0 !important; } /* Primary CTAs -> full-width pills */ .center-mob .btn-custom, .btn-container .btn-custom:not(.btn-custom__register):not(.cookies__popup-close) { width: 100% !important; max-width: 24.2857rem !important; } /* Left-align content like the v3.1 mobile version. `t:text-center` is always-on in this export and centred every heading / card; the real mobile is left-aligned. */ #wrapwrap .t\:text-center { text-align: left !important; } .icons-wrap__item, .icons-wrap__item [data-name="Image container"], .icons-wrap__item [data-name="Text container"] { text-align: left !important; } /* Feature / step cards: drop the fixed desktop height so they hug their content instead of leaving a tall empty gap above the text. */ .icons-wrap__item { height: auto !important; min-height: 0 !important; padding-top: 1.85rem !important; padding-bottom: 1.85rem !important; padding-right: 1.85rem !important; } .icons-wrap__item [data-name="Image container"] { padding-bottom: 1rem !important; } }