/* ============================================================================= Unified button system ============================================================================= One geometry for every text button on the site. Before this file there were thirteen independent definitions across nine stylesheets that agreed on nothing: heights ran 44px to 60px, font sizes 0.76rem to 18px, corner radii 0 to 15px, and half of them centred their label while the other half left it top-heavy. This file makes all of them the same box. WHAT THIS FILE OWNS: size, shape, typography, centring. WHAT IT DOES NOT OWN: colour. Fills, text colours and border colours stay in the stylesheet that defines each variant, so a variant can be restyled without coming back here. The split is enforced by the cascade, not by convention: - Geometry is declared at normal specificity in the base rule below. This file is the LAST stylesheet on every page, so those declarations beat the per-variant rules that used to set geometry. - `border-color` is declared separately inside `:where()`, which carries ZERO specificity. Every existing variant rule (`.ab-btn--gold`, `.btn-nav-secondary`, `.rz-mt5__btn--outline`, …) therefore still wins its own border colour, while buttons that never declared one fall back to transparent. That is what lets the base give all thirteen a 1px border — without which bordered buttons would stand 2px taller than borderless ones and the heights would not match. LOAD ORDER IS LORE: this file must stay last in every . Move it above a page stylesheet and that page's buttons silently revert to their old sizes. WIDTH IS DELIBERATELY NOT SET HERE. Buttons are as wide as their own label plus equal padding. The bespoke fixed widths that used to override that (250px hero minimum, 450px career CTA, 180px !important hero buttons, the 240/300px start-trading clamp) were removed at their source. Container-driven widths — the full-bleed card actions and the newsletter field — are layout, not button size, and are preserved below. ============================================================================= */ :root { /* 52px is the whole border box, border included — see the min-height note in the base rule. A single-line label is 12.8px of type on a 16px line, so it sits in the middle of that with ~17px clear above and below. */ --btn-height: 52px; --btn-pad-x: 32px; --btn-font-size: 0.8rem; --btn-line-height: 1.25; --btn-weight: 600; --btn-tracking: 0.13em; --btn-radius: 0; /* Optical, not geometric — this is what "the text is actually centred" costs. Ping AR + LT ships USE_TYPO_METRICS with ascent 1.0em and descent 0.6em: a 1.6em glyph box scaled for Arabic descenders. Centring that box centres space Latin caps never occupy, so an all-caps label lands (capHeight + descent - ascent) / 2 = (0.716 + 0.6 - 1.0) / 2 = 0.158em above the optical centre. The offset is a property of the metrics, not of line-height, so no line-height value fixes it — the box has to be nudged by exactly that much. Two rules used to apply this by hand, the nav pair and the hero CTAs; every other button on the site was left sitting high. It is one token now. */ --btn-cap-shift: 0.158em; } /* Arabic wants neither correction. The letterforms join, so tracking breaks them apart, and the glyphs already descend into the space the cap shift was invented to reclaim — shifting them down would push them low. */ .rtl { --btn-tracking: 0; --btn-cap-shift: 0px; } /* ----------------------------------------------------------------------------- The base. Every text button on the site is in this list. Adding a new button class? Add it here rather than giving it its own padding. -------------------------------------------------------------------------- */ .btn-nav-primary, .btn-nav-secondary, .hero-ctas .btn, .btn-stander, .btn-forex1, .btn-forex2, .newsletter-btn, .career-forex-btn, .ab-btn, .btn-acct-primary, .rz-ct-submit, .rz-fund__btn, .rz-mt5__btn, .rz-plat-card__btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; vertical-align: middle; min-height: var(--btn-height); /* Height comes from min-height on the border box, never from vertical padding, so a variant that carries a border and one that does not still measure the same. padding-top is the cap shift doubled: the label is centred in what is left of the content box, so half of any top padding is what actually reaches it. */ padding-block: calc(var(--btn-cap-shift) * 2) 0; padding-inline: var(--btn-pad-x); border-width: 1px; border-style: solid; border-radius: var(--btn-radius); font-family: inherit; font-size: var(--btn-font-size); font-weight: var(--btn-weight); line-height: var(--btn-line-height); letter-spacing: var(--btn-tracking); text-transform: uppercase; text-align: center; text-decoration: none; white-space: normal; cursor: pointer; } /* Zero-specificity default — see the header note. Any variant that declares its own border colour outranks this without needing !important. */ :where( .btn-nav-primary, .btn-nav-secondary, .hero-ctas .btn, .btn-stander, .btn-forex1, .btn-forex2, .newsletter-btn, .career-forex-btn, .ab-btn, .btn-acct-primary, .rz-ct-submit, .rz-fund__btn, .rz-mt5__btn, .rz-plat-card__btn ) { border-color: transparent; } /* ----------------------------------------------------------------------------- Container-driven widths. These three are sized by what encloses them, not by their label, so they keep their width and only take the height, type and shape from the base. Block-level flex rather than inline-flex so the inline box does not leave a gap under a full-bleed card action. -------------------------------------------------------------------------- */ .btn-acct-primary, .rz-plat-card__btn { display: flex; width: 100%; } /* Sits in the newsletter field row and is sized by that row. */ .newsletter-btn { display: flex; } /* ----------------------------------------------------------------------------- Two places that pre-empted the base and have to be told not to. -------------------------------------------------------------------------- */ /* The WhatsApp CTA is the one button the shared shift is wrong for. It holds a mark as well as a label, and the mark is a solid shape whose box centre already IS its optical centre — riding the whole flex line down would leave the icon 2px low. So the box is centred by measurement and the label alone takes the shift, landing on the icon's centre line. That is what makes the two read as one centred group rather than two separately centred boxes. position/top rather than transform: a transform on a text run can cost it subpixel antialiasing, and this offset is fractional. The token still drives it, so RTL zeroes both the box and the label together. */ .hero-ctas .btn-wa { padding-block: 0; } .hero-ctas .btn-wa > span:not(.wa-icon) { position: relative; top: var(--btn-cap-shift); } /* Offcanvas action pair. Height, type and shape are the base's; only the horizontal padding is reduced, because the drawer is ~310px of usable width and two 32px-padded buttons do not fit side by side. min-width:0 lets flex take it out of the padding rather than wrapping the label. */ .mobile-actions .btn-nav-primary, .mobile-actions .btn-nav-secondary { flex: 1 1 0; min-width: 0; padding-inline: 10px; }