/* ============================================================ Brand theme variables — moved here from inline block. Edit these to rebrand the whole site. ============================================================ */ :root { --theme-color-accent: #0958c6; --theme-color-secondary: #2bb765; --theme-color-style4: #1f2841; --theme-body-bg: #090f1e; --theme-body-color: #ffffff; --theme-a-color: #0958c6; --theme-section-bg: #141b2e; --theme-section-border-color: #0958c6; --theme-buttons-accent-bg: #0958c6; --theme-buttons-accent-bg-hover: #1d6cda; --theme-buttons-secondary-bg: #2bb765; --theme-buttons-secondary-bg-hover:#49d583; --theme-buttons-secondary-color: #ffffff; --theme-buttons-style3-bg: #2bb765; --theme-buttons-style3-bg-hover: #49d583; --theme-buttons-outline-border: #2bb765; --theme-buttons-outline-color: #ffffff; --theme-buttons-outline-bg-hover: rgba(43, 183, 101, 0.12); --theme-header-bg: #090f1e; --theme-color-border-header: #090f1e; --theme-footer-bg: #141b2e; --theme-footer-hr-color: #9297a3; } html { background-color: var(--theme-body-bg); } /* ============================================================ Tabler Icons — sizing tweaks to match the original FA Light look. Used in menu, sub-menu, buttons. ============================================================ */ .ti { font-size: 1.05em; line-height: 1; vertical-align: -0.15em; } .header .menu .ti { font-size: 16px; } .header .sub-menu .ti { font-size: 18px; } /* ============================================================ Responsive fixes — loaded AFTER style.css to override. Breakpoints: <= 1199 desktop-small, <= 991 tablet, <= 767 mobile-large, <= 480 mobile ============================================================ */ /* --- Global safety net --- */ *, *::before, *::after { box-sizing: border-box; } /* Keep overflow-x:hidden only on body (NOT html) — html overflow-x:hidden silently disables position:sticky on descendants in all browsers. */ html { max-width: 100%; } body { max-width: 100%; overflow-x: hidden; } /* Bottom bonus panel — vars previously inline in . Override per brand. */ .bottom_panel { --bottom_panel_bg: #fff; --bottom_panel_border: var(--theme-color-accent); --bottom_panel_text: #000; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } img, video, svg, iframe { max-width: 100%; height: auto; } /* CTA buttons: original CSS targets the `button` element. We use , so anchors inherit only `.btn` base styles (inline-flex, min-width: 180px, height: 45px). No more overrides — all CTAs render at the same natural width. */ .bottom_panel a.btn { min-width: auto; } /* Desktop header (>= 992px): symmetric top/bottom padding, force vertical centering of logo and buttons. On mobile we leave the original WP layout alone (burger button + stacked grid handled by style.css). */ @media (min-width: 992px) { header.header { padding-top: 20px !important; padding-bottom: 20px !important; } header.header .header__container { align-items: center; } header.header .logo, header.header .buttons_container, header.header .buttons_container .buttons { display: flex; align-items: center; } header.header .buttons_container .buttons { gap: 12px; } header.header .logo .custom-logo-link { display: inline-flex; align-items: center; } } /* Desktop wrap top offset: 110px header + 20px breathing. Mobile keeps the original WP value from style.css (smaller mobile header). */ @media (min-width: 992px) { .wrap { padding-top: 130px !important; } } /* ============================================================ Floating left side-nav (sticky). Replaces the old top header menu + right sidebar. On mobile it's hidden — the burger drawer in the header carries the same items. ============================================================ */ .content-grid { display: grid !important; grid-template-columns: 260px minmax(0, 1fr) !important; gap: 30px !important; align-items: start; } .side-nav { position: sticky; top: 126px; align-self: start; padding: 16px; margin-bottom: var(--theme-margin-section); background-color: var(--theme-section-bg); border-radius: var(--theme-rounded-section, 16px); max-height: calc(100vh - 142px); overflow-y: auto; } .side-nav__menu > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .side-nav__menu > ul > li { position: relative; } .side-nav__menu li > a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--theme-body-color); border-radius: var(--theme-rounded-button, 8px); transition: background-color .15s, color .15s; } .side-nav__menu li > a:hover { color: var(--theme-color-style3, #fff); background-color: var(--theme-color-secondary); } .side-nav__menu li > a .ti { flex: 0 0 20px; font-size: 18px; text-align: center; } .side-nav__toggle { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--theme-body-color); cursor: pointer; border-radius: var(--theme-rounded-button, 8px); transition: transform .2s, background-color .15s; } .side-nav__toggle:hover { background-color: rgba(255, 255, 255, 0.06); } .side-nav .has-children.is-open > .side-nav__toggle { transform: rotate(180deg); } .side-nav__submenu { list-style: none; display: none; flex-direction: column; gap: 4px; margin: 4px 0 0 32px !important; padding: 0; } .side-nav .has-children.is-open > .side-nav__submenu { display: flex; } .side-nav__submenu li > a { padding: 8px 14px; font-size: 14px; } /* Mobile: hide left side-nav (burger drawer in header carries the same items) */ @media (max-width: 991px) { .content-grid { display: block !important; grid-template-columns: none !important; } .side-nav { display: none; } } /* Tables — wrap in scroll container if too wide */ table { max-width: 100%; } .wp-block-table, .scroll-x, main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Headings shouldn't blow up on small screens */ h1 { word-wrap: break-word; overflow-wrap: break-word; } h2, h3, h4 { word-wrap: break-word; overflow-wrap: break-word; } /* Long URLs / inline code shouldn't overflow */ a, p, li, span { word-wrap: break-word; overflow-wrap: break-word; } /* Note: .wrap already has top padding for the fixed header — don't add another. */ /* ============================================================ <= 1199px — small desktops / large tablets ============================================================ */ @media (max-width: 1199px) { .container { padding-left: 16px; padding-right: 16px; } } /* ============================================================ <= 991px — tablets: hide desktop menu, show burger ============================================================ */ @media (max-width: 991px) { /* Mobile menu look-and-feel is handled by style.css (original WP design): - .mobile_menu_button is a blue square at top-right - .mobile_menu_button.active animates to an X - .mobile_menu_container.show is shown - .arrow.show / .sub-menu.show toggle submenus Original jQuery in main.js wires it up. We only sync ARIA in responsive.js. */ .header .desktop_menu_container, .header .primary_menu_desktop_ver { display: none !important; } /* Welcome / hero collapse */ .welcome-section { grid-template-columns: 1fr !important; grid-gap: 20px !important; } .welcome-section .image { order: -1; } /* Media blocks (override INLINE styles too) */ .media_block_v2, .media_block_v2.left, .media_block_v2.top, div[class*="media_block"][style*="grid-template-columns"] { grid-template-columns: 1fr !important; grid-template-areas: "media" "title" "content" !important; row-gap: 16px; } .media_block_v2 .media, .media_block_v2 .title, .media_block_v2 .content { grid-area: unset; } /* Footer collapses to column */ .footer .footer__container { flex-direction: column; gap: 24px; } .footer .footer__container .column1 { flex-direction: column; gap: 24px; } .footer .footer__container .column2 { align-items: flex-start; } } /* ============================================================ <= 767px — mobile large ============================================================ */ @media (max-width: 767px) { body { font-size: 15px; } h1 { font-size: 28px; line-height: 1.2; } h2 { font-size: 24px; line-height: 1.25; } h3 { font-size: 20px; line-height: 1.3; } .container { padding-left: 14px; padding-right: 14px; } /* Buttons: full width and stacked */ .welcome-section__buttons, .buttons_container .buttons { flex-direction: column; width: 100%; } .welcome-section__buttons .btn, .welcome-section .btn { width: 100%; } /* Top header buttons compact */ .header .buttons .btn { padding: 8px 12px; font-size: 13px; } .header .logo { max-width: 120px; } .header .logo img { max-height: 36px; } /* App store double-buttons in hero */ .welcome-section .apps_buttons { grid-template-columns: 1fr !important; } /* Apps section big buttons / payments — wrap */ .apps_big_buttons, .payments { flex-wrap: wrap !important; gap: 10px !important; } /* Footer columns inside column1 */ .footer .footer__container .column1 .nav_column:nth-child(2) ul { grid-template-columns: 1fr !important; } } /* ============================================================ <= 480px — small phones ============================================================ */ @media (max-width: 480px) { h1 { font-size: 24px; } h2 { font-size: 20px; } .container { padding-left: 12px; padding-right: 12px; } .welcome-section { padding: 18px !important; } .welcome-section .description { font-size: 14px !important; } /* TOC items smaller */ .lwptoc { font-size: 14px; } /* FAQ / accordion content readable */ main p, main li { font-size: 15px; line-height: 1.55; } } /* Burger button + drawer visuals come from style.css (matches WP original). No overrides needed here. */ /* Trust badges row — centered horizontally */ footer.footer .footer__container2 .logos_police { justify-content: center; gap: 20px; } footer.footer .footer__container2 .logos_police .item { max-width: none; } footer.footer .footer__container2 .logos_police img { height: 20px; width: auto; max-width: 100%; object-fit: contain; opacity: 0.5; } /* Footer HR lines — match FAQ divider color */ footer.footer .footer__container, footer.footer .footer__container2 { border-bottom-color: var(--theme-color-style4) !important; }