/* public-v1: Forexero public marketing design system, Direction A, warm paper. ------------------------------------------------------------------------ SCOPE LAW. Every rule in this file lives under html[data-fx-public="v1"]. Nothing here targets a bare tag, a shared class or an id outside that attribute. A page opts in by adding the attribute to ; a page that has not opted in is byte for byte unaffected, which is what makes it safe to ship this file to all 24 include pages before any page is migrated. Same discipline the copier app proved with .md-shell. BEHAVIOUR LAW. Presentation only. Every class and id that main.js or nav-v2.js queries is styled, never renamed, never removed: main.js header.nav .nav-cta .auth-loggedout .auth-loggedin .auth-avatar .auth-avatar-letter [data-auth-email] [data-auth-avatar] [data-auth-plan] [data-auth-logout] auth-ready scrolled nav-v2.js .fxnav-inner .fxnav-trigger .fxnav-burger .fxmega .fxmega-backdrop .fxmega-section .fxmega-viewport .fxmm .fxmm-close .fxmm-parent .fxmm-auth-loggedin .fxmm-auth-loggedout [data-acc-panel] [data-nav-item] [data-app-link] is-open is-active is-current is-closing fxmm-lock fx-light NAMING LAW. This file must never introduce #mobileMenu, .nav-toggle, .mm-links or .mm-close. Those hooks are absent from current markup, so the matching main.js handlers are inert. Reintroducing the names would revive them and run two mobile menu controllers at once. */ html[data-fx-public="v1"] { --p-bg:#FFFFFF; --p-surface:hsl(45,18%,96%); --p-surface-2:hsl(40,10%,94%); --p-border:hsl(45,5%,85%); --p-hair:hsl(45,5%,90%); --p-fg:hsl(0,0%,7%); --p-fg-2:hsl(0,0%,32%); --p-muted:hsl(0,0%,45%); --p-ink:hsl(0,0%,5%); --p-ink-surface:hsl(0,0%,7%); --p-ink-border:hsl(0,0%,13%); --p-ink-fg:hsl(0,0%,98%); --p-ink-muted:hsl(0,0%,52%); --p-primary:hsl(240,6%,10%); --p-primary-fg:hsl(0,0%,98%); --p-success:hsl(150,40%,32%); --p-negative:hsl(0,64%,44%); --p-font:'Hedvig Letters Sans',Georgia,serif; --p-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --p-maxw:1180px; } html[data-fx-public="v1"], html[data-fx-public="v1"] body { background:var(--p-bg); color:var(--p-fg); } html[data-fx-public="v1"] body { font-family:var(--p-font); font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; } html[data-fx-public="v1"] *, html[data-fx-public="v1"] *::before, html[data-fx-public="v1"] *::after { box-sizing:border-box; } html[data-fx-public="v1"] h1, html[data-fx-public="v1"] h2, html[data-fx-public="v1"] h3, html[data-fx-public="v1"] h4 { font-family:var(--p-font); font-weight:400; letter-spacing:-.015em; line-height:1.1; } html[data-fx-public="v1"] .num, html[data-fx-public="v1"] .fx-mono { font-family:var(--p-mono); font-variant-numeric:tabular-nums; } html[data-fx-public="v1"] ::selection { background:var(--p-surface-2); color:var(--p-fg); } /* ---- LEGACY TOKEN REMAP ------------------------------------------------ style.css declares its dark tokens on :root. Inside an opted in page we redeclare the same names on html[data-fx-public="v1"], which is the same element at higher specificity, so every existing rule AND every inline style:var(--slate-400) in page markup resolves to a warm paper value with no page edits. Pages that have not opted in keep the :root values exactly. This is also how Plus Jakarta Sans and JetBrains Mono die page by page: an opted in page silently switches to Hedvig and the system mono stack. */ html[data-fx-public="v1"] { --navy-900:var(--p-bg); --navy-800:var(--p-surface); --navy-700:var(--p-surface); --navy-600:var(--p-surface-2); --line:var(--p-border); --cyan:var(--p-fg); --cyan-dim:var(--p-fg-2); --green:var(--p-success); --red:var(--p-negative); --amber:var(--p-fg-2); --white:var(--p-fg); --slate-200:var(--p-fg); --slate-300:var(--p-fg-2); --slate-400:var(--p-fg-2); --slate-500:var(--p-muted); --radius:0px; --display:var(--p-font); --body:var(--p-font); --mono:var(--p-mono); --maxw:var(--p-maxw); } /* ---- LEGACY COMPONENT CORRECTIONS ------------------------------------- The remap fixes colour. These few rules fix the shape laws that a token cannot express: weight cap, square corners, no gradients, no shadows. */ html[data-fx-public="v1"] h1, html[data-fx-public="v1"] h2, html[data-fx-public="v1"] h3, html[data-fx-public="v1"] h4 { font-weight:400; letter-spacing:-.015em; } html[data-fx-public="v1"] .page-hero { background:none; border-bottom:1px solid var(--p-border); padding:88px 0 48px; } html[data-fx-public="v1"] .page-hero .eyebrow, html[data-fx-public="v1"] .eyebrow { color:var(--p-muted); font-family:var(--p-mono); letter-spacing:.16em; } html[data-fx-public="v1"] .lead { color:var(--p-fg-2); font-size:17px; } html[data-fx-public="v1"] .card { border-radius:0; box-shadow:none; background:var(--p-surface); border:1px solid var(--p-border); } html[data-fx-public="v1"] .band { background:var(--p-surface); border-top:1px solid var(--p-border); border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .btn { border-radius:0; box-shadow:none; font-weight:400; } html[data-fx-public="v1"] .btn-primary { background:var(--p-primary); color:var(--p-primary-fg); border-color:var(--p-primary); } html[data-fx-public="v1"] .btn-primary:hover { background:var(--p-fg); transform:none; } html[data-fx-public="v1"] .btn-ghost { border-color:var(--p-border); color:var(--p-fg); } html[data-fx-public="v1"] .btn-ghost:hover { border-color:var(--p-fg); color:var(--p-fg); } html[data-fx-public="v1"] .logo { font-weight:400; } @media (max-width:860px){ html[data-fx-public="v1"] .page-hero { padding:44px 0 30px; } html[data-fx-public="v1"] .grid-2 { grid-template-columns:1fr; } html[data-fx-public="v1"] .wrap { padding:0 18px; } } @media (max-width:400px){ html[data-fx-public="v1"] .wrap { padding:0 14px; } } /* ---- Header surface. Structure belongs to nav-v2, skin belongs here. ---- */ html[data-fx-public="v1"] header.nav { background:var(--p-bg); border-bottom:1px solid var(--p-border); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; } html[data-fx-public="v1"] header.nav.scrolled { background:var(--p-bg); box-shadow:none; } html[data-fx-public="v1"] .fxnav-inner { max-width:var(--p-maxw); margin:0 auto; padding:0 28px; min-height:60px; } html[data-fx-public="v1"] .fxnav-trigger, html[data-fx-public="v1"] .fxnav-inner a { color:var(--p-fg-2); font-size:14px; } html[data-fx-public="v1"] .fxnav-trigger:hover, html[data-fx-public="v1"] .fxnav-inner a:hover { color:var(--p-fg); } html[data-fx-public="v1"] .fxnav-trigger.is-active, html[data-fx-public="v1"] .fxnav-trigger.is-current { color:var(--p-fg); } html[data-fx-public="v1"] .fxnav-burger { color:var(--p-fg); border:1px solid var(--p-border); background:transparent; min-width:44px; min-height:44px; border-radius:0; } /* ---- Mega panel ---- */ html[data-fx-public="v1"] .fxmega { background:var(--p-bg); border:1px solid var(--p-border); border-radius:0; box-shadow:none; } html[data-fx-public="v1"] .fxmega-backdrop { background:rgba(0,0,0,.18); backdrop-filter:none; } html[data-fx-public="v1"] .fxmega-col { border-color:var(--p-hair); } html[data-fx-public="v1"] .fxmega-eyebrow { font-family:var(--p-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--p-muted); } html[data-fx-public="v1"] .fxmega-item-title { color:var(--p-fg); font-weight:400; } html[data-fx-public="v1"] .fxmega-item-desc { color:var(--p-muted); font-size:13px; } html[data-fx-public="v1"] .fxmega-item:hover { background:var(--p-surface); } html[data-fx-public="v1"] .fxbadge { font-family:var(--p-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-fg); background:transparent; border:1px solid var(--p-border); border-radius:0; padding:1px 6px; font-style:normal; } /* ---- Auth cluster. Selectors are main.js property, values are ours. ---- */ html[data-fx-public="v1"] .nav-cta { opacity:0; } html[data-fx-public="v1"] .nav-cta.auth-ready { opacity:1; transition:opacity .12s ease; } html[data-fx-public="v1"] .auth-loggedout[data-state="out"], html[data-fx-public="v1"] .auth-loggedin[data-state="in"] { display:flex; align-items:center; gap:16px; } html[data-fx-public="v1"] .auth-avatar { width:30px; height:30px; border:1px solid var(--p-border); background:var(--p-surface); border-radius:0; color:var(--p-fg); font-size:13px; } html[data-fx-public="v1"] .auth-avatar-letter { font-family:var(--p-font); font-weight:400; } html[data-fx-public="v1"] [data-auth-email] { font-size:13px; color:var(--p-fg); } html[data-fx-public="v1"] [data-auth-plan] { font-family:var(--p-mono); font-size:11px; color:var(--p-muted); } html[data-fx-public="v1"] .auth-menu, html[data-fx-public="v1"] .am-items { background:var(--p-bg); border:1px solid var(--p-border); border-radius:0; box-shadow:none; } html[data-fx-public="v1"] .am-chip { font-family:var(--p-mono); font-size:11px; border:1px solid var(--p-border); border-radius:0; color:var(--p-muted); } /* ---- Buttons ---- */ html[data-fx-public="v1"] .fxcta, html[data-fx-public="v1"] .btn, html[data-fx-public="v1"] .fxmm-cta { font-family:var(--p-font); font-weight:400; font-size:14px; padding:9px 18px; border:1px solid var(--p-border); background:transparent; color:var(--p-fg); border-radius:0; box-shadow:none; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } html[data-fx-public="v1"] .fxcta, html[data-fx-public="v1"] .btn-primary { background:var(--p-primary); color:var(--p-primary-fg); border-color:var(--p-primary); } /* ---- Mobile menu. nav-v2 owns open and close, we own the look. ---- */ html[data-fx-public="v1"] .fxmm { background:var(--p-bg); color:var(--p-fg); } html[data-fx-public="v1"] .fxmm-head { border-bottom:1px solid var(--p-border); padding:14px 18px; } html[data-fx-public="v1"] .fxmm-close { color:var(--p-fg); border:1px solid var(--p-border); border-radius:0; min-width:44px; min-height:44px; } html[data-fx-public="v1"] .fxmm-parent, html[data-fx-public="v1"] .fxmm-direct, html[data-fx-public="v1"] .fxmm-child { border-bottom:1px solid var(--p-border); color:var(--p-fg); font-size:16px; min-height:44px; padding:14px 18px; background:transparent; } html[data-fx-public="v1"] .fxmm-child-title { color:var(--p-fg); font-weight:400; } html[data-fx-public="v1"] .fxmm-child-desc { font-family:var(--p-mono); font-size:11px; color:var(--p-muted); } html[data-fx-public="v1"] .fxmm-children { background:var(--p-surface); } html[data-fx-public="v1"] .fxmm-foot { border-top:1px solid var(--p-border); padding:16px 18px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px; } html[data-fx-public="v1"] .fxmm-foot .fxcta, html[data-fx-public="v1"] .fxmm-foot .btn { width:100%; } /* ---- Footer ---- */ html[data-fx-public="v1"] .fxft { background:var(--p-bg); border-top:1px solid var(--p-border); max-width:var(--p-maxw); margin:0 auto; padding:52px 28px 36px; color:var(--p-fg-2); } html[data-fx-public="v1"] .fxft-top { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:26px; padding-bottom:30px; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .fxft-brand img { max-width:150px; height:auto; } html[data-fx-public="v1"] .fxft-tag { color:var(--p-muted); font-size:13px; max-width:34ch; } html[data-fx-public="v1"] .fxft-col h4 { font-family:var(--p-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--p-muted); margin:0 0 12px; } html[data-fx-public="v1"] .fxft-col a, html[data-fx-public="v1"] .fxft-tg { display:block; padding:5px 0; color:var(--p-fg-2); font-size:13.5px; } html[data-fx-public="v1"] .fxft-col a:hover { color:var(--p-fg); } html[data-fx-public="v1"] .fxft-legal { padding:22px 0 0; font-size:12.5px; color:var(--p-muted); max-width:88ch; } html[data-fx-public="v1"] .fxft-legal strong { color:var(--p-fg-2); font-weight:400; } html[data-fx-public="v1"] .fxft-bottom { margin-top:18px; padding-top:18px; border-top:1px solid var(--p-border); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:12.5px; } /* ---- Telegram fab, restyled without touching main.js ---- */ html[data-fx-public="v1"] #fx-tg-fab { background:var(--p-primary); border-radius:0; box-shadow:none; } html[data-fx-public="v1"] #fx-tg-fab:hover { background:var(--p-fg); box-shadow:none; transform:none; } /* ---- Width discipline, 320 to 430 ---- */ @media (max-width:860px){ html[data-fx-public="v1"] .fxnav-inner { padding:0 18px; } html[data-fx-public="v1"] .fxft { padding:40px 18px 30px; } html[data-fx-public="v1"] .fxft-top { grid-template-columns:1fr 1fr; gap:20px; } html[data-fx-public="v1"] .fxft-bottom { flex-direction:column; gap:8px; } } @media (max-width:400px){ html[data-fx-public="v1"] .fxnav-inner { padding:0 14px; } html[data-fx-public="v1"] .fxft { padding:34px 14px 26px; } html[data-fx-public="v1"] .fxft-top { grid-template-columns:1fr; } } html[data-fx-public="v1"] img, html[data-fx-public="v1"] svg { max-width:100%; height:auto; } html[data-fx-public="v1"] .fxmega-col, html[data-fx-public="v1"] .fxft-col, html[data-fx-public="v1"] .fxft-brand { min-width:0; } /* ======================================================================== ABOUT-V6. Replaces every earlier about layer. Six sections only. All rules scoped to html[data-fx-public="v1"], all values from --p-*. ======================================================================== */ html[data-fx-public="v1"] .p-wrap { max-width:var(--p-maxw); margin:0 auto; padding:0 40px; } html[data-fx-public="v1"] .p-kicker { font-family:var(--p-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--p-muted); margin:0 0 20px; } html[data-fx-public="v1"] .p-h2 { font-size:clamp(1.7rem,2.9vw,2.4rem); line-height:1.14; letter-spacing:-.026em; font-weight:400; margin:0; color:var(--p-fg); } /* Buttons and links */ html[data-fx-public="v1"] .p-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 26px; background:var(--p-primary); color:var(--p-primary-fg); border:1px solid var(--p-primary); font-family:var(--p-font); font-size:1rem; border-radius:0; } html[data-fx-public="v1"] .p-btn:hover { background:var(--p-fg); } html[data-fx-public="v1"] .p-btn-2 { background:transparent; color:var(--p-fg); border-color:var(--p-border); } html[data-fx-public="v1"] .p-btn-2:hover { background:transparent; border-color:var(--p-fg); } html[data-fx-public="v1"] .p-tlink { font-size:1rem; color:var(--p-fg); border-bottom:1px solid var(--p-fg); padding-bottom:3px; } html[data-fx-public="v1"] .p-tlink:hover { color:var(--p-muted); border-bottom-color:var(--p-muted); } html[data-fx-public="v1"] .p-acts { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:32px; } /* ---- HEADER on this page only ---------------------------------------- nav-v2.js defaults every page to the overlay surface, which hides the ink lockup and shows the white one. On warm paper that made the logo vanish. The page now sets data-nav-theme="solid", which is the opt-in nav-v2.js itself documents, and these rules are the belt and braces for the moment before that script runs. Nothing here renames a hook or touches the JS. */ html[data-fx-public="v1"] header.nav .fxnav-logo img.fxnav-logo-ink, html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-logo img.fxnav-logo-ink { display:block; } html[data-fx-public="v1"] header.nav .fxnav-logo img.fxnav-logo-white, html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-logo img.fxnav-logo-white { display:none; } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-trigger, html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-direct { color:var(--p-fg-2); } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-trigger:hover, html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-direct:hover { color:var(--p-fg); } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-trigger svg, html[data-fx-public="v1"] header.nav .fxnav-trigger svg { color:var(--p-fg-2); fill:currentColor; } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-actions .fxnav-login.btn { color:var(--p-fg); } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-actions .fxnav-login.btn:hover { background:var(--p-surface); color:var(--p-fg); } html[data-fx-public="v1"] header.nav.fx-overlay-top .auth-avatar { color:var(--p-fg); } html[data-fx-public="v1"] header.nav.fx-overlay-top .fxnav-burger span { background:var(--p-fg); } /* Desktop header height, stated explicitly on this page rather than inherited. Scoped to min-width 1024px, the same breakpoint nav-v2.css uses, so the 64px mobile header below 1024px is left exactly as it is. */ @media (min-width:1024px){ html[data-fx-public="v1"] header.nav { height:72px; } html[data-fx-public="v1"] header.nav .fxnav-inner { height:72px; min-height:72px; } } /* ---- HERO. Photograph plate with the copy panel overlapping its edge. --- */ /* style.css declares section{padding:96px 0} and header.nav is position:fixed. The hero and the strip never reset that, which produced the white band under the header and a strip far taller than it should be. main clears the fixed header exactly, then the first two sections carry no inherited padding. */ html[data-fx-public="v1"] main.p-about { margin:0; padding:72px 0 0; } html[data-fx-public="v1"] main.p-about > section:first-child { margin-top:0; padding-top:0; } html[data-fx-public="v1"] .p-hero { position:relative; margin:0; padding:0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-hero-grid { display:grid; grid-template-columns:62% 38%; align-items:center; min-height:600px; } html[data-fx-public="v1"] .p-hero-plate { position:relative; align-self:stretch; background:var(--p-surface); } html[data-fx-public="v1"] .p-hero-plate img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 50%; display:block; } html[data-fx-public="v1"] .p-hero-panel { position:relative; z-index:2; margin-left:-100px; background:var(--p-bg); border:1px solid var(--p-border); padding:52px 52px 56px 64px; min-width:0; } html[data-fx-public="v1"] .p-hero-panel h1 { font-size:clamp(1.9rem,2.5vw,2.5rem); line-height:1.12; letter-spacing:-.028em; font-weight:400; margin:0; max-width:17ch; color:var(--p-fg); } html[data-fx-public="v1"] .p-hero-panel p { font-size:1rem; line-height:1.72; color:var(--p-fg-2); margin:20px 0 0; max-width:46ch; } html[data-fx-public="v1"] .p-hero-mobile { display:none; } /* ---- ACHIEVEMENT STRIP. Compact, four equal cells. ---- */ html[data-fx-public="v1"] .p-ach { margin:0; padding:0; border-bottom:1px solid var(--p-border); background:var(--p-surface); } html[data-fx-public="v1"] .p-achrow { display:grid; grid-template-columns:repeat(4,1fr); } html[data-fx-public="v1"] .p-achcell { padding:26px 22px 26px 0; border-right:1px solid var(--p-border); min-width:0; } html[data-fx-public="v1"] .p-achcell:last-child { border-right:0; } html[data-fx-public="v1"] .p-achcell b { display:block; font-weight:400; font-size:1.55rem; line-height:1.1; letter-spacing:-.024em; color:var(--p-fg); font-variant-numeric:tabular-nums; margin-bottom:6px; } html[data-fx-public="v1"] .p-achcell span { font-size:.88rem; line-height:1.45; color:var(--p-muted); display:block; } /* ---- WHY. Balanced split, heading left, body right. ---- */ html[data-fx-public="v1"] .p-why { padding:96px 0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-whygrid { display:block; } html[data-fx-public="v1"] .p-whygrid .p-h2 { max-width:22ch; margin:0 auto 34px; text-align:center; } html[data-fx-public="v1"] .p-whybody { max-width:70ch; margin:0 auto; } html[data-fx-public="v1"] .p-whybody p { font-size:1.0625rem; line-height:1.78; color:var(--p-fg-2); margin:0 0 1.3em; } html[data-fx-public="v1"] .p-whybody p:last-child { margin-bottom:0; } /* ---- FOUR REASONS. Two by two, hairline divisions, not cards. ---- */ html[data-fx-public="v1"] .p-reasons { padding:96px 0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-reasons .p-h2 { max-width:24ch; margin:0 auto 44px; text-align:center; } html[data-fx-public="v1"] .p-rgrid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--p-fg); } html[data-fx-public="v1"] .p-r { padding:32px 44px 34px 0; border-right:1px solid var(--p-border); border-bottom:1px solid var(--p-border); min-width:0; } html[data-fx-public="v1"] .p-r:nth-child(2n) { border-right:0; padding-right:0; padding-left:44px; text-align:right; } html[data-fx-public="v1"] .p-r:nth-child(2n) p { margin-left:auto; } html[data-fx-public="v1"] .p-r:nth-last-child(-n+2) { border-bottom:0; } html[data-fx-public="v1"] .p-r h3 { font-size:1.2rem; line-height:1.28; letter-spacing:-.016em; font-weight:400; margin:0 0 10px; color:var(--p-fg); } html[data-fx-public="v1"] .p-r p { font-size:1rem; line-height:1.7; color:var(--p-fg-2); margin:0; max-width:44ch; } /* ---- TWO PRODUCTS. Fifty fifty, right side mirrored. ---- */ html[data-fx-public="v1"] .p-prods { padding:96px 0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-prods .p-h2 { max-width:24ch; margin:0 auto 44px; text-align:center; } /* ---- MILESTONES. Horizontal on desktop. ---- */ html[data-fx-public="v1"] .p-mile { padding:96px 0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-mile .p-h2 { max-width:24ch; margin:0 auto 40px; text-align:center; } html[data-fx-public="v1"] .p-mgrid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--p-fg); } html[data-fx-public="v1"] .p-m { padding:24px 22px 0 0; border-right:1px solid var(--p-border); min-width:0; } html[data-fx-public="v1"] .p-m:last-child { border-right:0; } html[data-fx-public="v1"] .p-m b { display:block; font-family:var(--p-mono); font-size:13px; letter-spacing:.1em; color:var(--p-fg); font-variant-numeric:tabular-nums; font-weight:400; margin-bottom:12px; } html[data-fx-public="v1"] .p-m p { font-size:.97rem; line-height:1.65; color:var(--p-fg-2); margin:0; } /* ---- FINAL CTA. Centred. ---- */ html[data-fx-public="v1"] .p-cta-sec { padding:96px 0 104px; text-align:center; } html[data-fx-public="v1"] .p-cta-sec .p-h2 { max-width:20ch; margin:0 auto 18px; } html[data-fx-public="v1"] .p-cta-sec p { font-size:1.0625rem; line-height:1.72; color:var(--p-fg-2); margin:0 auto; max-width:54ch; } html[data-fx-public="v1"] .p-cta-sec .p-acts { justify-content:center; } html[data-fx-public="v1"] .p-cta-sec .p-fine { margin:26px auto 0; font-size:.86rem; color:var(--p-muted); max-width:56ch; } /* ---- FOOTER on this page only --------------------------------------- footer-v2.css paints the outer element #050506 and ships the white lockup. Both are overridden here for the full browser width, and the genuine ink lockup is swapped in as a background so the shared markup and its alt text stay untouched. */ html[data-fx-public="v1"] footer[data-include="footer"] { background:var(--p-bg); border-top:1px solid var(--p-fg); } html[data-fx-public="v1"] .fxft { color:var(--p-fg-2); } /* The previous selector was .fxft-brand a, which also matched the Free Telegram link sitting in the same block, so the wordmark was painted behind it. Both rules are now pinned to the brand anchor by its aria-label. */ html[data-fx-public="v1"] .fxft-brand > a[aria-label="Forexero home"] { display:inline-block; height:30px; width:100px; background:url("/images/brand/forexero-lockup-horizontal-ink.svg") no-repeat left center; background-size:contain; } html[data-fx-public="v1"] .fxft-brand > a[aria-label="Forexero home"] img { opacity:0; height:30px; } html[data-fx-public="v1"] .fxft-tag { color:var(--p-muted); } html[data-fx-public="v1"] .fxft-tg { background:transparent; color:var(--p-fg); border:1px solid var(--p-border); border-radius:0; font-weight:400; } html[data-fx-public="v1"] .fxft-tg:hover { background:var(--p-surface); } html[data-fx-public="v1"] .fxft-col h4 { color:var(--p-muted); } html[data-fx-public="v1"] .fxft-col a { color:var(--p-fg-2); } html[data-fx-public="v1"] .fxft-col a:hover { color:var(--p-fg); } html[data-fx-public="v1"] .fxft-legal { border-top:1px solid var(--p-border); color:var(--p-muted); } html[data-fx-public="v1"] .fxft-legal strong { color:var(--p-fg-2); } html[data-fx-public="v1"] .fxft-bottom { color:var(--p-muted); } html[data-fx-public="v1"] .fxft-bottom a:hover { color:var(--p-fg); } @media (max-width:900px){ html[data-fx-public="v1"] .p-wrap { padding:0 24px; } html[data-fx-public="v1"] .p-hero-grid { grid-template-columns:minmax(0,1fr); min-height:0; } html[data-fx-public="v1"] .p-hero-plate { display:none; } html[data-fx-public="v1"] .p-hero-mobile { display:block; } html[data-fx-public="v1"] .p-hero-mobile img { display:block; width:100%; height:auto; } html[data-fx-public="v1"] .p-hero-panel { margin-left:0; border:0; border-top:1px solid var(--p-border); padding:32px 24px 38px; } html[data-fx-public="v1"] .p-achrow { grid-template-columns:1fr 1fr; } html[data-fx-public="v1"] .p-achcell { padding:18px 16px 18px 0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-achcell:nth-child(2n) { border-right:0; } html[data-fx-public="v1"] .p-achcell:nth-last-child(-n+2) { border-bottom:0; } html[data-fx-public="v1"] .p-why, html[data-fx-public="v1"] .p-reasons, html[data-fx-public="v1"] .p-prods, html[data-fx-public="v1"] .p-mile { padding:52px 0; } html[data-fx-public="v1"] .p-cta-sec { padding:52px 0 60px; } html[data-fx-public="v1"] .p-whygrid { grid-template-columns:minmax(0,1fr); gap:22px; } html[data-fx-public="v1"] .p-rgrid, html[data-fx-public="v1"] .p-pgrid, html[data-fx-public="v1"] .p-mgrid { grid-template-columns:minmax(0,1fr); } html[data-fx-public="v1"] .p-r, html[data-fx-public="v1"] .p-r:nth-child(2n) { padding:24px 0 26px; border-right:0; text-align:left; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-r:nth-child(2n) p { margin-left:0; } html[data-fx-public="v1"] .p-r:last-child { border-bottom:0; } html[data-fx-public="v1"] .p-m { padding:20px 0 22px; border-right:0; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-m:last-child { border-bottom:0; } html[data-fx-public="v1"] .p-acts .p-btn { width:100%; } } @media (max-width:400px){ html[data-fx-public="v1"] .p-wrap { padding:0 18px; } html[data-fx-public="v1"] .p-hero-panel { padding:26px 18px 32px; } html[data-fx-public="v1"] .p-achrow { grid-template-columns:minmax(0,1fr); } html[data-fx-public="v1"] .p-achcell { border-right:0; padding:16px 0 18px; } } /* ---- PLATFORM GRID. Two by two, hairline divisions, mirrors the reasons grid so the two 2x2 blocks share one rhythm. ---- */ html[data-fx-public="v1"] .p-pgrid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--p-fg); } html[data-fx-public="v1"] .p-p { padding:32px 44px 34px 0; border-right:1px solid var(--p-border); border-bottom:1px solid var(--p-border); min-width:0; } html[data-fx-public="v1"] .p-p:nth-child(2n) { border-right:0; padding-right:0; padding-left:44px; text-align:right; } html[data-fx-public="v1"] .p-p:nth-child(2n) p { margin-left:auto; } html[data-fx-public="v1"] .p-p:nth-last-child(-n+2) { border-bottom:0; } html[data-fx-public="v1"] .p-p h3 { font-size:1.2rem; line-height:1.28; letter-spacing:-.016em; font-weight:400; margin:0 0 10px; color:var(--p-fg); } html[data-fx-public="v1"] .p-p p { font-size:1rem; line-height:1.7; color:var(--p-fg-2); margin:0 0 18px; max-width:44ch; } /* ---- TRUSTPILOT. The widget renders in its own iframe, so the only job here is spacing and containment. Nothing inside is restyled. ---- */ html[data-fx-public="v1"] .p-tp-hero { margin-top:24px; width:100%; max-width:320px; } html[data-fx-public="v1"] .p-tp-sec { padding:56px 0; border-bottom:1px solid var(--p-border); text-align:center; } html[data-fx-public="v1"] .p-tp-sec .trustpilot-widget { max-width:680px; margin:0 auto; } html[data-fx-public="v1"] .trustpilot-widget iframe { max-width:100%; } /* ---- REVEAL. Armed by a head script only when motion is allowed and an IntersectionObserver exists, so with JavaScript off or reduced motion on, every element is simply visible and nothing is ever hidden. ---- */ html[data-fx-public="v1"][data-reveal-on] [data-reveal] { opacity:0; transform:translateY(14px); transition:opacity 800ms cubic-bezier(.22,.61,.36,1), transform 800ms cubic-bezier(.22,.61,.36,1); } html[data-fx-public="v1"][data-reveal-on] [data-reveal="in"] { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html[data-fx-public="v1"] [data-reveal], html[data-fx-public="v1"] [data-reveal="in"] { opacity:1 !important; transform:none !important; transition:none !important; } } @media (max-width:1023px){ html[data-fx-public="v1"] main.p-about { padding-top:64px; } } @media (max-width:900px){ html[data-fx-public="v1"] .p-whygrid .p-h2 { margin-bottom:20px; } html[data-fx-public="v1"] .p-p, html[data-fx-public="v1"] .p-p:nth-child(2n) { padding:24px 0 26px; border-right:0; text-align:left; border-bottom:1px solid var(--p-border); } html[data-fx-public="v1"] .p-p:nth-child(2n) p { margin-left:0; } html[data-fx-public="v1"] .p-p:last-child { border-bottom:0; } html[data-fx-public="v1"] .p-tp-sec { padding:36px 0; } html[data-fx-public="v1"] .p-tp-hero { max-width:100%; } }