, not an iframe, so a blanket iframe rule cannot touch it. */ iframe.skiptranslate, iframe.goog-te-banner-frame, .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate{ display:none!important;visibility:hidden!important; height:0!important;width:0!important;border:0!important; position:absolute!important;top:-9999px!important} /* the hover tooltip and the balloon */ #goog-gt-tt,.goog-te-balloon-frame,.goog-tooltip{display:none!important} /* the banner also sets an inline top offset on */ body, html.translated-ltr body, html.translated-rtl body{top:0!important} /* Google wraps translated runs in with its own colours */ font[style]{background:none!important;box-shadow:none!important;color:inherit!important} /* ── switching language ── */ .fx-switching{position:fixed;inset:0;z-index:99800;display:grid;place-items:center; background:rgba(8,10,15,.86);backdrop-filter:blur(4px); opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .fx-switching.is-on{opacity:1;visibility:visible} .fx-switching span{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--mut)} .fx-switching i{width:16px;height:16px;border-radius:50%;display:block; border:2px solid rgba(255,193,7,.25);border-top-color:var(--ac); animation:fx-spin2 .7s linear infinite} @keyframes fx-spin2{to{transform:rotate(360deg)}} /* ── the search pill, moved up into the notice rail ── */ .fx-rright .fx-srch{display:inline-flex;align-items:center;gap:7px;height:26px; padding:0 9px 0 8px;border-radius:8px; color:var(--faint);border:1px solid var(--line);background:rgba(255,255,255,.03); font-family:var(--body);font-size:11.6px;transition:.18s} .fx-rright .fx-srch:hover{color:var(--ink);border-color:var(--line2); background:rgba(255,255,255,.06)} .fx-rright .fx-srch svg{flex:none;opacity:.85} .fx-rright .fx-srch kbd{font-family:var(--mono);font-size:9.4px;padding:2px 5px; border-radius:4px;color:var(--faint);background:rgba(255,255,255,.05); border:1px solid var(--line);line-height:1} @media(max-width:860px){ .fx-rright .fx-srch span, .fx-rright .fx-srch kbd{display:none} .fx-rright .fx-srch{padding:0 7px} } /* ── the promo row is a phone-width problem ── It carries white-space:nowrap so the messages rotate cleanly, which on a 375px screen pushes the page 9px wider than the viewport and gives the whole site a horizontal scroll. The row is promotional, the messages rotate, and letting them wrap would make the header jump height on every change — so below the tablet breakpoint it simply goes. */ @media(max-width:760px){ .fx-prow{display:none} } /* ── 3. the button keeps its colour ── A plugin stylesheet was flattening the gradient, the same way one was overriding the heading colour elsewhere. Gradients live in background-image, so setting that explicitly survives a plain background or background-color declared later by somebody else. */ .fx-bar .fx-cta, a.fx-cta{ background-color:var(--ac) !important; background-image:linear-gradient(135deg,var(--ac),var(--ac2)) !important; color:#140F00 !important; border:0 !important; text-shadow:none !important; } .fx-bar .fx-cta:hover, a.fx-cta:hover{ background-image:linear-gradient(135deg,var(--ac2),var(--ac)) !important; color:#140F00 !important; } /* ── the home icon at the head of the menu ── */ .fx-nav>li.fx-home>a{display:inline-flex;align-items:center;justify-content:center; width:36px;padding:0;color:var(--mut)} .fx-nav>li.fx-home>a svg{width:17px;height:17px;fill:none;stroke:currentColor; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .fx-nav>li.fx-home>a:hover{color:var(--ac)} .fx-nav>li.fx-home.is-here>a{color:var(--ac)} /* ── the language panel ────────────────────────────────── Not a modal: changing one setting should not hide the site somebody came to read. Not a narrow dropdown either — twenty-two languages in a single scrolling column means never seeing your own script without hunting for it. Three columns fit them all at once, in a panel that drops from the button. */ .fx-langwrap{position:relative} .fx-langbtn{display:inline-flex;align-items:center;gap:8px;padding:5px 9px;border-radius:8px; font-size:11.6px;color:var(--faint);border:1px solid transparent;transition:.18s} .fx-langbtn:hover,.fx-langbtn[aria-expanded="true"]{color:var(--ink); border-color:var(--line);background:rgba(255,255,255,.04)} .fx-langbtn .fx-cv{width:11px;height:11px;opacity:.7;transition:transform .22s} .fx-langbtn[aria-expanded="true"] .fx-cv{transform:rotate(180deg)} .fx-lflag{flex:none;width:19px;height:13px;border-radius:2.5px; box-shadow:0 0 0 1px rgba(255,255,255,.16)} .fx-langdrop{position:absolute;top:calc(100% + 10px);right:0;z-index:120;width:min(560px,92vw); border-radius:16px;overflow:hidden;border:1px solid var(--line2); background:linear-gradient(158deg,#141922,#0B0F16); box-shadow:0 34px 74px -34px #000, 0 0 0 1px rgba(255,193,7,.08); opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .2s,transform .2s} .fx-langdrop.is-open{opacity:1;transform:none;pointer-events:auto} .fx-langdrop[hidden]{display:block} /* animated, not switched off */ .fx-lhead{padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.22)} .fx-lhead b{display:block;font-family:var(--display);font-size:14px;font-weight:600; letter-spacing:-.018em;color:var(--ink)} .fx-lhead span{display:block;margin-top:3px;font-size:11.4px;color:var(--faint)} .fx-lcols{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:10px} .fx-lrow{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px; border:1px solid transparent;transition:.15s} .fx-lrow:hover{background:rgba(255,255,255,.045)} .fx-lrow.is-here{background:rgba(255,193,7,.09);border-color:rgba(255,193,7,.3)} .fx-lname{flex:1;min-width:0;font-size:12.8px;color:var(--mut);line-height:1.3; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-lrow:hover .fx-lname{color:var(--ink)} .fx-lrow.is-here .fx-lname{color:var(--ac);font-weight:600} @media(max-width:720px){ .fx-langdrop{width:min(400px,94vw)} .fx-lcols{grid-template-columns:repeat(2,1fr)} } @media(max-width:420px){ .fx-langdrop{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--rail) + 6px)} .fx-lcols{grid-template-columns:1fr;max-height:60vh;overflow-y:auto} } @media(prefers-reduced-motion:reduce){ .fx-langdrop{transition:none} } /* ── the drawer, on a phone ─────────────────────────────── Everything else it needs is in style.css: the scrim, the panel, the branches, the buttons. All that was missing was the button that opens it — the bar hides below 1180 and nothing put the burger back. */ @media(max-width:1180px){ .fx-burger{display:block} } /* The bar carries seven top items and a Features megamenu now, so the base spacing is tighter than it was drawn for five. Every step below gives up the least useful pixel first — the gap between links, then their padding, then the label on the search — so the links survive as far down as possible before anything has to be hidden. */ .fx-bar{gap:13px} .fx-nav{gap:1px} .fx-nav>li>.fx-top,.fx-nav>li>a{padding:0 10px;font-size:13.8px;letter-spacing:-.008em} .fx-cta{padding:11px 17px} .fx-ghost{padding:9px 12px} /* one line under each mega-menu link, always — a description that wraps makes its row taller than its neighbours, and a column of uneven rows reads as untidy even when nobody can say why */ .fx-mega .fx-d{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Nothing may make the page wider than the screen. One overflowing element — a wide table, a long unbroken address, an absolutely positioned glow — turns the whole document into a horizontal scroller. On a phone that shifts the viewport sideways, and a fixed drawer pinned to the right edge goes with it: it looks squashed against the side of the screen with half of it out of view. The two rules below are the fix, and they belong on both elements — html alone leaves body free to overflow, and body alone leaves html scrolling. */ /* While the drawer is open the page behind it holds still. Without this, scrolling inside the drawer scrolls the page underneath once the list runs out, and closing it leaves the reader somewhere they did not choose to be. */ body.fx-drawer{overflow:hidden} /* ── the animated wordmark ── Inline SVG, so it takes the theme's colours through currentColor and the variables rather than needing a second file for a light background. The charge runs the bolt and the reading steps down beside the date, both on a six second loop: a header logo is seen on every page, and anything that performs at speed wears through by the third one. */ .fx-mark{width:168px;height:auto;display:block;flex:none;color:var(--ink);overflow:visible} .fx-mark-w{font-family:var(--display);font-size:44px;font-weight:800; letter-spacing:-1px;fill:currentColor} .fx-mark-bolt{fill:var(--ac);animation:fxMarkSteady 6s ease-in-out infinite} .fx-mark-spark{stroke:var(--ac2);stroke-width:3; stroke-dasharray:20 260;stroke-dashoffset:260; animation:fxMarkRun 6s cubic-bezier(.5,0,.5,1) infinite} .fx-mark-rule{stroke:var(--ac);stroke-width:1.6} .fx-mark-since{font-family:var(--display);font-size:11px;font-weight:700; letter-spacing:1.6px;fill:var(--ac)} .fx-mark-ms text{font-family:var(--mono);font-size:10px;font-weight:700;fill:var(--ok)} @keyframes fxMarkSteady{0%,100%{opacity:.92}50%{opacity:1}} @keyframes fxMarkRun{ 0%{stroke-dashoffset:260;opacity:1} 20%{stroke-dashoffset:0;opacity:1} 26%,100%{stroke-dashoffset:0;opacity:0}} .fx-mark-ms .d1{animation:fxMs1 6s steps(1) infinite} .fx-mark-ms .d2{opacity:0;animation:fxMs2 6s steps(1) infinite} .fx-mark-ms .d3{opacity:0;animation:fxMs3 6s steps(1) infinite} @keyframes fxMs1{0%,26%{opacity:1}27%,100%{opacity:0}} @keyframes fxMs2{0%,26%{opacity:0}27%,52%{opacity:1}53%,100%{opacity:0}} @keyframes fxMs3{0%,52%{opacity:0}53%,100%{opacity:1}} /* at phone header size the strapline is about five pixels tall and reads as a smudge, so below the breakpoint the mark keeps the wordmark alone */ @media(max-width:600px){ .fx-mark{width:126px} .fx-mark-since,.fx-mark-rule,.fx-mark-ms{display:none} } @media(prefers-reduced-motion:reduce){ .fx-mark-bolt{animation:none;opacity:1} .fx-mark-spark{display:none} .fx-mark-ms .d1,.fx-mark-ms .d2{display:none} .fx-mark-ms .d3{opacity:1;animation:none} } /* ── the translate widget, properly out of the way ── Moving it off-screen hid it from sight but left its links focusable, so a keyboard user tabbed into a control they could not see. visibility:hidden removes it from the tab order and the accessibility tree at once, which is what aria-hidden was reaching for and getting wrong. */ .fx-gte-host{visibility:hidden!important;pointer-events:none!important} /* The promo row sits on a lighter panel than the page, so the accent gold that passes everywhere else drops under 4.5:1 here. The brighter of the two golds clears it without changing what the row looks like. */ .fx-prow b{color:var(--ac2)} /* The language list writes each name in its own script — Русский, Tiếng Việt — which makes the browser fetch the cyrillic and vietnamese cuts of every weight: ten files and about 300KB the English page never displays. The system font draws those alphabets perfectly well, and the list is small enough that the change of typeface goes unnoticed. */ .fx-langwrap, .fx-langwrap *{font-family:system-ui,-apple-system,"Segoe UI",sans-serif} /* ── Client area ── Green already means "running" on this site: the ready-now tags, the support dot, the uptime figures. Using it here says "your machines are live" rather than "buy something", which is the difference between this and the gold button beside it — and it leaves that button the loudest thing in the bar, which matters while first-time orders are the open question. */ .fx-ghost{display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:10px; font-size:13.2px;font-weight:600;color:var(--ok); border:1px solid rgba(52,224,161,.35);background:rgba(52,224,161,.1); transition:background .16s,border-color .16s,color .16s} .fx-ghost:hover{color:var(--ok);background:rgba(52,224,161,.18); border-color:rgba(52,224,161,.55)} @media(max-width:1100px){.fx-ghost{padding:8px 12px}} /* The round avatar is what sits in the corner of every dashboard a trader uses, so it is recognised before the words are read. Kept in the green of the button rather than gold, so it stays one object rather than two. */ .fx-ghost{padding-left:6px;border-radius:999px} .ca-disc{width:26px;height:26px;border-radius:50%;flex:none; display:inline-flex;align-items:center;justify-content:center; background:rgba(52,224,161,.16);border:1px solid rgba(52,224,161,.34)} .ca-disc svg{width:13px;height:13px;stroke:var(--ok);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} /* ── the bar, widened ── The rest of the site sits in --wrap; the header takes 140px more so the eighth menu fits without the items touching. Only the bar moves — going further would leave the logo further left than the heading beneath it. */ .fx-hdr .fx-wrap{max-width:1320px} /* the nav collapses to a burger below 1180; with more items it needs to collapse a little later, or they crowd on a 1200px laptop */ @media(max-width:1260px){.fx-nav{display:none}} /* ── the bar, widened for the eighth menu ── The rest of the site sits in --wrap; the header takes 140px more so eight items fit without touching. Only the bar moves — going further would leave the logo further left than the heading beneath it. */ .fx-hdr .fx-wrap{max-width:1320px} /* the nav folds into a burger a little later now that it carries more */ @media(max-width:1260px){.fx-nav{display:none}} /* ── the bar, widened for the eighth menu ── The rest of the site sits at 1280; the header takes 180 more so eight items and two buttons fit without touching. Only the bar moves — widening the sections below is a larger change and worth doing on its own. */ .fx-hdr .fx-wrap{max-width:1460px} /* with more items the nav needs to fold into the burger a little later */ @media(max-width:1380px){.fx-nav{display:none}} /* ── the page-scoped wrap must not reach the header ── platform.css and brokerpage.css both scope .fx-wrap under a body class (.fx-pfpage / .fx-bppage) to hold their sections at 1140. Two classes beat .fx-hdr .fx-wrap on specificity, so the header was being pulled in to 1140 too and the logo ended up against the menu. The body class here restores the header's own width without touching the sections below it. */ body.fx-pfpage .fx-hdr .fx-wrap, body.fx-bppage .fx-hdr .fx-wrap{max-width:1460px} /* ── mega.css ── */ /* FxSVPS mega menu — full-width panels, icons, flags */ .fx-mega{position:absolute;left:0;right:0;top:100%; background:linear-gradient(180deg,#0E121A 0%,var(--bg2) 100%); border-top:1px solid var(--line);border-bottom:1px solid var(--line); box-shadow:0 50px 90px -40px rgba(0,0,0,.9); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s,transform .26s cubic-bezier(.4,0,.2,1),visibility .2s} .fx-nav>li.is-open .fx-mega{opacity:1;visibility:visible;transform:none} .fx-mega-in{padding:22px 0 18px} .fx-mintro{font-size:13.5px;color:var(--faint);margin:0 0 22px} .fx-mintro b{color:var(--mut);font-weight:500} /* Four link columns and a promo need less gap than three did, and every column has to be allowed to be narrow — minmax(0,1fr) alone is not enough once the text inside refuses to shrink. */ .fx-cols{display:grid;column-gap:24px;row-gap:0;align-items:start; grid-template-columns:repeat(3,minmax(0,1fr)) 320px} .fx-cols.is-four{column-gap:16px;row-gap:0;grid-template-columns:repeat(4,minmax(0,1fr)) 280px} .fx-ctitle{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--faint);margin:0 0 14px} .fx-mlist{list-style:none;margin:0;padding:0;display:grid;gap:1px} .fx-mlist a{display:flex;align-items:flex-start;gap:11px;padding:8px 9px;border-radius:10px; min-width:0;transition:background .16s} .fx-mlist a:hover{background:rgba(255,255,255,.045)} .fx-ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.18s} .fx-ic svg{width:17px;height:17px;stroke:var(--mut);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s} .fx-mlist a:hover .fx-ic{background:rgba(255,193,7,.1);border-color:rgba(255,193,7,.3)} .fx-mlist a:hover .fx-ic svg{stroke:var(--ac)} /* The text column must be allowed to be narrower than its content, or a long description pushes past the column and lands on top of the next one. min-width:0 is what lets a flex child shrink at all. */ .fx-txt{min-width:0;flex:1} .fx-txt .fx-t{display:flex;align-items:center;gap:7px;font-size:13.6px;font-weight:600; color:var(--ink);line-height:1.3} .fx-txt .fx-d{display:block;font-size:11.8px;color:var(--faint);margin-top:2px; line-height:1.42} .fx-new{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:2px 6px;border-radius:5px;background:rgba(255,193,7,.15);color:var(--ac); border:1px solid rgba(255,193,7,.3)} /* cities */ .fx-city{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:6px 10px;border-radius:8px;font-size:13.5px;transition:background .15s} .fx-city:hover{background:rgba(255,255,255,.045)} .fx-city em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--faint); font-variant-numeric:tabular-nums} .fx-city:hover em{color:var(--ac)} .fx-city.is-fast em{color:var(--ok)} .fx-city .fx-fl{width:19px;height:13.3px;flex:none;border-radius:2.5px;overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.13);opacity:.88;transition:opacity .16s} .fx-city:hover .fl{opacity:1} .fx-city .fx-nm{display:flex;align-items:center;gap:9px;min-width:0} .fx-city .fx-nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fx-city.is-more{color:var(--faint);font-size:12.5px;margin-top:4px} .fx-city.is-more:hover{color:var(--ac);background:transparent} /* promo card */ /* The promo sizes to its own content rather than stretching to the tallest column beside it — at four columns that left a card with a heading at the top, a link at the bottom, and a hole between them. */ .fx-promo{align-self:start;border-radius:14px;padding:20px;display:flex;flex-direction:column; background: radial-gradient(130% 90% at 100% 0%, rgba(255,193,7,.20), transparent 62%), linear-gradient(160deg,#1A2030,#12161F); border:1px solid var(--line2);transition:border-color .2s} .fx-promo:hover{border-color:rgba(255,193,7,.35)} .fx-promo .fx-tagline{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ac);margin:0 0 10px} .fx-promo h4{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 9px; letter-spacing:-.01em;line-height:1.25} .fx-promo p{margin:0;font-size:13px;color:var(--mut);line-height:1.6} .fx-promo .fx-go{margin-top:14px;padding-top:0;font-size:13.5px;font-weight:600;color:var(--ac); display:flex;align-items:center;gap:6px} .fx-promo .fx-go::after{content:"→";transition:transform .2s} .fx-promo:hover .go::after{transform:translateX(4px)} /* stat strip inside promo */ .fx-pstats{display:flex;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .fx-pstats div{display:grid;gap:1px} .fx-pstats b{font-family:var(--mono);font-size:16px;color:var(--ink);font-weight:600} .fx-pstats span{font-size:10.5px;color:var(--faint)} /* footer row */ .fx-mfootrow{grid-column:1/-1;display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:13px; border-top:1px solid var(--line);font-size:13.5px} .fx-mfootrow .fx-note{color:var(--faint)} .fx-mfootrow .fx-note b{color:var(--mut);font-weight:500} .fx-mfootrow .fx-lnk{color:var(--ac);font-weight:600;display:flex;align-items:center;gap:6px} .fx-mfootrow .fx-lnk::after{content:"→";transition:transform .2s} .fx-mfootrow .fx-lnk:hover::after{transform:translateX(4px)} .fx-mfootrow .fx-lnk.pushed{margin-left:auto} .fx-veil{position:fixed;inset:0;top:calc(var(--rail) + var(--bar));z-index:98700; background:rgba(4,6,10,.5);backdrop-filter:blur(2px); opacity:0;visibility:hidden;transition:.24s} .fx-veil.is-on{opacity:1;visibility:visible} body.fx-no-rail .fx-veil{top:var(--bar)} .fx-hdr.is-stuck .fx-veil{top:var(--bar)} /* the promo card is an , so its inner paragraphs need the muted colour */ .fx-promo p{margin:0 0 0} .fx-promo p + p{margin-top:8px} @media(max-width:1024px){ .fx-mega{display:none} } /* ═══════════ highlight strip ═══════════ */ /* Two link columns and a promo, not three and a hole. Add `fx-cols-2` to the top-level menu item when a panel carries a strip instead of a third column. */ .fx-cols.is-two{grid-template-columns:repeat(2,minmax(0,1fr)) 340px} /* A band across the whole panel, under the columns. The columns are a list to scan; this is the one row meant to be looked at, so it gets its own ground rather than a fourth column that reads as more of the same. */ .fx-mhi{grid-column:1/-1;margin:18px 0 0;padding:15px 18px;border-radius:14px; border:1px solid rgba(255,193,7,.2); background:linear-gradient(120deg,rgba(255,193,7,.07),transparent 62%),#0F1319} .fx-mhi-t{display:flex;align-items:baseline;gap:10px;margin:0 0 11px;flex-wrap:wrap} .fx-mhi-t b{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--ac)} .fx-mhi-t span{font-size:12.4px;color:var(--faint)} .fx-mhi-g{display:grid;gap:9px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .fx-mhi-g a{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border-radius:11px; border:1px solid var(--line);background:rgba(255,255,255,.02);min-width:0; transition:.18s cubic-bezier(.2,.8,.3,1)} .fx-mhi-g a:hover{border-color:rgba(255,193,7,.36);background:rgba(255,193,7,.05); transform:translateY(-2px)} .fx-mhi-g .fx-ic{width:30px;height:30px;background:rgba(255,193,7,.09); border-color:rgba(255,193,7,.22)} .fx-mhi-g .fx-ic svg{stroke:var(--ac)} .fx-mhi-g .fx-t{font-size:13.2px} .fx-mhi-g .fx-d{font-size:11.4px} @media(max-width:1100px){ .fx-cols.is-two{grid-template-columns:repeat(2,minmax(0,1fr))} } /* A strip carrying seven tiles is two rows once each one has a description under it, which makes the panel taller than the menu it belongs to. Compact drops the descriptions and fits them all on one line — the names carry enough on their own at this size. */ .fx-mhi.is-tight .fx-mhi-g{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:7px} .fx-mhi.is-tight .fx-mhi-g a{padding:8px 10px;gap:9px;align-items:center} .fx-mhi.is-tight .fx-ic{width:26px;height:26px;border-radius:8px} .fx-mhi.is-tight .fx-ic svg{width:14px;height:14px} .fx-mhi.is-tight .fx-t{font-size:12.4px;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;display:block} .fx-mhi.is-tight .fx-d{display:none} /* ═══════════ the copier block ═══════════ */ /* The animation is the product rather than decoration: an order ticket copying itself at three different lot sizes says what a copier does, and says the multiplier too, in the second or so a menu stays open. */ .cp{position:relative;display:block;padding:20px;border-radius:15px;overflow:hidden; background:linear-gradient(158deg,#161C26,#0D1117); border:1px solid rgba(52,224,161,.26);transition:.26s cubic-bezier(.2,.8,.3,1)} .cp:hover{border-color:rgba(52,224,161,.6);transform:translateY(-2px); box-shadow:0 26px 60px -34px rgba(52,224,161,.5)} .cp-glow{position:absolute;inset:-40%;pointer-events:none; background:conic-gradient(from 0deg,transparent 0deg,rgba(52,224,161,.14) 40deg, transparent 90deg,transparent 360deg);animation:cpTurn 9s linear infinite} @keyframes cpTurn{to{transform:rotate(360deg)}} .cp-badge{position:relative;display:inline-block;margin:0 0 14px;padding:3px 10px; border-radius:20px;font-family:var(--mono);font-size:8.8px;letter-spacing:.14em; text-transform:uppercase;color:var(--ok);background:rgba(52,224,161,.12); border:1px solid rgba(52,224,161,.34)} .cp-tix{position:relative;display:block;height:92px;margin:0 0 14px} .cp-tik{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:8px; padding:6px 10px;border-radius:9px;white-space:nowrap; background:#12171F;border:1px solid var(--line2)} .cp-tik em{font-style:normal;font-family:var(--mono);font-size:9.6px;color:var(--faint)} .cp-tik b{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:600} .cp-tik u{text-decoration:none;font-size:9px;color:var(--faint);margin-left:6px} .cp-tik.is-src{border-color:rgba(255,193,7,.5);background:rgba(255,193,7,.08)} .cp-tik.is-src b{color:var(--ac)} .cp-tik.is-c1,.cp-tik.is-c2,.cp-tik.is-c3{border-color:rgba(52,224,161,.34);opacity:0; animation:cpCopy 2.6s cubic-bezier(.2,.8,.3,1) infinite} .cp-tik.is-c1{--y:25px;animation-delay:.25s} .cp-tik.is-c2{--y:50px;animation-delay:.45s} .cp-tik.is-c3{--y:75px;animation-delay:.65s} .cp-tik.is-c1 b,.cp-tik.is-c2 b,.cp-tik.is-c3 b{color:var(--ok)} @keyframes cpCopy{ 0%{opacity:0;transform:translate(0,0) scale(.96)} 16%{opacity:1} 40%,84%{opacity:1;transform:translate(13px,var(--y)) scale(1)} 100%{opacity:0;transform:translate(13px,var(--y)) scale(1)} } .cp-body{position:relative;display:block} .cp-body>b{display:block;font-family:var(--display);font-size:16.6px;font-weight:600; color:var(--ink);letter-spacing:-.024em;line-height:1.24;margin:0 0 11px} .cp-body>b em{font-style:normal;color:var(--ok)} .cp-pair{display:grid;margin:0 0 12px;border-radius:11px;overflow:hidden; border:1px solid var(--line)} .cp-one{display:block;padding:10px 12px;background:rgba(255,255,255,.02); border-left:2px solid rgba(255,193,7,.55);transition:.2s} .cp-one.is-r{border-left-color:rgba(52,224,161,.6);border-top:1px solid var(--line)} .cp:hover .cp-one{background:rgba(255,255,255,.035)} .cp-one u{display:block;text-decoration:none;font-size:12.4px;font-weight:600; color:var(--ink);margin:0 0 2px} .cp-one>span{display:block;font-size:10.6px;color:var(--faint);line-height:1.5} .cp-go{display:inline-flex;align-items:center;gap:7px;font-size:12.4px;font-weight:700; color:var(--ok)} .cp-go i{width:7px;height:7px;border-right:2px solid var(--ok);border-top:2px solid var(--ok); transform:rotate(45deg);transition:transform .2s} .cp:hover .cp-go i{transform:rotate(45deg) translate(2px,-2px)} @media(prefers-reduced-motion:reduce){ .cp-glow{animation:none} .cp-tik.is-c1,.cp-tik.is-c2,.cp-tik.is-c3{opacity:1;animation:none; transform:translate(13px,var(--y)) scale(1)} } /* ── the copier animation, inside a promo card ── Four tickets in a fixed 96px band: the master at the top and three copies sliding out beneath it at different lot sizes. It sits above the heading and takes a set height, so the card is exactly as tall as it was plus that band — nothing reflows. */ .pa{display:block;position:relative;height:96px;margin:0 0 14px} .pa-t{position:absolute;left:0;display:flex;align-items:baseline;gap:8px; padding:6px 10px;border-radius:8px;white-space:nowrap; background:rgba(13,17,23,.86);border:1px solid var(--line2)} .pa-t em{font-style:normal;font-family:var(--mono);font-size:9.4px;color:var(--faint)} .pa-t b{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:600} .pa-t.is-src{top:0;border-color:rgba(255,193,7,.5);background:rgba(255,193,7,.1)} .pa-t.is-src b{color:var(--ac)} .pa-t.is-1,.pa-t.is-2,.pa-t.is-3{top:0;opacity:0;border-color:rgba(52,224,161,.34); animation:paCopy 2.6s cubic-bezier(.2,.8,.3,1) infinite} .pa-t.is-1 b,.pa-t.is-2 b,.pa-t.is-3 b{color:var(--ok)} .pa-t.is-1{--y:24px;animation-delay:.25s} .pa-t.is-2{--y:48px;animation-delay:.45s} .pa-t.is-3{--y:72px;animation-delay:.65s} @keyframes paCopy{ 0%{opacity:0;transform:translate(0,0)} 16%{opacity:1} 40%,84%{opacity:1;transform:translate(12px,var(--y))} 100%{opacity:0;transform:translate(12px,var(--y))} } @media(prefers-reduced-motion:reduce){ .pa-t.is-1,.pa-t.is-2,.pa-t.is-3{opacity:1;animation:none; transform:translate(12px,var(--y))} } /* ── the copier animation, inside a promo card ── Four tickets in a fixed 96px band: the master at the top and three copies sliding out beneath it at different lot sizes. It sits above the heading and takes a set height, so the card is exactly as tall as it was plus that band — nothing reflows. */ .pa{display:block;position:relative;height:96px;margin:0 0 14px} .pa-t{position:absolute;left:0;display:flex;align-items:baseline;gap:8px; padding:6px 10px;border-radius:8px;white-space:nowrap; background:rgba(13,17,23,.86);border:1px solid var(--line2)} .pa-t em{font-style:normal;font-family:var(--mono);font-size:9.4px;color:var(--faint)} .pa-t b{font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:600} .pa-t.is-src{top:0;border-color:rgba(255,193,7,.5);background:rgba(255,193,7,.1)} .pa-t.is-src b{color:var(--ac)} .pa-t.is-1,.pa-t.is-2,.pa-t.is-3{top:0;opacity:0;border-color:rgba(52,224,161,.34); animation:paCopy 2.6s cubic-bezier(.2,.8,.3,1) infinite} .pa-t.is-1 b,.pa-t.is-2 b,.pa-t.is-3 b{color:var(--ok)} .pa-t.is-1{--y:24px;animation-delay:.25s} .pa-t.is-2{--y:48px;animation-delay:.45s} .pa-t.is-3{--y:72px;animation-delay:.65s} @keyframes paCopy{ 0%{opacity:0;transform:translate(0,0)} 16%{opacity:1} 40%,84%{opacity:1;transform:translate(12px,var(--y))} 100%{opacity:0;transform:translate(12px,var(--y))} } @media(prefers-reduced-motion:reduce){ .pa-t.is-1,.pa-t.is-2,.pa-t.is-3{opacity:1;animation:none; transform:translate(12px,var(--y))} } .pa-t{display:block;position:absolute;top:0;left:0;padding:6px 8px;font-size:11px;background:#1a1a2e;border:1px solid #00d084;border-radius:4px;white-space:nowrap;opacity:0} .pa-t em{display:block;color:#666;font-style:normal;font-size:10px} .pa-t b{display:block;color:#00d084;font-weight:600;font-size:13px} .pa-t.is-src{z-index:3;animation:none} .pa-t.is-1{animation:pa-pop 0.6s ease-out 0.1s forwards} .pa-t.is-2{animation:pa-pop 0.6s ease-out 0.3s forwards} .pa-t.is-3{animation:pa-pop 0.6s ease-out 0.5s forwards} @keyframes pa-pop{0%{opacity:1;transform:translate(0,0)}80%{opacity:1}100%{opacity:0;transform:translate(calc(var(--tx)*1px),calc(var(--ty)*1px))}} .pa-t.is-1{--tx:45;--ty:-60} .pa-t.is-2{--tx:90;--ty:0} .pa-t.is-3{--tx:45;--ty:60} /* ── Two separate copier cards, no animation ── */ .cp{display:block;padding:0;border:0;background:none;overflow:visible} .cp:hover{transform:none;border-color:transparent} .cp-glow,.cp-tix,.cp-badge{display:none} .cp-body{display:block} .cp-body>b{display:none} .cp-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px;border-radius:0;overflow:visible;background:none} .cp-one{display:block;padding:14px 16px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,193,7,.45);border-left:3px solid rgba(255,193,7,.8)} .cp-one.is-r{border-color:rgba(52,224,161,.45);border-left-color:rgba(52,224,161,.8);border-top:1px solid rgba(52,224,161,.45)} .cp:hover .cp-one{background:rgba(255,255,255,.05)} .cp-one u{display:block;text-decoration:none;font-size:13px;font-weight:600;color:var(--ac);margin:0 0 6px} .cp-one.is-r u{color:var(--ok)} .cp-one>span{display:block;font-size:11px;color:var(--faint);line-height:1.5} /* ── copier cards: design pass ── */ .cp-badge{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px; font-family:var(--mono);font-size:9.4px;letter-spacing:.08em;text-transform:uppercase; color:var(--ok);background:rgba(52,224,161,.1);border:1px solid rgba(52,224,161,.4)} .cp-pair{align-items:stretch} .cp-one{display:flex;flex-direction:column;height:100%;min-height:104px} .cp-one u{font-size:13.4px;line-height:1.3;margin:0 0 8px} .cp-one>span{margin-top:auto;font-size:11px;line-height:1.55} /* ── VPS Plans tool strip: compact ── */ .fx-mhi.is-tight .fx-mhi-g{gap:8px} .fx-mhi.is-tight .fx-mhi-g a{padding:7px 9px;gap:8px} .fx-mhi.is-tight .fx-ic{width:24px;height:24px;flex:0 0 24px;border-radius:6px} .fx-mhi.is-tight .fx-ic svg{width:12px;height:12px} .fx-mhi.is-tight .fx-t{font-size:11.4px;line-height:1.3} /* a flag in the icon slot fills its box rather than sitting as a small mark */ .fx-ic.is-flag{overflow:hidden;padding:0;background:none;border-color:var(--line2)} .fx-ic.is-flag .fx-fl{width:100%;height:100%;display:block;object-fit:cover} /* The AI column sells a different kind of machine to a different buyer, so it gets its own accent rather than the gold used everywhere else. Worth keeping only if AI grows into a real line — a second colour is earned by a section that deserves to be read as separate. */ .fx-mcol.fx-ai .fx-ic{background:rgba(167,139,250,.09);border-color:rgba(167,139,250,.22)} .fx-mcol.fx-ai .fx-ic svg{stroke:#A78BFA} .fx-mcol.fx-ai a:hover .fx-ic{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.16)} /* the small mark beside a column heading */ .fx-ctitle{display:flex;align-items:center;gap:7px} .fx-cti{width:13px;height:13px;stroke:var(--ac);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;flex:none} /* The AI column sells a different machine to a different buyer, so it carries its own accent rather than the gold used everywhere else. */ .fx-mcol.is-ai .fx-cti{stroke:#A78BFA} .fx-mcol.is-ai .fx-ic{background:rgba(167,139,250,.09);border-color:rgba(167,139,250,.22)} .fx-mcol.is-ai .fx-ic svg{stroke:#A78BFA} .fx-mcol.is-ai a:hover .fx-ic{border-color:rgba(167,139,250,.5);background:rgba(167,139,250,.16)} /* ── a column that takes two ── The dedicated section carries a card and a city list rather than a plain list of links, so it needs the room of two. The panel has no promo card in this menu, so the slot that would hold one is given back to the columns. */ .fx-cols.is-four:has(.fx-mcol.is-wide){grid-template-columns:1fr 1.9fr 1fr 1fr} .fx-mcol.is-wide{grid-column:span 1} /* the card at the head of the wide column */ .fx-dcard{display:block;padding:13px 14px;border-radius:12px;text-decoration:none; color:inherit;background:linear-gradient(158deg,#171c26,#0f131a); border:1px solid var(--line2);transition:border-color .16s} .fx-dcard:hover{border-color:rgba(255,193,7,.42)} .fx-dcard b{display:block;font-size:13.4px;font-weight:700} .fx-dcard span{display:block;font-size:11px;color:var(--faint);margin-top:3px;line-height:1.45} .fx-dstat{display:flex;gap:16px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line)} .fx-dstat i{font-style:normal;display:block} .fx-dstat i b{font-family:var(--mono);font-size:14px;color:var(--ac);font-weight:700} .fx-dstat i span{font-family:var(--mono);font-size:8.2px;color:var(--faint); letter-spacing:.07em;text-transform:uppercase;margin-top:2px} /* the city rows below it */ .fx-dcap{display:block;margin:14px 0 8px;font-family:var(--mono);font-size:8.6px; letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .fx-mcol.is-wide li a .fx-d{display:none} .fx-mcol.is-wide .fx-n{margin-left:auto;font-family:var(--mono);font-size:10px; color:var(--faint)} .fx-mcol.is-wide li a:hover .fx-n{color:var(--ac)} /* ── fixes for the wide dedicated column ── The three figures were stacking because the inline element inside each one inherited display:block from the card rules above. */ .fx-dstat{display:flex;flex-direction:row;gap:20px;align-items:flex-start} .fx-dstat i{display:block;flex:0 0 auto} .fx-dstat i b{display:block;font-family:var(--mono);font-size:15px;color:var(--ac); font-weight:700;line-height:1.1} .fx-dstat i span{display:block;margin-top:3px;font-family:var(--mono);font-size:8.2px; color:var(--faint);letter-spacing:.07em;text-transform:uppercase} /* the flags were filling the whole icon box; a flag wants its own proportions */ .fx-mcol.is-wide .fx-ic.is-flag{width:22px;height:16px;border-radius:3px; align-self:center} .fx-ic.is-flag .fx-fl{width:100%;height:100%} .fx-mcol.is-wide li a{padding:5px 8px;gap:10px} .fx-mcol.is-wide li a .fx-t{font-size:12.6px} /* .fx-dcard span{display:block} sits above and is the more specific selector, so the stat row inherited block and stacked. Two classes beat a class plus an element. */ .fx-dcard .fx-dstat{display:flex;flex-direction:row;gap:20px;align-items:flex-start} .fx-dcard .fx-dstat i{display:block;flex:0 0 auto;margin:0} .fx-dcard .fx-dstat i b{display:block;font-family:var(--mono);font-size:15px; color:var(--ac);font-weight:700;line-height:1.1;margin:0} .fx-dcard .fx-dstat i span{display:block;margin-top:3px;font-family:var(--mono); font-size:8.2px;color:var(--faint);letter-spacing:.07em;text-transform:uppercase} /* The count belongs at the far edge of the row rather than under the city, so five cities read as a table of stock rather than five little paragraphs. */ .fx-mcol.is-wide li a{display:flex;align-items:center} .fx-mcol.is-wide li a .fx-txt{display:flex;align-items:center;width:100%;gap:10px} .fx-mcol.is-wide li a .fx-d{display:block;margin-left:auto;margin-top:0; font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap} .fx-mcol.is-wide li a:hover .fx-d{color:var(--ac)} /* the operating-system row */ .fx-mfootrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .fx-mfootrow .fx-note{flex:0 0 auto;margin-right:4px} .fx-ospill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px; border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line); text-decoration:none;font-size:11.8px;color:var(--mut);white-space:nowrap; transition:border-color .15s,color .15s,background .15s} .fx-ospill:hover{border-color:rgba(255,193,7,.35);color:var(--ink); background:rgba(255,193,7,.06)} .fx-osl{width:15px;height:15px;flex:none} .fx-ospill em{font-style:normal;font-family:var(--mono);font-size:9.4px;color:var(--faint)} /* two columns of cities, each with its flag and its count */ .fx-dcities{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px} .fx-dcities a{display:flex;align-items:center;gap:9px;padding:5px 8px;margin:0 -8px; border-radius:7px;text-decoration:none;color:var(--mut);font-size:12.2px; transition:background .15s,color .15s} .fx-dcities a:hover{background:rgba(255,255,255,.05);color:var(--ink)} .fx-dcities .fx-fl{width:20px;height:14px;border-radius:2.5px;flex:none; border:1px solid var(--line2)} .fx-dcities em{margin-left:auto;font-style:normal;font-family:var(--mono); font-size:10px;color:var(--faint)} .fx-dcities a:hover em{color:var(--ac)} /* ── five columns ── is-four allows four columns and a promo slot. This panel has no promo card and five columns instead, so the slot is given back and the widths are set to what each column actually holds: the copier needs the room of two, the rest are lists. */ .fx-cols.is-four{grid-template-columns:.95fr .95fr 2fr 1fr;column-gap:18px} .fx-cols.is-four > .fx-mcol:nth-child(5){grid-column:4} /* The tools strip is a band across the panel, not a column — without this it takes a column's place and pushes the last one onto a second row. */ .fx-cols > .fx-mhi{grid-column:1 / -1} /* ── the tools strip, quieter ── It was a boxed panel with its own gold border, which made a row of free extras louder than the plans above it. A plain row of pills under a hairline puts it back where it belongs: useful to find, not competing to be read. */ .fx-cols > .fx-mhi{background:none;border:0;border-top:1px solid var(--line); border-radius:0;padding:16px 0 0;margin-top:4px;box-shadow:none} .fx-mhi-t{display:flex;align-items:baseline;gap:9px;margin:0 0 11px} .fx-mhi-t b{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--ac)} .fx-mhi-t span{font-size:11.4px;color:var(--faint)} .fx-mhi.is-tight .fx-mhi-g{display:flex;flex-wrap:wrap;gap:8px;grid-template-columns:none} .fx-mhi-g > a{display:inline-flex;align-items:center;gap:7px;padding:6px 12px; border-radius:999px;background:rgba(255,255,255,.03);border:1px solid var(--line); font-size:11.6px;color:var(--mut);white-space:nowrap; transition:border-color .15s,color .15s,background .15s} .fx-mhi-g > a:hover{border-color:rgba(255,193,7,.35);color:var(--ink); background:rgba(255,193,7,.06)} /* each point on its own ticked line, price apart at the foot */ .cp-f{display:block;margin-top:10px} .cp-f i{display:flex;align-items:flex-start;gap:7px;font-style:normal; font-size:11px;color:var(--mut);line-height:1.45;margin-bottom:6px} .cp-f svg{width:11px;height:11px;flex:none;margin-top:3px;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;stroke:var(--ac)} .cp-one.is-r .cp-f svg{stroke:var(--ok)} .cp-price{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line); font-family:var(--mono);font-size:10.6px;color:var(--faint)} /* ── a light travelling the copier borders ── The same treatment the chosen plan card uses on the pricing page, so the two read as one site. The remote card runs two seconds behind: two borders lit in the same place at the same time read as one flashing object rather than two cards. */ @property --fxcp{syntax:'';inherits:false;initial-value:0deg} .cp-one{border:1px solid transparent; background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--fxcp),rgba(255,193,7,0) 0deg,rgba(255,193,7,.75) 45deg, rgba(255,215,94,.9) 75deg,rgba(255,193,7,0) 130deg,rgba(255,193,7,0) 360deg) border-box; animation:fxCpSpin 4s linear infinite} .cp-one.is-r{background:linear-gradient(var(--card),var(--card)) padding-box, conic-gradient(from var(--fxcp),rgba(52,224,161,0) 0deg,rgba(52,224,161,.75) 45deg, rgba(107,240,189,.9) 75deg,rgba(52,224,161,0) 130deg,rgba(52,224,161,0) 360deg) border-box; animation-delay:-2s} @keyframes fxCpSpin{to{--fxcp:360deg}} /* a border that never stops turning is tiring for anyone who asked it not to */ @media(prefers-reduced-motion:reduce){ .cp-one,.cp-one.is-r{animation:none;background:var(--card); border-color:rgba(255,193,7,.4)} .cp-one.is-r{border-color:rgba(52,224,161,.4)} } /* the Points note under the copier cards */ .cp-pts{display:flex;align-items:center;gap:9px;margin-top:12px;padding:9px 12px; border-radius:10px;background:rgba(255,193,7,.06);border:1px solid rgba(255,193,7,.22)} .cp-pts svg{width:15px;height:15px;flex:none;stroke:var(--ac);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .cp-pts em{font-style:normal;font-size:11.4px;color:var(--mut);line-height:1.45} .cp-pts em b{color:var(--ink);font-weight:600} .cp-pts u{margin-left:auto;flex:none;text-decoration:none;font-size:11.4px; font-weight:600;color:var(--ac);white-space:nowrap} /* the view-all row at the foot of a column */ .fx-mcol li.is-more{margin-top:7px;padding-top:9px;border-top:1px solid var(--line)} .fx-mcol li.is-more a{display:flex;align-items:center;gap:6px;padding:2px 0; font-family:var(--mono);font-size:9.4px;letter-spacing:.07em;text-transform:uppercase; color:var(--ac);text-decoration:none;transition:color .15s} .fx-mcol li.is-more a:hover{color:var(--ac2);background:none} .fx-mcol li.is-more i{font-style:normal} /* The four-column widths above were written for the plan panels, where the copier column needs the room of two. The cities panel is four equal regions and a promo card, so it keeps its own proportions. */ .fx-cols.is-four.is-cities{grid-template-columns:repeat(4,minmax(0,1fr)) 280px; column-gap:16px} /* The theme relied on three global resets that were dropped here because bare a/button rules would have reached the whole portal. Lagom's own resets then won: links turned green and the drawer's section buttons rendered as default white boxes. Re-stated for the header and the reparented drawer only. */ .fx-hdr a,.fx-drawer a,.fx-veil a,.fx-scrim a{color:inherit;text-decoration:none} .fx-hdr button,.fx-drawer button,.fx-veil button{ font:inherit;color:inherit;background:none;border:0;border-radius:0;cursor:pointer} .fx-drawer *,.fx-drawer *::before,.fx-drawer *::after{box-sizing:border-box} .fx-drawer{font-size:15px;line-height:1.6} /* Room between the header and the client area. Scoped to page-user-logged on purpose: on the signed-out marketing pages the hero is meant to sit flush under the header, and padding there would open a black band above the green. Added to Lagom's own token rather than replacing it, so the theme's spacing still leads. */ body.page-user-logged .main-body{ padding-top:calc(var(--main-body-padding-v, 24px) + 28px) } /* Profile menu. A

