/* =================================================================== ARTEMISIA MARKETS Brand palette and logo are the only things carried across from the firm's existing material: navy and gold from the letterhead, the mark from the logo. Amber is the one added colour and exists because a gold button is not loud enough to be a primary control, and because the price panel already owns red and green. =================================================================== *//* The two families, self-hosted as WOFF2. These lived in fonts/fonts.css as TTFs; folded in here so the pages carry one stylesheet request, and the two faces the hero needs are preloaded from the page head. */ /* The faces carry a -v2 suffix because the earlier filenames 404'd for a day, and Vercel stamps its immutable one-year Cache-Control on a 404 as readily as on a file: every browser that saw the site in that window has the miss cached until 2027. A new path is the only way past it. */ @font-face{ font-family:'Instrument Sans';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap; src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npSTF-Qf1-v2.woff2) format('woff2'); } @font-face{ font-family:'Instrument Sans';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap; src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npST3-Qf1-v2.woff2) format('woff2'); } @font-face{ font-family:'Instrument Sans';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap; src:url(fonts/pximypc9vsFDm051Uf6KVwgkfoSxQ0GsQv8ToedPibnr-yp2JGEJOH9npSQb_gf1-v2.woff2) format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap; src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_m07NSg-v2.woff2) format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap; src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_d0nNSg-v2.woff2) format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap; src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_TknNSg-v2.woff2) format('woff2'); } @font-face{ font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap; src:url(fonts/LDIbaomQNQcsA88c7O9yZ4KMCoOg4IA6-91aHEjcWuA_KUnNSg-v2.woff2) format('woff2'); } :root{ --bg:#ffffff; --bg-alt:#f4f6f9; --card:#ffffff; --ink:#0c1220; --ink-soft:#414b5c; --muted:#6b7686; --rule:#e3e7ec; --rule-soft:#eef1f5; --navy:#0d1b3a; --navy-deep:#081226; --gold:#8a6d2f; --gold-soft:#c9b27a; /* PRIMARY ACCENT. Orange, reserved for calls to action that matter. */ --amber:#e8801a; --amber-deep:#c96a0e; --amber-ink:#ffffff; /* SECONDARY ACCENT. The client area's own yellow, taken from its stylesheet at portal.artemisiamarkets.com: --gold-fill:#f7d32a --gold-highlight:#fbe576 --gold-fill-foreground:#0a1a2f --gold-shadow:#8c6b2e Used for secondary controls and for highlighted words in body copy. Orange stays on the calls to action. */ --yellow:#f7d32a; --yellow-deep:#dcba18; --yellow-ink:#0a1a2f; --up:#12a150; --down:#d93a2b; /* The notice overlay. */ --coral-blue:#2f6f8f; --shadow-sm:0 2px 8px rgba(13,27,58,.07); --shadow-md:0 14px 34px -18px rgba(13,27,58,.3); --shadow-lg:0 40px 80px -40px rgba(8,18,38,.55); --shell:78rem; --pad:1.25rem; --r:18px; --display:'Plus Jakarta Sans','Segoe UI',system-ui,sans-serif; --body:'Instrument Sans','Segoe UI',system-ui,sans-serif; } @media(min-width:640px){:root{--pad:2rem;}} @media(min-width:1100px){:root{--pad:2.5rem;}} [data-theme='dark']{ --bg:#0b1120; --bg-alt:#101a2c; --card:#141e33; --ink:#eef2f8; --ink-soft:#c3ccda; --muted:#8794a8; --rule:#22304a; --rule-soft:#1a2438; --gold:#c9b27a; --amber:#f5942b; --amber-deep:#e8801a; --amber-ink:#12131a; /* Dark theme takes the client area's highlight rather than its fill. */ --yellow:#fbe576; --yellow-deep:#f7d32a; --yellow-ink:#0a1a2f; --up:#2fc47a; --down:#f0604d; --coral-blue:#27607d; --shadow-sm:0 2px 8px rgba(0,0,0,.4); --shadow-md:0 14px 34px -18px rgba(0,0,0,.75); --shadow-lg:0 40px 80px -40px rgba(0,0,0,.9); } *,*::before,*::after{box-sizing:border-box;} html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--body);font-size:15px;line-height:1.7; overflow-x:clip; transition:background-color .25s ease,color .25s ease; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:4px;}/* Selection in the house colours rather than the operating system's blue. */ ::selection{background:var(--amber);color:#fff;} ::-moz-selection{background:var(--amber);color:#fff;} [data-theme='dark'] ::selection{background:var(--amber);color:#12131a;} .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);}/* ------------------------------------------------------------- type --- */ h1,h2,h3,h4{font-family:var(--display);margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.1;} .hl{color:var(--amber);} .h-hero{font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.05;letter-spacing:-.035em;} .h-sec{font-size:clamp(1.75rem,3.1vw,2.6rem);text-wrap:balance;} .h-card{font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;line-height:1.35;} .lede{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.65;color:var(--ink-soft);margin:1rem 0 0;max-width:46rem;} .p{margin:.65rem 0 0;color:var(--ink-soft);font-size:.9375rem;} .eyebrow{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .85rem;} .centre{text-align:center;} .centre .lede{margin-inline:auto;} section{padding-block:clamp(3.25rem,6vw,5.5rem);} .alt{background:var(--bg-alt);} .page-head{padding-top:clamp(2.5rem,4.5vw,4rem);}/* --------------------------------------------------------- controls --- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; border-radius:999px;padding:.85rem 1.85rem;border:1px solid transparent; font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:.01em; transition:background-color .18s,border-color .18s,color .18s,transform .18s,box-shadow .18s; white-space:nowrap; } .btn-amber{background:var(--amber);color:var(--amber-ink);box-shadow:0 8px 20px -10px var(--amber);} .btn-amber:hover{background:var(--amber-deep);transform:translateY(-1px);} .btn-line{border-color:var(--rule);color:var(--ink);background:var(--card);} .btn-line:hover{border-color:var(--ink);} .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff;} .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);} .btn-sm{padding:.55rem 1.2rem;font-size:.8125rem;} .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem;} .centre .actions{justify-content:center;}/* ------------------------------------------------------ utility bar --- */ .util{background:var(--navy-deep);color:rgba(255,255,255,.5);font-size:.6875rem; border-bottom:1px solid rgba(255,255,255,.07);} .util .shell{display:flex;align-items:flex-start;gap:2rem;padding-block:.7rem;} .util-disc{display:grid;gap:.3rem;max-width:74rem;} .util-disc p{margin:0;line-height:1.5;} .util-jur{color:rgba(255,255,255,.5);} .util-risk{color:rgba(255,255,255,.72);} .util a:hover{color:#fff;} .tt{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.2rem .4rem;} .tt span{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:999px;opacity:.45;} [data-theme='light'] .tt .tt-l{background:rgba(255,255,255,.16);opacity:1;} [data-theme='dark'] .tt .tt-d{background:rgba(255,255,255,.16);opacity:1;}/* The toggle lives in the masthead, which is sticky, so it stays reachable at any scroll depth. It sat in the utility bar and scrolled away. */ .head .tt{border-color:rgba(255,255,255,.28);flex-shrink:0;} .head .tt:hover{border-color:rgba(255,255,255,.6);} [data-theme='light'] .head .tt .tt-l{background:rgba(255,255,255,.2);} [data-theme='dark'] .head .tt .tt-d{background:rgba(255,255,255,.2);}/* Below 600px the toggle leaves the masthead to make room for the CTA and the menu button; the menu panel carries a "Switch theme" row instead, so the control is never lost. */ @media(max-width:600px){.head .tt{display:none;}}/* --------------------------------------------------------- masthead --- Navy on both themes, because the firm's logo lockup sets ARTEMISIA in white and it is used as supplied rather than re-typeset. */ .head{position:sticky;top:0;z-index:50;background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.1);} .head .shell{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem;} .brand{flex-shrink:0;display:block;} .brand img{height:56px;width:auto;} @media(max-width:600px){.brand img{height:42px;}} .nav{display:none;gap:1.35rem;margin-left:auto;} .nav a{font-size:.875rem;font-weight:500;color:rgba(255,255,255,.78);padding-block:.3rem;border-bottom:2px solid transparent;} .nav a:hover{color:var(--gold-soft);} .nav a.on{color:#fff;border-bottom-color:var(--amber);font-weight:600;} .head-cta{display:flex;align-items:center;gap:.55rem;margin-left:auto;} .head .btn-line{border-color:rgba(255,255,255,.32);color:#fff;background:transparent;} .head .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1);} @media(min-width:1240px){.nav{display:flex;}.head-cta{margin-left:0;}} @media(max-width:560px){.head-cta .btn-line{display:none;}} .mnav{position:relative;margin-left:.5rem;} .mnav summary{list-style:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:1px solid rgba(255,255,255,.3);border-radius:10px;color:#fff;} .mnav summary::-webkit-details-marker{display:none;} .mnav-panel{position:absolute;right:0;top:calc(100% + .6rem);min-width:13rem;display:grid;gap:.1rem; max-width:calc(100vw - 2rem);max-height:calc(100dvh - var(--reg-h,0px) - 7rem);overflow-y:auto; background:var(--navy-deep);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:.5rem;box-shadow:var(--shadow-md);} .mnav-theme{display:block;width:100%;text-align:left;padding:.55rem .8rem;border-radius:9px; margin-top:.25rem;border-top:1px solid rgba(255,255,255,.12);border-radius:0 0 9px 9px; font-size:.9375rem;color:rgba(255,255,255,.85);} .mnav-theme:hover{background:rgba(255,255,255,.09);color:var(--gold-soft);} .mnav-panel a{padding:.55rem .8rem;border-radius:9px;font-size:.9375rem;color:rgba(255,255,255,.85);} .mnav-panel a:hover{background:rgba(255,255,255,.09);color:var(--gold-soft);} @media(min-width:1240px){.mnav{display:none;}}/* ----------------------------------------------------------- ticker --- */ /* ------------------------------------------------------------- hero --- */ .hero{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;padding-block:clamp(3rem,5.5vw,4.75rem);} .hero::before{content:'';position:absolute;inset:0; background:radial-gradient(90rem 40rem at 15% -10%,rgba(232,128,26,.16),transparent 60%), radial-gradient(70rem 40rem at 95% 110%,rgba(201,178,122,.15),transparent 60%);} .hero .shell{position:relative;}/* Hero background film. The scrim is heavier on the left, where the copy sits, and the video never intercepts the pointer. */ .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;} .hero-video video{width:100%;height:100%;object-fit:cover;display:block;} .hero-video::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(8,18,38,.86) 0%,rgba(8,18,38,.55) 52%,rgba(8,18,38,.28) 100%);} .hero-grid{display:grid;gap:2.75rem;align-items:center;} .hero-slot{min-height:1px;} @media(max-width:999px){.hero-slot{display:none;}} @media(min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:4rem;}} .hero h1{color:#fff;} .hero-lede{font-size:clamp(1rem,1.35vw,1.125rem);line-height:1.65;color:rgba(255,255,255,.76);margin:1.25rem 0 0;max-width:31rem;} .counts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem 2rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.12);} @media(min-width:560px){.counts{grid-template-columns:repeat(4,1fr);}} .count b{display:block;font-family:var(--display);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums;} .count span{display:block;margin-top:.45rem;font-size:.75rem;line-height:1.4;color:rgba(255,255,255,.5);}/* ------------------------------------------------------ price panel --- *//* ---------------------------------------------------------- figures --- No card and no coloured bar. A hairline between the columns is enough separation, and the figure carries the weight on its own. */ .four{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);} @media(min-width:960px){.four{grid-template-columns:repeat(4,1fr);}} .plate{display:block;padding:.25rem 1.75rem;text-align:left;width:100%;background:none;border:0; border-left:1px solid var(--rule);transition:opacity .16s;} .plate:first-child{border-left:0;padding-left:0;} @media(min-width:960px){.plate:first-child{padding-left:0;}} @media(max-width:959px){.plate:nth-child(odd){border-left:0;padding-left:0;}} .plate .fig{margin:0;font-family:var(--display);font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;line-height:1; letter-spacing:-.04em;color:var(--amber);font-variant-numeric:tabular-nums;}/* Rendered 3D marks, not line icons in a tinted square. They sit bare on the page and lift a little on hover, like the rest of the site. *//* The asset-class mark sits behind its own label, large and faint, so the block is signed without an icon competing with the words. */ .glyphed{position:relative;} .glyphed h3,.glyphed p{position:relative;} a.glyphed:hover .glyph,button.glyphed[aria-pressed='true'] .glyph{ opacity:.3;transform:translateY(-50%) scale(1.08) rotate(-3deg); }/* Instrument marks in a quote row: a pair shows both currencies, an index or a commodity shows its own badge. */ .plate h3{font-size:1rem;font-weight:800;margin-top:.9rem;} .plate p{margin:.45rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--muted);} a.plate:hover .fig,button.mtab:hover .fig{color:var(--amber-deep);} .band .plate{border-left-color:rgba(255,255,255,.16);} .band .plate h3{color:#fff;} .band .plate p{color:rgba(255,255,255,.6);} button.mtab[aria-pressed='true'] .fig{position:relative;}/* ------------------------------------------------------------ cards --- */ .grid{display:grid;gap:1.25rem;} @media(min-width:720px){.g3{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.g3{grid-template-columns:repeat(3,1fr);}} .card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.6rem;transition:transform .18s,box-shadow .18s,border-color .18s;} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--gold-soft);} .more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-family:var(--display);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);} .card:hover .more{gap:.7rem;}/* -------------------------------------------------------- dark band --- */ .band{background:var(--navy);color:#fff;} .band h1,.band h2,.band h3{color:#fff;} .band .lede,.band .p{color:rgba(255,255,255,.72);} .band .eyebrow{color:var(--gold-soft);} .band .ticks li{color:rgba(255,255,255,.78);} .band .ticks b{color:#fff;} .split{display:grid;gap:2.75rem;align-items:center;} @media(min-width:1000px){.split{grid-template-columns:1fr 1.1fr;gap:4rem;}} .split.flip>*:first-child{order:2;} @media(max-width:999px){.split.flip>*:first-child{order:0;}} .ticks{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem;} .ticks li{position:relative;padding-left:1.9rem;font-size:.9375rem;color:var(--ink-soft);} .ticks li::before{content:'';position:absolute;left:0;top:.5em;width:1.1rem;height:1.1rem;border-radius:999px;background:var(--amber);opacity:.16;} .ticks li::after{content:'';position:absolute;left:.33rem;top:.78em;width:.42rem;height:.42rem;border-radius:999px;background:var(--amber);} .ticks b{color:var(--ink);font-weight:600;}/* --------------------------------------------------------- LP marks --- No tile, no border, no card. The marks sit on the page in their own colours at a size you can actually read, which is the only thing a logo row is for. They are contained inside a fixed box so that a wide wordmark and a square badge come out optically the same weight. *//* -------------------------------------------------------- execution --- */ .flow{display:grid;gap:.75rem;margin-top:2.5rem;align-items:stretch;} @media(min-width:820px){.flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;}} .flow.flow-v{grid-template-columns:1fr;margin-top:0;} .flow-node{border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:rgba(255,255,255,.05);padding:1.4rem;text-align:center;} .flow-node b{display:block;font-family:var(--display);font-size:1rem;font-weight:800;color:#fff;} .flow-node span{display:block;margin-top:.4rem;font-size:.8125rem;color:rgba(255,255,255,.6);line-height:1.55;} .flow-arrow{display:grid;place-items:center;color:var(--amber);transform:rotate(90deg);} @media(min-width:820px){.flow:not(.flow-v) .flow-arrow{transform:none;}} .no-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.85rem;} @media(min-width:760px){.no-list{grid-template-columns:repeat(3,1fr);}} .no-list li{border-left:2px solid var(--amber);padding:.15rem 0 .15rem 1rem;} .no-list b{display:block;font-family:var(--display);font-weight:800;font-size:.9375rem;color:#fff;} .no-list span{display:block;margin-top:.3rem;font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.65);}/* --------------------------------------------- transparency report --- *//* --------------------------------------------------- spec + compare --- *//* ------------------------------------------------------- calculator --- *//* --------------------------------------------------------- accounts --- *//* ------------------------------------------------------- conditions --- */ .kv{list-style:none;margin:0;padding:0;} .kv li{display:flex;justify-content:space-between;gap:1.25rem;padding:.62rem 0;border-top:1px solid var(--rule-soft);font-size:.8125rem;color:var(--muted);} .kv li:first-child{border-top:0;} .kv b{color:var(--ink);font-weight:700;text-align:right;font-variant-numeric:tabular-nums;}/* ======================================================== devices ==== Three separate objects, each with its own angle rather than one group rotation: the tablet on the left turned to face right, the laptop on the right turned to face left, and the handset square to the reader below the laptop. They lean toward the pointer, and drift when it is still. *//* On navy the amber wash read as a stray patch of white screen; in dark it is barely-there warmth instead. *//* --- laptop, right, facing left --------------------------------------- *//* --- tablet, left, facing right --------------------------------------- *//* --- handset, below the laptop, square on ----------------------------- *//* The pill cut into the top of the display. No maker's mark on it. *//* --- motion ----------------------------------------------------------- */ @keyframes devIn{from{opacity:0;transform:translateY(46px) scale(.94);}to{opacity:1;}} /* The angle lives on an inner wrapper so the float can own `transform` on the outer one without the two fighting. *//* The laptop is its own 3D scene. The deck used to fold through the page scene's perspective, whose origin sits nowhere near the laptop, so the fold sheared sideways by a different amount in every rig. A local perspective centred on the laptop makes the fold symmetric everywhere, and flattening keeps the outer scene from projecting it a second time. *//* ====================================================== certificate === An A4 sheet in landscape, turned three-quarters to face left, engraved rather than styled: guilloche ground, a double gold rule inside the edge, the house mark struck as a seal, particulars in two register columns, a rosette between two signature lines, and a SPECIMEN stamp across the face. Hovering lifts it and squares it up, as if picked up to be read. *//* The sheet's half of the split is the wide half, so the A4 landscape has the room it needs without ever running over the text column. *//* Desktop only: below 1000px the base .split is single-column and this override must not resurrect the columns — unguarded, it squeezed the sheet off the side of a phone. */ @media(min-width:1000px){.split:has(.cert-stage){grid-template-columns:.78fr 1.22fr;}} @keyframes certIn{ from{opacity:0;transform:translateY(42px);} to {opacity:1;transform:translateY(0);} } /* Double rule inside the edge, the way an engraved document is bordered. */ @media(max-width:760px){/* The engraving type is sized for a desktop sheet; on a phone the same sizes are 8-10px. Flat sheet, readable register. */}/* ------------------------------------------------------------ steps --- *//* -------------------------------------------------------------- faq --- *//* ------------------------------------------------------------ close --- */ .close{background:var(--navy-deep);color:#fff;position:relative;overflow:hidden;} .close::before{content:'';position:absolute;inset:0;background:radial-gradient(60rem 30rem at 50% 130%,rgba(232,128,26,.22),transparent 65%);} .close .shell{position:relative;} .close h2{color:#fff;} .close .lede{color:rgba(255,255,255,.72);}/* ----------------------------------------------------------- footer --- */ .foot{background:var(--navy-deep);color:rgba(255,255,255,.6);font-size:.8125rem;border-top:1px solid rgba(255,255,255,.08);} .foot .shell{padding-block:3.25rem;} .foot-grid{display:grid;gap:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid rgba(255,255,255,.1);} @media(min-width:720px){.foot-grid{grid-template-columns:repeat(2,1fr);}} @media(min-width:1040px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}} .foot h4{font-family:var(--display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 1rem;} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;} .foot a:hover{color:#fff;} .foot-addr{font-size:.75rem;line-height:1.75;margin:1rem 0 0;color:rgba(255,255,255,.58);} .foot-addr a{color:var(--gold-soft);} .legal{padding-top:2.25rem;display:grid;gap:1.35rem;} .disc{max-width:64rem;} .disc h5{margin:0 0 .35rem;font-family:var(--display);font-size:.6875rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);} .disc p{margin:0;font-size:.75rem;line-height:1.65;color:rgba(255,255,255,.48);} .disc-risk p{color:rgba(255,255,255,.78);} .disc-fine{margin:0;font-size:.6875rem;line-height:1.6;max-width:64rem; color:rgba(255,255,255,.4);} .legal .rule{margin:0;border-top:1px solid rgba(255,255,255,.1);padding-top:1.25rem; font-size:.75rem;color:rgba(255,255,255,.5);}/* ------------------------------------------------------ sticky bar --- */ .dock{position:fixed;left:0;right:0;bottom:0;z-index:60;transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1); background:var(--navy-deep);border-top:1px solid rgba(201,178,122,.3);box-shadow:0 -14px 40px -20px rgba(0,0,0,.7);} .dock.on{transform:none;} .dock .shell{display:flex;align-items:center;gap:1.25rem;padding-block:.8rem;} .dock p{margin:0;color:rgba(255,255,255,.72);font-size:.8125rem;line-height:1.45;} .dock p b{color:#fff;font-family:var(--display);font-weight:800;display:block;font-size:.9375rem;} .dock .actions{margin:0 0 0 auto;flex-shrink:0;} @media(max-width:700px){.dock p{display:none;}.dock .actions{margin-inline:auto;}} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important;}}/* ======================================================== motion ===== One idea, used everywhere: content settles into place the first time it is seen, and never again. Nothing loops, nothing parallaxes, nothing moves while you are reading it. Elements are visible by default and only become hidden once the observer has claimed them, so the page still reads with JavaScript off. *//* Purely additive. Nothing is hidden waiting to be revealed: without the class the element is simply visible, and with it the element animates in. The earlier version set opacity to zero and relied on the observer to put it back, which left whole rows blank whenever the observer missed one. Content must never depend on an animation having run. */ .js-reveal.in{animation:revealIn .7s cubic-bezier(.22,1,.36,1) both;}/* No transform in `to`: with a `both` fill, ending on transform:none would pin any revealed element that carries its own resting transform flat, forever. Ending open-handed lets the underlying value show through. */ @keyframes revealIn{from{opacity:0;transform:translateY(18px)}to{opacity:1}}/* The hero settles on load rather than on scroll, staggered down the column. */ .hero-grid > div > *{animation:rise .8s cubic-bezier(.22,1,.36,1) both;} .hero-grid > div > *:nth-child(1){animation-delay:.05s} .hero-grid > div > *:nth-child(2){animation-delay:.13s} .hero-grid > div > *:nth-child(3){animation-delay:.21s} .hero-grid > div > *:nth-child(4){animation-delay:.29s} .hero-grid > div > *:nth-child(5){animation-delay:.37s} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}/* The quote panel lifts a little as the pointer approaches a row. *//* The transparency bar draws itself out from the left. */ /* The device rig tilts fractionally toward the pointer. */ @media(prefers-reduced-motion:reduce){ .js-reveal.in{animation:none !important;} .hero-grid > div > *,.tr-bar span{animation:none;} }/* ==================================================== partner routes === A selector rather than a table of terms. Three routes, one at a time, each numbered because they are alternatives and the number is the label the reader scans for. */ /* ==================================================== secondary accent === Orange carries the calls to action. This is the quieter tone, for the outline button and for a highlighted word inside body copy, so the page has two levels of emphasis rather than one shouting everywhere. */ .hl-y{color:var(--yellow);} .eyebrow{color:var(--yellow);} .ticks b{color:var(--ink);}/* ================================================= regulatory overlay === Floats over the site rather than occupying a band of it, and closes. */ .util{ position:fixed;top:0;left:0;right:0;z-index:90; background:var(--coral-blue);color:rgba(255,255,255,.82); font-size:.6875rem;border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 10px 30px -14px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease; } .util.gone{transform:translateY(-100%);opacity:0;pointer-events:none;} .util .shell{display:flex;align-items:flex-start;gap:1.5rem;padding-block:.7rem;} .util-disc{display:grid;gap:.3rem;max-width:74rem;} .util-disc p{margin:0;line-height:1.5;} .util-jur{color:rgba(255,255,255,.72);} .util-risk{color:#fff;} .util-x{ margin-left:auto;flex-shrink:0;display:grid;place-items:center; width:2.75rem;height:2.75rem;border-radius:50%;color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.3);transition:all .16s; } .util-x:hover{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.6);}/* The overlay sits over the masthead, so the page starts below it until it is dismissed. */ body{padding-top:var(--reg-h,0px);transition:padding-top .35s cubic-bezier(.22,1,.36,1);} .head{top:var(--reg-h,0px);transition:top .35s cubic-bezier(.22,1,.36,1);} @media(max-width:700px){.util-disc{max-width:none;}} /* ============================================ jurisdiction notice overlay === The arrival notice. Sits above everything else on the page (the utility bar is z-90), centred over a dimmed navy backdrop, and cannot be dismissed except by its two buttons. Behaviour lives in site.js. Elevation follows the same recipe as the cards, so it sits on the same --lift scale. */ .jn{ position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; padding:var(--pad);background:rgba(8,18,38,.78); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); animation:jn-in .25s ease; } .jn-panel{ width:100%;max-width:34rem;max-height:calc(100dvh - 2.5rem);overflow-y:auto; background:var(--card);border-radius:var(--r); padding:clamp(1.5rem,4vw,2.25rem);outline:none; box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-30px * var(--lift)) rgba(13,27,58,.42), 0 calc(6px * var(--lift)) calc(16px * var(--lift)) calc(-8px * var(--lift)) rgba(13,27,58,.16); animation:jn-rise .4s cubic-bezier(.22,1,.36,1); } [data-theme='dark'] .jn-panel{box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-28px * var(--lift)) rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07);} .jn-h{margin:0 0 1rem;font-family:var(--display);font-size:1.35rem;font-weight:800; letter-spacing:-.015em;line-height:1.3;} .jn-panel p{margin:0 0 .9rem;font-size:.9rem;line-height:1.65;color:var(--ink-soft);} .jn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem; margin-top:1.4rem;padding-top:1.25rem;border-top:1px solid var(--rule);} /* Set quieter than the primary, but a real control and not a footnote: the third paragraph says "if you choose to continue", so there has to be something to choose instead. */ .jn-leave{ background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.875rem; color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule); text-underline-offset:4px;transition:color .18s; } .jn-leave:hover{color:var(--ink);text-decoration-color:var(--ink);} @keyframes jn-in{from{opacity:0;}} @keyframes jn-rise{from{opacity:0;transform:translateY(14px);}} @media(prefers-reduced-motion:reduce){.jn,.jn-panel{animation:none;}} /* ======================================================== elevation === Surfaces come off the page instead of being drawn on it. No borders: a deep shadow in light, a lit rim and a coloured wash in dark, and a soft glow behind the larger panels so they read as backlit. `--lift` is the one number that controls how far forward everything sits, so the whole page can be tuned from here. */ :root{ --lift:1; } .card{ border:0 !important; background:var(--card); box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-30px * var(--lift)) rgba(13,27,58,.42), 0 calc(6px * var(--lift)) calc(16px * var(--lift)) calc(-8px * var(--lift)) rgba(13,27,58,.16); } [data-theme='dark'] .card{ box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-28px * var(--lift)) rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07); }/* The light behind. A wash of the accent under the panel, wider than the panel itself, so the edge reads as lit rather than outlined. *//* ============================================================ tilt ==== The panel turns a few degrees toward the pointer. Small numbers on purpose: this should register as the surface being physical, not as the page moving under the reader. */ .tilt{ transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,1,.36,1); will-change:transform; }/* ========================================================== cursor ==== A dot with a wide, soft field around it. The native pointer is hidden only where a fine pointer exists, so touch and keyboard are untouched. */ @media (pointer:fine){ html.cur-on,html.cur-on *{cursor:none !important;} html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:text !important;} } .cur.on-link .cur-dot{width:26px;height:26px;background:rgba(232,128,26,.28); box-shadow:0 0 0 1px var(--amber),0 0 22px 4px rgba(232,128,26,.4);}/* ============================================ light and dark coherence == Several liquidity marks are black artwork and vanish on the dark ground. They are inverted there, and the ones that are already light or that carry brand colour worth keeping are exempt. */ @media(prefers-reduced-motion:reduce){ .tilt{transition:none;}}/* ------------------------------------------------------- step artwork --- One drawing per card, showing what the step actually involves. Sits above the words rather than behind them: here the picture is the label. *//* --------------------------------------------------- collapsible specs --- */ .spec-wrap.collapsed .spec tbody tr.x{display:none;} .spec-wrap.open .spec tbody tr.x{display:table-row;}/* The toggle sits AFTER the scroll wrapper (a control inside a sideways- scrolling container drifts out of view), so it dresses as its own bar. *//* Flow nodes carry a drawing of the stage, on the same footing as the step cards: the picture is the label, the words are the caption. */ .flow-art{display:block;width:100%;max-width:5.5rem;height:auto;margin:0 auto .9rem; color:var(--amber);opacity:.95;}/* --------------------------------------------------------------- form --- */ .field{margin-bottom:1.1rem;} .field label{display:block;margin-bottom:.4rem;font-family:var(--display); font-size:.6875rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);} .field input,.field select,.field textarea{ width:100%;padding:.8rem .95rem;border-radius:10px;background:var(--bg-alt); border:1px solid var(--rule);color:var(--ink);font:inherit;font-size:.9375rem; transition:border-color .16s,background-color .16s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--amber);background:var(--card);} .field textarea{resize:vertical;min-height:7rem;}/* The report animates in like the rest of the page: the bar draws out from the left, then each legend card arrives under its own segment. */ /* The segment lifts when its card is hovered, and vice versa. *//* ----------------------------------------------------- order types --- Not chips in outlined pills. A two-column list where each entry carries a mark for what the order does: up, down, a stop, a target. The mark is the information; the box was decoration. *//* Key/value rows arrive in sequence once their panel is in view, which is the same gesture the rest of the page uses. */ .cond-box.in .kv li,.cond-box.in .otypes li{ opacity:0;transform:translateX(-8px);animation:kvIn .45s cubic-bezier(.22,1,.36,1) forwards; } @keyframes kvIn{to{opacity:1;transform:none}} .cond-box.in .kv li:nth-child(1),.cond-box.in .otypes li:nth-child(1){animation-delay:.04s} .cond-box.in .kv li:nth-child(2),.cond-box.in .otypes li:nth-child(2){animation-delay:.08s} .cond-box.in .kv li:nth-child(3),.cond-box.in .otypes li:nth-child(3){animation-delay:.12s} .cond-box.in .kv li:nth-child(4),.cond-box.in .otypes li:nth-child(4){animation-delay:.16s} .cond-box.in .kv li:nth-child(5),.cond-box.in .otypes li:nth-child(5){animation-delay:.20s} .cond-box.in .kv li:nth-child(6),.cond-box.in .otypes li:nth-child(6){animation-delay:.24s} .cond-box.in .kv li:nth-child(7),.cond-box.in .otypes li:nth-child(7){animation-delay:.28s} .cond-box.in .kv li:nth-child(n+8){animation-delay:.32s} .kv li{transition:color .18s ease;} .kv li:hover{color:var(--ink);} .kv li:hover b{color:var(--amber);} @media(prefers-reduced-motion:reduce){ .cond-box.in .kv li,.cond-box.in .otypes li{opacity:1;transform:none;animation:none;}}/* Route artwork, on the same footing as the step cards: the number marks which of the three you are reading, the drawing says what it is. */ /* ================================================ elevation, dark bands == A shadow is invisible against navy. Panels sitting on a dark band are raised with a lighter surface, a lit top edge and a glow underneath. */ .band .flow-node,.band .plate,.band .cond-box,.band .card,.close .flow-node{ position:relative;border:0 !important;border-radius:var(--r); background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.045) 100%); box-shadow: 0 38px 64px -22px rgba(0,0,0,.92), 0 10px 22px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.09); backdrop-filter:blur(2px); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease; } .band .flow-node::after,.band .plate::after{ content:'';position:absolute;left:8%;right:8%;bottom:-14%;height:44%;z-index:-1; border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(232,128,26,.34),transparent 72%); filter:blur(22px); } .band .flow-node:hover,.band .plate:hover{ transform:translateY(-6px); background:linear-gradient(180deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.07) 100%); box-shadow: 0 46px 74px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14); }/* The plate's hairline divider is redundant once it is a raised surface. */ .band .plate{border-left:0 !important;padding:1.5rem;} .band .four{gap:1.1rem;}/* Light theme, harder. The panels were reading as flat rectangles. */ :root{ --lift:1.35; } .card:hover{ transform:translateY(-5px); box-shadow: 0 calc(48px * var(--lift)) calc(80px * var(--lift)) calc(-34px * var(--lift)) rgba(13,27,58,.5), 0 8px 20px -10px rgba(13,27,58,.2); } [data-theme='dark'] .card:hover{ box-shadow:0 48px 84px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.14); } @media(prefers-reduced-motion:reduce){ .band .flow-node:hover,.band .plate:hover,.card:hover{transform:none;}}/* Card artwork draws itself in when the card is first seen, then answers the pointer. Same gesture on the steps, the flow nodes and the routes. *//* The drawing is an enhancement, never a precondition. Artwork is fully visible by default; the dash is applied only where the reveal class has actually landed, so a missed observer can never leave a card empty. It did, and that is why the icons kept disappearing. */ .in .step-art path,.in .step-art rect,.in .step-art circle, .in .flow-art path,.in .flow-art rect,.in .flow-art circle{ stroke-dasharray:420; animation:draw 1.15s cubic-bezier(.22,1,.36,1) both; } @keyframes draw{from{stroke-dashoffset:420}to{stroke-dashoffset:0}} .in .step-art *:nth-child(2){animation-delay:.1s} .in .step-art *:nth-child(3){animation-delay:.2s} .in .step-art *:nth-child(4){animation-delay:.3s} .in .step-art *:nth-child(5){animation-delay:.4s}.flow-art{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}.flow-node:hover .flow-art{transform:translateY(-5px) scale(1.05);} @media(prefers-reduced-motion:reduce){ .flow-art path,.flow-art rect,.flow-art circle{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;}.flow-node:hover .flow-art{transform:none;}}/* On the gold strip the up and down marks need their own values or they disappear into the ground. *//* ------------------------------------------------------------ documents --- *//* ================================================== two-tone accents ==== Orange is reserved for the calls to action that matter: open an account, try a demo, become a partner. Everything else that used to shout in orange now takes the quieter client-area yellow, so the page has a hierarchy instead of one colour used for everything. *//* Card and section artwork. */.flow-art{color:var(--yellow);} .ticks li::before{background:var(--yellow);} .ticks li::after{background:var(--yellow);} .no-list li{border-left-color:var(--yellow);} .plate::after{background:var(--yellow);} .more{color:var(--yellow);}/* Secondary controls. *//* The glow behind a lifted panel follows the yellow, not the orange. */ .band .flow-node::after,.band .plate::after{} .band .flow-node::after{background:radial-gradient(closest-side,rgba(247,211,42,.34),transparent 72%);}/* The pointer field, too: the cursor is not a call to action. */ .cur.on-link .cur-dot{background:rgba(247,211,42,.3); box-shadow:0 0 0 1px var(--yellow),0 0 22px 4px rgba(247,211,42,.45);}/* ============================================================= tools ==== A second rig: the MetaTrader tablet on the left turned to face right, the PFArmour machine on the right, and a PFArmour tablet turned in toward it. */ /* The partner lockup and the third-party service cards. *//* Only the Armour wordmark is white artwork needing a light-theme invert (scoped rule further down). A blanket invert here was stripping the MetaTrader and Telegram logos of their colours. *//* The boundaries panel. Each line is a limit, so the marker is a rule that stops rather than a tick that approves. */ .bounds .eyebrow{margin-bottom:.5rem;}/* ===================================================== market cards ==== A row of instrument cards running like the quote strip: base and quote with their flags, the two sides of the price, the session move and a candle chart. Full width, and it stops when the pointer is on it so a card can actually be read. */ .mc-tf span.on{background:var(--yellow);color:var(--yellow-ink);}/* ==================================================== hero backdrop ==== The hero photograph, traced. It sits across the full width behind the copy and draws itself in from the right, one tower at a time, then stays. Cream on navy, and quiet enough to read text over. */ .hero{position:relative;} .hero .shell{position:relative;z-index:1;}/* Lit windows are filled panes, so they fade up rather than being uncovered as a stroke. The blur filter is what makes them read as light in glass instead of as squares on a plan. */ /* Aviation lights on the taller roofs. They pulse, slowly and out of step, which is the one thing in the drawing that keeps moving. */ /* The draw. Every stroke starts hidden and is uncovered in sequence; --i is written by the generator and counts from the right-hand edge. */ /* -------------------------------------------------- screen by theme --- Every device screen ships both colour schemes of the same MetaTrader capture. The pair is the same product, symbol, timeframe and panel set, so the toggle changes the terminal's theme and nothing else. *//* `.screen img` is class+element, so a bare `.s-dark` loses to it and both screens rendered. Matched at the same depth, the swap wins. *//* Marks inside a specification table sit tight against the symbol. *//* ======================================================== tool rows ==== Every entry is the same shape: a mark, a heading, a paragraph and a register of particulars, with a visual opposite. That is what makes the four read as one list rather than as four different components. */ .tool-row{align-items:center;} .tool-row + .tool-row{margin-top:3rem;} .tool-kv{margin-top:1.4rem;max-width:30rem;}/* The visual half of a row that has no device to show. *//* The boundaries run as one strip under copy trading, not as a card. *//* Bigger on the Tools page: this is the page about the software. *//* ========================================================= 3D badge ==== For a row with no device to show. A tile standing in space with real thickness: the face carries the mark, the layers behind it give the edge, and it arrives and floats on the same timing as the device rig. */ .badge3d-stage{perspective:1500px;perspective-origin:50% 40%; display:flex;align-items:center;justify-content:center;padding:2rem 1rem; /* Entrance and float live HERE, as plain translateY, so they never touch the badge's own transform. Keeping all three motions on one element made hover fight the paused animation and stutter. */ animation:b3dIn .9s cubic-bezier(.22,1,.36,1) both, b3dFloat 7s ease-in-out .9s infinite;} .badge3d{ position:relative;width:16rem;height:16rem;transform-style:preserve-3d; transform:rotateX(12deg) rotateY(-18deg);will-change:transform; transition:transform .6s cubic-bezier(.22,1,.36,1); } .badge3d-face{ position:absolute;inset:0;border-radius:26%; display:grid;place-items:center; background:linear-gradient(150deg,var(--b3-hi) 0%,var(--b3-mid) 52%,var(--b3-lo) 100%); box-shadow:0 40px 70px -28px rgba(13,27,58,.55), inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.18); } [data-theme='dark'] .badge3d-face{box-shadow:0 40px 70px -26px rgba(0,0,0,.9), inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.3);} .badge3d-face img{width:62%;height:62%;object-fit:contain;} .badge3d-face svg{width:50%;height:50%;} .badge3d-face img,.badge3d-face svg{ filter:drop-shadow(0 6px 10px rgba(0,0,0,.28));} .badge3d-face svg{color:#fff;}/* The edge: copies of the face pushed back in Z, which is what gives the tile a side rather than a shadow pretending to be one. */ .badge3d-edge{position:absolute;inset:0;border-radius:26%; background:linear-gradient(150deg,var(--b3-mid),var(--b3-lo));} .badge3d-edge:nth-of-type(1){transform:translateZ(-9px) scale(.994);} .badge3d-edge:nth-of-type(2){transform:translateZ(-18px) scale(.986);filter:brightness(.9);} .badge3d-edge:nth-of-type(3){transform:translateZ(-27px) scale(.976);filter:brightness(.68);}/* The light it throws on the page under it. */ .badge3d::after{content:'';position:absolute;left:6%;right:6%;bottom:-16%;height:46%; border-radius:50%;z-index:-1;pointer-events:none; background:radial-gradient(closest-side,var(--b3-glow),transparent 72%);filter:blur(20px);} @keyframes b3dIn{ from{opacity:0;transform:translateY(38px);} to {opacity:1;transform:translateY(0);} } @keyframes b3dFloat{ 0%,100%{transform:translateY(0);} 50% {transform:translateY(-14px);} } .badge3d-stage:hover .badge3d{ transform:rotateX(4deg) rotateY(-7deg) scale(1.06);} .badge3d-stage:hover .badge3d-face{box-shadow:0 52px 84px -26px rgba(13,27,58,.6), inset 0 2px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(0,0,0,.2);}/* Telegram takes its own blue; the firm's own services take the house yellow. */ .b3-telegram{--b3-hi:#41bce7;--b3-mid:#2aabe2;--b3-lo:#1b8fc4;--b3-glow:rgba(42,171,226,.45);} .b3-house{--b3-hi:#fbe576;--b3-mid:#f7d32a;--b3-lo:#d9b407;--b3-glow:rgba(247,211,42,.5);} .b3-house .badge3d-face svg{color:var(--yellow-ink);}/* The circular logo fills the tile rather than sitting inside it. */ .b3-telegram .badge3d-face img{width:88%;height:88%;} @media(max-width:900px){.badge3d{width:12rem;height:12rem;}} @media(prefers-reduced-motion:reduce){ .badge3d-stage{animation:none;} .badge3d-stage:hover .badge3d{transform:rotateX(12deg) rotateY(-18deg);}}/* ---- 3. the platform logo was rendering too small ------------------- *//* The Armour rig is a laptop and a handset, so the handset takes the slot the tablet had. *//* One colour per partner route, so the three read as three things. */ .b3-blue{--b3-hi:#5fa0c4;--b3-mid:#2f6f8f;--b3-lo:#1e5570;--b3-glow:rgba(47,111,143,.5);} .b3-red {--b3-hi:#e8776a;--b3-mid:#d0402f;--b3-lo:#a52d1f;--b3-glow:rgba(208,64,47,.5);} .b3-blue .badge3d-face svg,.b3-red .badge3d-face svg{color:#fff;}/* ================================================== mobile (phones) ==== The rules that make the site work below tablet width. Grouped here deliberately: everything phone-specific in one place, coarsest first. *//* --- masthead fits a phone: brand capped, CTA compacted, burger pinned -- */ @media(max-width:600px){ .head .shell{gap:.7rem;} .brand{min-width:0;} .brand img{height:36px;max-width:38vw;object-fit:contain;object-position:left center;} .head-cta{gap:.45rem;} .head-cta .btn{padding:.55rem .85rem;font-size:.75rem;} .mnav{margin-left:0;flex-shrink:0;} } @media(max-width:400px){ .head .shell{gap:.5rem;} .brand img{max-width:33vw;} .head-cta .btn{padding:.5rem .7rem;font-size:.6875rem;}}/* --- market cards: swipe strip instead of marquee (set by JS) ---------- */ .mc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;scrollbar-width:thin;} .mc-scroll::before,.mc-scroll::after{display:none;}/* no fades over a scrollbar */ .mc-scroll .mcards-track{animation:none;width:max-content;padding-inline:.25rem;} .mc-scroll .mcard{scroll-snap-align:center;}/* --- regulatory overlay: compact, scrollable guard, no reflow jank ----- */ @media(max-width:700px){ .util{max-height:38vh;overflow-y:auto;} .util .shell{padding-block:.55rem;gap:.9rem;} .util-disc p{font-size:.625rem;line-height:1.45;} } @media(max-width:900px){ body{transition:none;} .head{transition:none;}}/* --- sticky dock: one tight row, clear of the home indicator ----------- */ .dock{padding-bottom:env(safe-area-inset-bottom);} @media(max-width:560px){ .dock .shell{padding-block:.6rem;} .dock .actions{gap:.5rem;flex-wrap:nowrap;} .dock .actions .btn{padding:.6rem .9rem;font-size:.75rem;white-space:nowrap;}}/* --- tables: the sideways scroll announces itself ---------------------- */ @media(max-width:700px){ .spec-wrap,.cmp-wrap{ background-image: linear-gradient(90deg,var(--card),transparent 24px), linear-gradient(270deg,var(--card),transparent 24px), linear-gradient(90deg,rgba(13,27,58,.22),transparent 16px), linear-gradient(270deg,rgba(13,27,58,.22),transparent 16px); background-position:left,right,left,right; background-size:24px 100%,24px 100%,16px 100%,16px 100%; background-repeat:no-repeat; background-attachment:local,local,scroll,scroll; } .spec th{font-size:.6875rem;} } @media(max-width:430px){ .qtable .btn{padding:.45rem .7rem;font-size:.6875rem;}}/* --- layouts that never adapted ---------------------------------------- */ @media(max-width:560px){ .otypes{grid-template-columns:1fr;} .routes-tabs{flex-direction:column;} .tool-mk{flex-wrap:wrap;} .tool-logo{max-width:60vw;} .tr-bar span{font-size:0;} /* the legend carries the names */ .ticker::before,.ticker::after{width:3rem;} .mcards::before,.mcards::after{width:3rem;} } @media(max-width:480px){.four{grid-template-columns:1fr;}}/* --- device rigs: contained, proportional ------------------------------ */ @media(max-width:560px){ .scene-tools .dev-t-lap{right:0;width:92%;} .scene-tools .dev-t-left{left:0;width:40%;} .scene-tools .dev-t-right{right:0;width:32%;} .scene-tools .dev-t-phone{right:0;bottom:-2%;width:19%;} .laptop-deck{height:52px;} }/* --- hero stats over the skyline line-art ------------------------------ A soft dark halo behind figure and caption both, so the copy carries at any point of the drawing. The drawing itself is untouched. */ .hero .count b{text-shadow:0 2px 14px rgba(6,13,28,.95),0 0 7px rgba(6,13,28,.9),0 0 2px rgba(6,13,28,.9);}/* The caption sits on its own soft dark plate: a navy ground under the text, feathered outward by the box-shadow so it reads as shadow, not as a box. Painted behind the span only — the drawing is not touched. */ .hero .count span{color:rgba(255,255,255,.88); width:fit-content;padding:.1rem .35rem;margin-left:-.35rem;border-radius:6px; background:rgba(6,13,28,.72); box-shadow:0 0 16px 10px rgba(6,13,28,.72); text-shadow:0 1px 8px rgba(6,13,28,.95);}/* --- footer links become real tap targets ------------------------------ */ @media(max-width:900px){ .foot a{display:inline-block;padding-block:.3rem;} }/* --- animation budget on phones: entrances stay, idle loops stop ------- */ @media(max-width:900px){ .badge3d-stage{animation:b3dIn .9s cubic-bezier(.22,1,.36,1) both;} .cert-stage{animation:certIn 1s cubic-bezier(.22,1,.36,1) both;} .dev-laptop,.dev-tablet,.dev-phone{animation:devIn 1s cubic-bezier(.22,1,.36,1) both;} .dev-t-lap,.dev-t-left,.dev-t-right,.dev-t-phone{animation:devIn 1s cubic-bezier(.22,1,.36,1) both;} .band .flow-node{backdrop-filter:none;} .cert,.badge3d,.tilt{will-change:auto;} }/* ============================================ mobile debug round two ==== From the device-emulated sweep: real-iOS behaviours the width-only pass could not see. *//* iOS Safari zooms the whole page when a focused field is under 16px and does not zoom back out. Form fields meet the threshold on touch widths. */ @media(max-width:900px){ .field input,.field select,.field textarea{font-size:1rem;} }/* The open menu owns the touch: page scroll locks, and the panel's own scroll does not chain to the document when it runs out. */ html.menu-open{overflow:hidden;} .mnav-panel{overscroll-behavior:contain;}/* Contract tables keep their identity while scrolled: the symbol column holds the left edge. */ @media(max-width:700px){ .spec th:first-child,.spec td:first-child{ position:sticky;left:0;z-index:2;background:var(--card); box-shadow:6px 0 10px -7px rgba(13,27,58,.3);} .spec thead th:first-child{background:var(--bg-alt);} }/* The banner exit and the body reflow now happen together: both instant on mobile, so content no longer jumps under a still-sliding banner. */ @media(max-width:900px){ .util{transition:opacity .2s ease;} }/* Red and green deltas were unreadable on the dark theme's gold band. *//* Trade buttons reach tap height without regaining width. */ @media(max-width:430px){ .qtable .btn{min-height:2.6rem;} }/* Four pills as a 2x2 block instead of a wrap with an orphan. */ @media(max-width:560px){ .mc-seg{display:grid;grid-template-columns:1fr 1fr;} } /* In the hero the city is the backdrop, so it carries no frame and its drawing runs on load rather than on scroll. */ @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} /* --------------------------------------------------------- the holds --- What the site says it is not publishing yet. Quiet, not an apology. */ .hold{background:var(--card);border:1px dashed var(--gold-soft);border-radius:var(--r); padding:1.4rem 1.55rem;max-width:34rem;margin-top:1.75rem;} .hold p{margin:0;color:var(--ink-soft);font-size:.9375rem;} .hold b{font-family:var(--display);display:block;font-size:.6875rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;} .band .hold{background:rgba(255,255,255,.06);border-color:rgba(201,178,122,.5);} .band .hold p{color:rgba(255,255,255,.75);} .band .hold b{color:var(--gold-soft);}/* A pending registry value sits in the same column as a real one, set in the muted face so it never reads as a figure. */ .kv li i{font-style:normal;color:var(--muted);text-align:right;font-size:.75rem;max-width:14rem;font-weight:400;}/* ------------------------------------------------------------- form --- */ .form-note{font-size:.8125rem;color:var(--muted);margin:.25rem 0 0;} .form-route{font-size:.875rem;color:var(--ink-soft);margin:1.5rem 0 0; border-top:1px solid var(--rule);padding-top:1.25rem;}/* -------------------------------------------------- reduced motion ---- */ @media(prefers-reduced-motion:reduce){ }/* Screenshot harness. ?anim=off settles every timed state at once: headless Chrome's virtual clock does not advance CSS transitions, so a page shot mid-sequence photographs half drawn. Readers never see it. */ .anim-off *,.anim-off *::before,.anim-off *::after{ animation-duration:0s !important;animation-delay:0s !important; transition-duration:0s !important;transition-delay:0s !important;}/* The masthead carries all five programmes by name, plus the two pages about the group. That is a longer row than the broker site's, so it is set tighter between 1180 and 1400 and the secondary control stands down there; the amber call to action never does. */ .nav a{white-space:nowrap;}/* The broker bar swaps to a menu below 1180. This one carries a longer row, so it swaps at 1240, which is where it stops fitting. */ @media(max-width:1239px){.nav{display:none;}.mnav{display:block;}} @media(min-width:1240px){ .nav{gap:.95rem;} .nav a{font-size:.8125rem;}/* The shell is 78rem at every width, so a wider screen buys the row no room: seven named programmes and pages leave space for one control beside them, and that is the amber one. Partner Area keeps its place in the footer and in the menu, and it is a placeholder anchor until a real URL exists anyway. */ .head-cta .btn-line{display:none;}}/* ------------------------------------------------------ firm photographs --- One city per firm on the firms page, framed the way the broker site frames its own imagery: the house radius, a hairline border and the same lift as a card. */ /* ----------------------------------------------------- the firm cities --- Each city is a card: it rises into place the first time it is read, and lifts under the pointer with the photograph easing up behind the frame. The two movements live on different elements on purpose. The arrival transform sits on the figure and the hover transform on the frame inside it, because when both were on one element the settled state (.in ... transform:none) came later in the file and cancelled the hover. */ .firm-shot{margin:0;opacity:0;transform:translateY(26px); transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1);} .js-reveal.in .firm-shot,.in .firm-shot,.anim-off .firm-shot, .no-js .firm-shot{opacity:1;transform:none;} .firm-shot-frame{display:block;border-radius:var(--r);overflow:hidden; border:1px solid var(--rule);box-shadow:var(--shadow-md);background:var(--card); transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .3s ease;} .firm-shot img{width:100%;height:auto;display:block; transition:transform .9s cubic-bezier(.22,1,.36,1);} .firm-shot-frame:hover{box-shadow:var(--shadow-lg);border-color:var(--gold-soft);} .firm-shot-frame:hover img{transform:scale(1.045);} @media(prefers-reduced-motion:reduce){ .firm-shot{opacity:1;transform:none;transition:none;} .firm-shot-frame,.firm-shot img{transition:none;} .firm-shot-frame:hover img{transform:none;} } /* ------------------------------------------------- the certificate --- The rendered certificate, taken from the broker repo as it stands today: it now carries the red specimen band (broker 052e667). Extracted with extract_component.py so the mobile and reduced-motion rules stay inside their media queries. */ .cert-stage{perspective:1300px;perspective-origin:62% 45%;padding:1.5rem 0; width:104%;margin-left:-4%; /* Entrance and float live here as plain translateY, so hover on the sheet itself never fights them. */ animation:certIn 1s cubic-bezier(.22,1,.36,1) both, certFloat 9s ease-in-out 1s infinite;} .cert{ position:relative;margin:0;overflow:hidden;padding:9px; aspect-ratio:297 / 210; /* A4, landscape */ background:linear-gradient(172deg,#112240 0%,#0a1730 48%,#050b18 100%); border:1px solid rgba(201,178,122,.6);border-radius:3px; box-shadow:0 54px 96px -44px rgba(0,0,0,.95), 0 8px 22px -10px rgba(0,0,0,.6), inset 0 0 70px rgba(201,178,122,.06); transform:rotateY(-24deg) rotateX(4deg) rotate(-1.2deg); transform-style:preserve-3d;will-change:transform; transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .7s ease; } .cert-stage:hover .cert{ transform:rotateY(-5deg) rotateX(1.5deg) rotate(-.4deg) translateY(-10px) scale(1.04); box-shadow:0 66px 110px -40px rgba(0,0,0,.98),0 10px 26px -8px rgba(0,0,0,.6), inset 0 0 80px rgba(201,178,122,.12); } .cert-guilloche{ position:absolute;inset:0;pointer-events:none;opacity:.9; background: repeating-linear-gradient(38deg,rgba(201,178,122,.12) 0 1px,transparent 1px 6px), repeating-linear-gradient(-38deg,rgba(201,178,122,.1) 0 1px,transparent 1px 8px), repeating-radial-gradient(circle at 50% 44%,rgba(201,178,122,.13) 0 1px,transparent 1px 13px); -webkit-mask-image:radial-gradient(135% 108% at 50% 50%,#000 34%,transparent 90%); mask-image:radial-gradient(135% 108% at 50% 50%,#000 34%,transparent 90%); } .cert-inner{ position:absolute;inset:9px;padding:1.35rem 1.5rem 1rem; display:flex;flex-direction:column; border:1px solid rgba(201,178,122,.5); box-shadow:inset 0 0 0 3px rgba(5,11,24,.9),inset 0 0 0 4px rgba(201,178,122,.28); } .cert-inner::before,.cert-inner::after{content:'';position:absolute;width:18px;height:18px;pointer-events:none;} .cert-inner::before{top:7px;left:7px;border-top:2px solid var(--gold-soft);border-left:2px solid var(--gold-soft);} .cert-inner::after{bottom:7px;right:7px;border-bottom:2px solid var(--gold-soft);border-right:2px solid var(--gold-soft);} .cert-top{display:flex;align-items:center;gap:.9rem;padding-bottom:.7rem;} .cert-rule-top{height:0;border-top:1px solid rgba(201,178,122,.45); box-shadow:0 3px 0 -2px rgba(201,178,122,.3);margin-bottom:.9rem;} .cert-seal{width:42px;height:42px;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7));} .cert-titles{min-width:0;} .cert-issuer{display:block;font-family:var(--display);font-size:.5rem;font-weight:700; letter-spacing:.3em;text-transform:uppercase;color:var(--gold-soft);} .cert-kind{margin-top:.22rem;font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;color:#fff;} .cert-sub{display:block;margin-top:.18rem;font-size:.5625rem;letter-spacing:.06em; color:rgba(255,255,255,.45);} .cert-rows{flex:1;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr; gap:0 1.75rem;align-content:space-evenly;} .cert-rows > div{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem; padding:.34rem 0;border-bottom:1px dotted rgba(201,178,122,.3);} .cert-rows dt{margin:0;font-size:.625rem;color:rgba(255,255,255,.5);white-space:nowrap;} .cert-rows dd{margin:0;font-family:var(--display);font-size:.625rem;font-weight:700; color:#fff;text-align:right;} .cert-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem; margin-top:.5rem;} .cert-sign{flex:1;max-width:11rem;display:block;} .cert-sign-line{display:block;border-bottom:1px solid rgba(255,255,255,.32);height:1.1rem;} .cert-sign-cap{display:block;margin-top:.25rem;font-size:.5rem;letter-spacing:.08em; text-transform:uppercase;color:rgba(255,255,255,.4);} .cert-rosette{width:3.1rem;height:3.1rem;flex-shrink:0;color:rgba(201,178,122,.6); align-self:center;} .cert-rosette svg{width:100%;height:100%;} .cert-stamp{position:absolute;pointer-events:none;user-select:none;z-index:4;} .cert-stamp-ribbon{top:0;right:0;width:21%;aspect-ratio:1;clip-path:inset(0);} .cert-stamp-ribbon span{ position:absolute;display:block;width:141.42%;left:-20.71%;top:50%; transform:translateY(-50%) rotate(45deg); background:linear-gradient(180deg,#e8503e,#b52a1d); color:#fff;text-align:center;padding:.26rem 0; font-family:var(--display);font-size:.5rem;font-weight:800; letter-spacing:.24em;text-transform:uppercase;text-indent:.24em; box-shadow:0 2px 9px rgba(0,0,0,.55);} @media(max-width:760px){.cert-stage{width:auto;margin-left:0;animation:none;} .cert-stamp-ribbon{width:30%;} .cert{aspect-ratio:auto;transform:none;} .cert-stage:hover .cert{transform:none;} .cert-issuer{font-size:.625rem;} .cert-sub{font-size:.6875rem;} .cert-rows dt,.cert-rows dd{font-size:.75rem;} .cert-sign-cap{font-size:.625rem;} .cert-inner{position:relative;inset:auto;padding:1.1rem 1rem;} .cert-rows{grid-template-columns:1fr;} .cert-foot{flex-wrap:wrap;gap:.75rem;}} @media(prefers-reduced-motion:reduce){.cert-stage{animation:none;}} .cert-issuer,.cert-no{color:var(--yellow);} @keyframes certIn{ from{opacity:0;transform:translateY(42px);} to {opacity:1;transform:translateY(0);} } @keyframes certFloat{ 0%,100%{transform:translateY(0);} 50% {transform:translateY(-12px);} } /* ------------------------------------------------------- the cursor --- A dot on the pointer and a soft field trailing it, from the broker site. The native pointer is hidden only while the custom one is mounted, and the whole thing stands down for reduced motion. */ html.cur-on,html.cur-on *{cursor:none !important;} html.cur-on input,html.cur-on textarea,html.cur-on select{cursor:text !important;} .cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;} .cur-glow{ position:absolute;left:0;top:0;width:34rem;height:34rem; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle closest-side, rgba(232,128,26,.16) 0%,rgba(232,128,26,.09) 26%,rgba(232,128,26,.04) 48%,transparent 72%); transition:opacity .3s ease; } .cur-dot{ position:absolute;left:0;top:0;width:9px;height:9px; transform:translate(-50%,-50%);border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(232,128,26,.22),0 0 14px 2px rgba(232,128,26,.55); transition:width .18s ease,height .18s ease,background-color .18s ease; } .cur.on-link .cur-dot{width:26px;height:26px;background:rgba(232,128,26,.28); box-shadow:0 0 0 1px var(--amber),0 0 22px 4px rgba(232,128,26,.4);} [data-theme='dark'] .cur-glow{ background:radial-gradient(circle closest-side, rgba(245,148,43,.2) 0%,rgba(245,148,43,.11) 26%,rgba(245,148,43,.05) 48%,transparent 72%); } @media(prefers-reduced-motion:reduce){.cur{display:none;}} .cur-dot{background:var(--yellow); box-shadow:0 0 0 3px rgba(247,211,42,.24),0 0 14px 2px rgba(247,211,42,.55);} .cur.on-link .cur-dot{background:rgba(247,211,42,.3); box-shadow:0 0 0 1px var(--yellow),0 0 22px 4px rgba(247,211,42,.45);} .cur-glow{background:radial-gradient(circle closest-side, rgba(247,211,42,.18) 0%,rgba(247,211,42,.1) 26%,rgba(247,211,42,.04) 48%,transparent 72%);} [data-theme='dark'] .cur-glow{background:radial-gradient(circle closest-side, rgba(251,229,118,.2) 0%,rgba(251,229,118,.11) 26%,rgba(251,229,118,.05) 48%,transparent 72%);} /* ----------------------------------------------- steps and the tilt --- Both taken from the broker sheet: the numbered step cards it uses for a sequence, and the per-element perspective its panels turn in under the pointer. */ .steps{display:grid;gap:1.25rem;} @media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);}} .step{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:1.75rem;} .step-n{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;background:var(--amber);color:var(--amber-ink); font-family:var(--display);font-weight:800;font-size:1rem;margin-bottom:1.1rem;} .step-n{background:var(--yellow);color:var(--yellow-ink);} .step{ border:0 !important; background:var(--card); box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-30px * var(--lift)) rgba(13,27,58,.42), 0 calc(6px * var(--lift)) calc(16px * var(--lift)) calc(-8px * var(--lift)) rgba(13,27,58,.16); } [data-theme='dark'] .step{ box-shadow: 0 calc(34px * var(--lift)) calc(64px * var(--lift)) calc(-28px * var(--lift)) rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.07); } .tilt-wrap{perspective:1400px;} .step-art{display:block;width:100%;max-width:9.5rem;height:auto; color:var(--amber);opacity:.9;margin:.25rem 0 1.25rem;} [data-theme='dark'] .step-art{opacity:.95;} .step{display:flex;flex-direction:column;} .step .step-n{order:-1;} .step:hover{ transform:translateY(-5px); box-shadow: 0 calc(48px * var(--lift)) calc(80px * var(--lift)) calc(-34px * var(--lift)) rgba(13,27,58,.5), 0 8px 20px -10px rgba(13,27,58,.2); } [data-theme='dark'] .step:hover{ box-shadow:0 48px 84px -30px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.14); } @media(prefers-reduced-motion:reduce){.step:hover{transform:none;}} .step-art{transition:transform .35s cubic-bezier(.34,1.56,.64,1);} .step:hover .step-art{transform:translateY(-5px) scale(1.05);} @media(prefers-reduced-motion:reduce){.step-art path,.step-art rect,.step-art circle{stroke-dasharray:none !important;stroke-dashoffset:0 !important;animation:none !important;} .step:hover .step-art{transform:none;}} .step-art{color:var(--yellow);} /* ==================================================== mobile pass, 19/08 === Measured on the live site at 360x640 and 390x844. Everything here is phone-specific; nothing above this line changes. Kept in step with artemisiamarkets.com, which carries the same two blocks. */ /* --- the regulatory band stops floating on a phone ---------------------- As a fixed overlay it took 125px of a 640px screen before a word of the site, and the offset it wrote into --reg-h is what left the masthead parked below the top edge whenever that value went stale. In the flow it scrolls away by itself, the masthead sticks to 0, and the type goes back up to a size a person can read. */ @media(max-width:700px){ .util{position:static;max-height:none;overflow:visible; box-shadow:none;transition:none;} .util.gone{display:none;} .util .shell{padding-block:.75rem;gap:.75rem;} .util-disc p{font-size:.75rem;line-height:1.5;} body{padding-top:0;} .head{top:0;} } /* --- the arrival notice becomes a sheet --------------------------------- The panel is sized for a desktop dialog. On a 360x640 screen its text runs past the fold and both controls end up inside a nested scroller whose bar fades out on a phone, so the reader sees a wall of text and no button. The sheet fills the screen, the text scrolls, and the actions stay on the glass. The full-screen blur goes with it -- it is the most expensive paint on the first frame a phone ever draws. */ @media(max-width:700px){ .jn{padding:0;align-items:stretch;justify-content:stretch; background:rgba(8,18,38,.94);backdrop-filter:none;-webkit-backdrop-filter:none;} .jn-panel{width:100%;max-width:none;height:100dvh;max-height:100dvh; border-radius:0;padding:1.35rem 1.15rem 0;overscroll-behavior:contain;} .jn-h{font-size:1.2rem;} .jn-panel p{font-size:.875rem;} .jn-actions{position:sticky;bottom:0;z-index:1;margin:1.25rem -1.15rem 0; padding:.9rem 1.15rem calc(.9rem + env(safe-area-inset-bottom)); background:var(--card);border-top:1px solid var(--rule);gap:.75rem 1.25rem;} .jn-actions .btn,.jn-leave{min-height:2.75rem;display:inline-flex;align-items:center;} } /* --- 44px is the floor for anything a thumb has to hit ------------------ Measured at 390: footer links were 32px tall, the masthead button 37. The footer's row gap comes down by the amount the padding adds, so the column keeps its height. */ @media(max-width:900px){ .foot ul{gap:.15rem;} .foot ul a{display:inline-block;padding-block:.6rem;} .foot-addr a{display:inline-block;padding-block:.6rem;} .rt{min-height:2.75rem;} .head-cta .btn{min-height:2.75rem;display:inline-flex;align-items:center;} .brand{display:inline-flex;align-items:center;min-height:2.75rem;} .util-x{width:2.75rem;height:2.75rem;} } /* The rule above restores a display value to `.head-cta .btn`, which is the same specificity as the rule that hides the outline button on a narrow masthead. Re-assert the hide, or Log in comes back and pushes the burger off the right edge. */ @media(max-width:560px){ .head-cta .btn-line{display:none;} }