rather than a scripted dropdown: it opens on click, closes on Escape and is reachable by keyboard without a line of JS, and nav.js knows nothing about this element. */ .fx-acctwrap{position:relative;display:inline-block} .fx-acctwrap summary{list-style:none;display:inline-flex;align-items:center;gap:7px; padding:4px 10px;border-radius:7px;font-size:11.6px;color:var(--mut); border:1px solid var(--line);cursor:pointer;transition:.16s} .fx-acctwrap summary::-webkit-details-marker{display:none} .fx-acctwrap summary::marker{content:""} .fx-acctwrap summary:hover{color:var(--ac);border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.06)} .fx-acctwrap[open] summary{color:var(--ac);border-color:rgba(255,193,7,.4)} .fx-acctwrap[open] summary .fx-cv{transform:rotate(180deg)} .fx-acctwrap .fx-cv{width:11px;height:11px;flex:none;transition:transform .16s} .fx-ainit{display:grid;place-items:center;width:19px;height:19px;border-radius:50%; background:rgba(255,193,7,.16);color:var(--ac);font-size:10.5px;font-weight:700;flex:none} .fx-acctdrop{position:absolute;right:0;top:calc(100% + 9px);min-width:240px; background:var(--card,#12161F);border:1px solid var(--line2);border-radius:13px; padding:6px;z-index:99500;box-shadow:0 20px 54px rgba(0,0,0,.55)} .fx-acctdrop .fx-ahead{padding:9px 11px 11px;margin:0 0 5px;font-size:12.7px;font-weight:600; color:var(--ink);border-bottom:1px solid var(--line)} .fx-acctdrop a{display:flex;align-items:center;gap:10px;padding:7px 11px;border-radius:8px; font-size:12.8px;color:var(--mut);white-space:nowrap;transition:.14s} .fx-acctdrop a:hover{background:rgba(255,193,7,.07);color:var(--ac)} .fx-acctdrop a i{width:14px;text-align:center;font-size:12px;opacity:.75;flex:none} .fx-acctdrop .fx-asep{display:block;height:1px;background:var(--line);margin:5px 8px} @media(max-width:620px){.fx-acctdrop{right:-6px;min-width:214px}} /* The marketing site floats this header over its hero: position:fixed, a translucent ground, and a body rule that reserved the space underneath. That body rule was dropped here (a bare body selector would have reached the whole portal), so the portal's content slid up behind the header. Sticky is the right answer on a billing page anyway: it still follows the scroll, but it occupies its own space, so nothing can hide under it and no offset has to be kept in step with the header's height at each breakpoint. */ .fx-hdr{position:sticky;top:0} /* On a phone the rail ran to 489px inside a 375px screen, which pushed Log in and Register off the edge — unreachable, on the two controls that matter most to a signed-out visitor. The nearest-node readout is decorative, so it yields first; the language picker keeps its flag and drops its label next. */ @media(max-width:700px){ .fx-rright > .fx-led, .fx-rright > span:not([class]){display:none} } @media(max-width:480px){ .fx-langbtn #fx-lang-label{display:none} .fx-acct{margin-left:4px;gap:5px} .fx-acct a{padding:4px 8px} } /* Items lifted out of Lagom's third bar (Loyalty Points, Notifications, …) */ .fx-sitem{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px; font-size:11.6px;color:var(--mut);border:1px solid var(--line);transition:.16s} .fx-sitem:hover{color:var(--ac);border-color:rgba(255,193,7,.35);background:rgba(255,193,7,.06)} .fx-sitem i,.fx-sdrop summary i{font-size:12px;opacity:.8} .fx-sdrop .fx-acctdrop a{max-width:320px} .fx-sdrop .fx-acctdrop a i{margin-top:1px} /* The rail sets z-index:60, which makes it a stacking context: a dropdown inside it cannot rise above the bar's buttons no matter how high its own z-index goes, so "See plans" was painting over the notification panel. Lifting the rail itself is enough — it sits above the bar and never overlaps the mega panels, which open downward from below it. */ .fx-hdr .fx-rail{z-index:99900} /* Notification text is a sentence, not a menu label: let it wrap. */ .fx-sdrop .fx-acctdrop a{white-space:normal;max-width:330px;line-height:1.45; align-items:flex-start;padding-top:8px;padding-bottom:8px} .fx-sdrop .fx-acctdrop a i{margin-top:2px} /* ── client-area sidebar, brought onto the header's palette ────────── Scoped to .app-nav-secondary, which is the left menu only — the top layout uses .app-nav-default and is untouched. Lagom draws the fly-out submenu as a full-height second column (top:0;bottom:0) and paints it from its own tokens. Forcing a background and a border onto .dropdown-menu turned that column into a bordered slab with 800px of empty space under four links. So the tokens are overridden instead and Lagom paints it itself — one less rule fighting the theme, and anything else those tokens reach stays consistent. */ .app-nav-secondary{ --dropdown-bg:#0F141C; --dropdown-link-color:#A3ABBC; --dropdown-link-hover-color:#FFC107; --dropdown-link-hover-bg:rgba(255,193,7,.07); --dropdown-header-color:#8B93A3; --dropdown-divider-bg:rgba(255,255,255,.08); --dropdown-box-shadow:0 20px 54px rgba(0,0,0,.5); --nav-link-color:#A3ABBC; --nav-link-hover-color:#FFC107; --nav-link-active-color:#FFC107; background:linear-gradient(180deg,#0F141C 0%,#080B11 100%) !important; border-right:1px solid rgba(255,255,255,.07); } .app-nav-secondary .app-nav-header{background:transparent !important; border-bottom:1px solid rgba(255,255,255,.07)} /* the rail's own links; the tokens above do not reach every one of them */ .app-nav-secondary > .app-nav-menu a{color:#A3ABBC} .app-nav-secondary > .app-nav-menu li > a:hover, .app-nav-secondary > .app-nav-menu li > a:focus{ color:#FFC107;background:rgba(255,193,7,.07)} .app-nav-secondary > .app-nav-menu li.active > a{ color:#FFC107;background:rgba(255,193,7,.11)} /* Dashboard sits as a filled button at the top of the rail */ .app-nav-secondary .nav-item-btn > a, .app-nav-secondary .nav-item-btn > a.btn-primary{ background:#FFC107 !important;border-color:#FFC107 !important; color:#140F00 !important;font-weight:600 !important} .app-nav-secondary .nav-item-btn > a:hover{ background:#FFD75E !important;color:#140F00 !important} /* the fly-out is a continuation of the rail, not a card floating over it */ .app-nav-secondary .dropdown-menu{ border:0;border-left:1px solid rgba(255,255,255,.07);border-radius:0} /* The fly-out is pinned to the sidebar, which is fixed at the very top of the viewport — the same space this header occupies, so its first rows sat behind it. Start it below the header instead. --fx-hdr-h is measured by the header's own script; the fallback matches the desktop height if that never runs. */ /* Lagom pins it with .lagom-layout-left .app-nav-menu .menu > li .dropdown-menu { top:0 !important }, which outranked a shorter selector even with !important — hence the matching length here. Confined to the same breakpoint as theirs, so the mobile drawer keeps its own geometry. */ @media (min-width:992px){ .lagom .app-nav-secondary .app-nav-menu .menu > li .dropdown-menu{ top:var(--fx-hdr-h,105px) !important} } /* ── sidebar items: one line each, with a divider and a hover that moves ── The rail is 140px wide but the items were set at 17px with 16px of padding, so "Billing Section" wrapped to three lines and every row stood 56px tall. Dropping to 12.8px fits the longest label in one line with room to spare. The Dashboard button and the Open Ticket block keep their own shapes. */ .app-nav-secondary .menu-primary > li:not(.nav-item-btn):not(.is-right) > a{ display:flex;align-items:center;gap:8px;position:relative; padding:11px 14px; font-size:12.8px;line-height:1.35;font-weight:500;letter-spacing:.004em; white-space:nowrap;text-align:left; transition:color .18s ease,background .18s ease,transform .18s ease; } .app-nav-secondary .menu-primary > li:not(.nav-item-btn):not(.is-right) + li:not(.is-right){ border-top:1px solid rgba(255,255,255,.055); } /* an amber rule grows out of the left edge on hover and stays on the open item */ .app-nav-secondary .menu-primary > li:not(.nav-item-btn):not(.is-right) > a::before{ content:"";position:absolute;left:0;top:50%;width:2px;height:0; background:#FFC107;border-radius:0 2px 2px 0; transform:translateY(-50%); transition:height .2s ease; } .app-nav-secondary .menu-primary > li:not(.nav-item-btn):not(.is-right) > a:hover{ transform:translateX(2px); } .app-nav-secondary .menu-primary > li:not(.nav-item-btn):not(.is-right) > a:hover::before, .app-nav-secondary .menu-primary > li.sfHover > a::before, .app-nav-secondary .menu-primary > li.active > a::before, .app-nav-secondary .menu-primary > li.open > a::before{ height:58%; } /* nothing should slide for someone who asked the system to hold still */ @media(prefers-reduced-motion:reduce){ .app-nav-secondary .menu-primary > li > a, .app-nav-secondary .menu-primary > li > a::before{transition:none} .app-nav-secondary .menu-primary > li > a:hover{transform:none} } /* Lagom colours these links through tokens, so setting `color` directly lost to its own more specific rule. Setting the tokens lets its rule do the work — and the hover then animates through the same declaration. */ .app-nav-secondary{ --secondary-block-link-color:#A3ABBC; --secondary-block-link-hover-color:#FFC107; --app-nav-left-link-color:#A3ABBC; --app-nav-left-link-hover-color:#FFC107; } /* Lagom centres these labels (.lagom-layout-left … > a:not(.btn)); with an accent rule growing from the left edge, left-aligned reads better and the rows line up. One class deeper than its rule, so it lands. */ .lagom .app-nav-secondary .app-nav-menu .menu > li:not(.nav-item-btn):not(.is-right) > a:not(.btn){ text-align:left;justify-content:flex-start; } /* the rail icons the script inserts */ .app-nav-secondary .fx-railicon{ flex:none;width:16px;text-align:center;font-size:13.5px;line-height:1; opacity:.72;transition:opacity .18s ease,color .18s ease; } .app-nav-secondary .menu-primary > li > a:hover .fx-railicon, .app-nav-secondary .menu-primary > li.sfHover > a .fx-railicon, .app-nav-secondary .menu-primary > li.active > a .fx-railicon{opacity:1} .app-nav-secondary .nav-item-btn > a .fx-railicon{opacity:.9} /* ── the fly-out, compact to match the rail ────────────────────────── Lagom already slides it in (translateX(32px) → 0 over .32s), so the motion stays as it is; the rows were the loose part: 36px tall on 6px/24px padding at 14px while the rail next to them now runs 12.8px. */ .app-nav-secondary .dropdown-menu{min-width:206px;width:206px} .app-nav-secondary .dropdown-menu .dropdown-menu-item > a, .app-nav-secondary .dropdown-menu li > a{ padding:6px 14px !important;font-size:12.8px;line-height:1.35; display:flex;align-items:center;gap:9px; } .app-nav-secondary .dropdown-menu li > a > i, .app-nav-secondary .dropdown-menu li > a > svg{ flex:none;width:15px;text-align:center;font-size:13px;opacity:.72} .app-nav-secondary .dropdown-menu li > a:hover > i{opacity:1} .app-nav-secondary .dropdown-menu .nav-header{ padding:10px 14px 6px !important;font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;font-weight:600} .app-nav-secondary .dropdown-menu .divider, .app-nav-secondary .dropdown-menu .dropdown-divider{margin:5px 14px} /* Lagom stacks these links as a column — icon over label — which is why the rows doubled to 82px the moment icons appeared. Beside the label instead: the rail stays at one compact line per item. Specificity matches Lagom's own .lagom-layout-left rule so it actually lands. */ .lagom .app-nav-secondary .app-nav-menu .menu > li:not(.is-right) > a{ flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; text-align:left !important; gap:9px; } .lagom .app-nav-secondary .app-nav-menu .menu > li.nav-item-btn > a{ justify-content:center !important;text-align:center !important; } /* Lagom lets these links wrap (its icon-over-label design), so with an icon added the label dropped to a second row and the rows grew back to 56px. The whitespace between the icon and the label counts as a flex item too, which is what actually took the break. */ .lagom .app-nav-secondary .app-nav-menu .menu > li:not(.is-right) > a{ flex-wrap:nowrap !important; } /* .ls sets its own size, so the rail icon needs the same reach to be trimmed */ .lagom .app-nav-secondary .app-nav-menu .menu > li > a > .fx-railicon{ font-size:14px !important;width:16px !important;height:auto !important; line-height:1 !important; } .lagom .app-nav-secondary .app-nav-menu .menu > li > a > .item-text{ overflow:hidden;text-overflow:ellipsis; } /* The rows still measured 55px with a 17px label inside: superfish's arrow pseudo-element and the whitespace between the icon and the label each claim a line box. Rather than chase them, the row is given its height outright — the flex centring then places icon and label within it. */ .lagom .app-nav-secondary .app-nav-menu .menu > li:not(.is-right):not(.nav-item-btn) > a{ height:40px !important;min-height:0 !important; padding:0 12px !important;line-height:1.2 !important; } /* Lagom gives the label a 16px top margin so it clears the icon sitting above it in its own column layout. Side by side, that margin just drops the text below the icon's centre line. */ .lagom .app-nav-secondary .app-nav-menu .menu > li > a > .item-text{ margin-top:0 !important;margin-bottom:0 !important; } /* ── a caret on the rows that open a submenu ───────────────────────── Lagom already puts a inside exactly those links and hides it in the left rail, so showing it marks the right five rows without any guessing about which have children. It is placed absolutely rather than as a flex item: at 140px the rail has no width to spare, and a label like "Billing Section" would have been the one to pay for it. The panel slides out to the right, so the caret points that way. */ .lagom .app-nav-secondary .app-nav-menu .menu > li > a > .ls-caret{ display:block !important; position:absolute;right:7px;top:50%; font-size:9px;line-height:1;opacity:.45; transform:translateY(-50%) rotate(-90deg); transform-origin:center; transition:opacity .2s ease,right .2s ease; pointer-events:none; } .lagom .app-nav-secondary .app-nav-menu .menu > li:hover > a > .ls-caret, .lagom .app-nav-secondary .app-nav-menu .menu > li.sfHover > a > .ls-caret, .lagom .app-nav-secondary .app-nav-menu .menu > li.open > a > .ls-caret{ opacity:1;right:4px; } /* keep the label clear of it */ .lagom .app-nav-secondary .app-nav-menu .menu > li.dropdown > a{padding-right:20px !important} @media(prefers-reduced-motion:reduce){ .lagom .app-nav-secondary .app-nav-menu .menu > li > a > .ls-caret{transition:none} } /* ── a little more room in the left rail ──────────────────────────────── At 140px a two-word label had nowhere to go: "Trade Copier" broke across two lines as soon as anything sat beside it, and the caret above already had to be placed absolutely for the same reason. The theme derives the rail from one variable and positions its slide-out panels from the same one, so widening it here moves everything together. The body is a flex row, so the content simply takes what is left. */ :root{ --app-nav-left-width: 172px; } /* ── the client alert has to clear the fixed header ───────────────────── Lagom pins .alert-floating at top:0 with z-index:11; on the desktop breakpoint this header is fixed at top:0 with z-index:99000, so the whole notice sat behind it and only the sliver taller than the header ever showed. Customers were reading a suspension warning with no first line. It is moved down by the measured header height with a transform rather than by overriding `top`: Lagom drives the notice's show and hide through an inline top:-100%, and an !important there would pin it open for good. No room is reserved for it below: the client area's title block already starts around 294px on every page, well clear of the notice's bottom edge, so padding the content down only opened an empty band. Below 992px the header is sticky and travels with the page, and the notice wraps to over half the screen — 549px of 812 on a phone. Fixed, it would cost the customer that much of every page, so there it simply rides along in the flow. */ @media (min-width:992px){ .clientAlert.alert-floating{ transform:translateY(var(--fx-hdr-h,105px))} } @media (max-width:991px){ .clientAlert.alert-floating{ position:static !important;transform:none} /* Lagom pushes its own mobile bar down by the notice's height, because it expects the notice to be pinned above it. Now that the notice travels with the page, that margin drops the bar into the middle of the text instead — so it goes back to the top, where it sits on every other page. Scoped to the class Lagom adds only when a notice is on the page, so nothing else moves. */ body.floating-notification .app-nav-header{margin-top:0 !important} }