, which stays Elementor's. * * font-family cannot be won by specificity, only by declaration: the kit sets a * face on and everything in the chrome inherits it. So the root names * --font-ui, and every text element in here names it again. */ /* The accent and the focus ring are rebound here, once, for the whole component. The brand blue is the chrome accent on every light surface, but it is only 1.75:1 against --sr-dark, so on this ground it would be an accent nobody can see and a focus ring nobody can find. Rebinding the two role tokens to their on-dark values means every rule below (and the sitewide :focus-visible in base.css) keeps naming the same role and simply resolves to the lifted blue inside the footer. No rule in this file needs to know which surface it is on. */ .sr-footer { --sr-chrome-accent: var(--sr-chrome-accent-on-dark); --sr-focus-ring: var(--sr-focus-ring-on-dark); position: relative; background: var(--sr-dark); color: var(--sr-ink-invert); font-family: var(--font-ui); font-size: var(--type-body); line-height: var(--leading-normal); padding-block: var(--space-9) var(--space-7); } /* The top edge. It is the header's accent rule, drawn from the left, at full width. It is also what makes the handoff from a dark section above legible: with no border and no shadow, a cinema page ending on a dark band meets the footer at a rule rather than at a colour step, so there is no seam to notice. */ .sr-footer::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: var(--rule); background: linear-gradient(to right, var(--sr-chrome-accent), transparent); } /* ------------------------------------------------------------------- layout */ /* Left rail is narrower than the field it faces. The rail has to hold the Schedule Consultation pill without wrapping it, which is what sets the ratio; the four columns divide the rest. Fractions, so no width is guessed in px. */ .sr-footer .sr-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); grid-template-areas: "brand cols" "proof social" "legal legal"; column-gap: var(--space-9); row-gap: var(--space-9); max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .sr-footer .sr-footer__brand { grid-area: brand; display: grid; gap: var(--space-5); justify-items: start; align-content: start; } /* The same box as the header's logo, and for the same reason: see --sr-brand-logo-h in tokens.css. It was --space-8 (3rem) while the mark was the retired lockup, whose file box carried 55% air above and below the ink. The kit file is ink cropped, so 3rem here would have drawn a mark half again as large as the header's. */ .sr-footer .sr-footer__mark { display: block; width: auto; height: var(--sr-brand-logo-h); } .sr-footer .sr-footer__cols { grid-area: cols; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } .sr-footer .sr-footer__accreditations { grid-area: proof; display: grid; gap: var(--space-7); align-content: start; } /* Sits directly under the four columns, aligned to their left edge, so the six channels read as one more row of destinations rather than as decoration. */ .sr-footer .sr-social { grid-area: social; align-self: start; } .sr-footer .sr-footer__legal { grid-area: legal; } /* --------------------------------------------------------------- typography */ /* A column heading is a label, not a heading in the reading sense, so it takes the same caption-caps treatment the drawer gives its groups. It is an

, so this rule has to answer every property `.elementor-kit-5 h2` declares: colour, family, size, weight, transform, line-height, letter-spacing. Leave any one of them out and the kit supplies it. Scoped under .sr-footer, so it is (0,2,0) against the kit's (0,1,1) and wins on every one of them. / .sr-footer .sr-footerheading { margin: 0 0 var(--space-4); color: var(--sr-ink-invert-faint); font-family: var(--font-ui); font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); line-height: var(--leading-snug); text-transform: uppercase; word-spacing: normal; } .sr-footer .sr-footerlist, .sr-footer .sr-footerlegal-list, .sr-footer .sr-badges, .sr-footer .sr-exchanges, .sr-footer .sr-social { margin: 0; padding: 0; list-style: none; } / ---------------------------------------------------------------- link ink / / The one rule that matters in this file. * * base.css sets a { color: var(--sr-brand) }, Elementor's kit sets * `.elementor-kit-5 a { color: #0a0557 }` and `.elementor-kit-5 a:hover`, and * any block, plugin or editor stylesheet loaded after either can set a link * colour of its own. The old footer's legal links inherited exactly such a dark * colour and disappeared against the dark ground. * * Two things close that off. Pinning :link and :visited rather than the bare * element selector, so a later a:visited rule at the same specificity can no * longer win on the element selector alone. And scoping under .sr-footer * .sr-footerinner, which puts the resting state at (0,3,1) and the hover * state at (0,3,1) too, both above the kit's (0,2,1) hover. The only colours * nameable here are the inverse ink and --sr-chrome-accent, which the block root * has already rebound to its on-dark value, so both are legible on --sr-dark. * Nothing below may introduce a colour from outside that pair. / .sr-footer .sr-footerinner a:link, .sr-footer .sr-footerinner a:visited { color: var(--sr-ink-invert-soft); font-family: var(--font-ui); text-decoration: none; } .sr-footer .sr-footerinner a:hover, .sr-footer .sr-footerinner a:focus-visible { color: var(--sr-ink-invert); } .sr-footer :focus-visible { outline-offset: var(--space-1); } / The accent rule, drawn from the left, on every destination in the footer. Same motif as the open-group rule in the header, same duration, same easing. Buttons are excluded: they have a surface of their own and answer with it. / .sr-footer a:not(.sr-btn) { position: relative; display: inline-block; } .sr-footer a:not(.sr-btn)::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: calc(var(--rule) -1); height: var(--rule); border-radius: var(--radius-pill); background: var(--sr-chrome-accent); scale: 0 1; transform-origin: left center; transition: scale var(--dur-fast) var(--ease); } .sr-footer a:not(.sr-btn):hover::after, .sr-footer a:not(.sr-btn):focus-visible::after { scale: 1 1; } /* ------------------------------------------------------------------ buttons / / The primary CTA inverts here, and it has to. Elsewhere it is a brand-blue pill on white; on this navy ground the brand blue is 1.75:1 against the surface behind it, so a blue pill would be a shape you have to hunt for. White carries the fill instead and the brand blue arrives on hover, lifted for the ground, so the button still ends on the brand colour the rest of the site's CTAs wear. This is the one place a dark ink is correct in this component, because it sits on a light surface in both states. Specificity beats the :link pin above deliberately, and it is the only rule in the file allowed to do so. / .sr-footer .sr-footerinner .sr-btn--primary:link, .sr-footer .sr-footerinner .sr-btn--primary:visited { background: var(--sr-ink-invert); border-color: transparent; color: var(--sr-ink); } .sr-footer .sr-footerinner .sr-btn--primary:hover, .sr-footer .sr-footerinner .sr-btn--primary:focus-visible { background: var(--sr-chrome-accent); color: var(--sr-ink); box-shadow: none; } / -------------------------------------------------------------- menu columns / .sr-footer .sr-footerlist li + li { margin-top: var(--space-3); } .sr-footer .sr-footerlist a { font-family: var(--font-ui); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--leading-snug); } / ------------------------------------------------------ product logotypes / / The Products column is the flyout again, on the other ground. Same six products, same order, same menu; the same wells, the same shared baseline, the same left rule, the same optical registry out of tokens.css. What changes is the ink: every mark here is the REVERSED file, because this column sits on --sr-dark and the colour marks carry a navy wordmark that would leave a hole in the footer rather than a logotype. inc/nav.php picks the file; nothing in this stylesheet can recolour a raster, which is exactly why the choice is made there and not here. * * ShareRing Link and ShareRing Me now have a reversed mark of their own (the * brand's real lockup, ring plus "ShareRing" plus the product word), so all six * rows are logotypes here. The rules for a row with no mark are kept below * anyway: the registry is what decides, and a product added to the menu tomorrow * with no mark yet must still land on the baseline rather than break the column. * * The column finds itself with :has(), the same way the flyout panel does: the * menu_class is set before the items are known, so the rows are what declare * the list. / / Wells, not lines. The default column rhythm (--space-3 between text links) is built for one line of type; a logotype needs its own height plus air, and the air between two marks has to read as larger than the air inside either. / .sr-footer .sr-footerlist:has(.sr-product) li + li { margin-top: var(--space-2); } / The row is the flex container, and the anchor is its only item. That is what makes the rhythm even: left as an inline-block on a line of its own, every anchor sat on a text baseline and carried the line box's descender space under it, so a row with a mark in it came out 39px tall against a row with a name in it at 32px, and six rows meant to be a list read as three pairs. Blockified by the flex parent, there is no line box left to add anything, and every row is the well and nothing more. / .sr-footer .sr-footerlist:has(.sr-product) > li { display: flex; } / The mark's row. inline-flex, not flex, so the anchor is the width of its own mark: the accent rule this file draws under every destination then underlines the logotype rather than the whole column. / .sr-footer .sr-footerlist:has(.sr-product) > li.sr-product > a { display: inline-flex; / CENTRED, and this rule is the one that decides it: it out-specifies the .sr-footer .sr-product > a rule below, so leaving it at flex-start hung the mark and the wordmark off the top of the row and put the footer 1.1px out of alignment where the nav was 0.08px. Same fault, same fix, second surface. Height comes from the row token too, so the footer and the flyout are the same row drawn on two grounds rather than two rows that resemble each other. / align-items: center; min-height: var(--sr-product-row-h); } / A name with no mark, in the wordmark register rather than the column's regular body weight: beside four logotypes, a regular menu link reads as an item that failed to load. line-height is the well, so Inter Tight puts its baseline exactly where the marks put theirs. It also takes the full inverse ink rather than the soft one every other footer link wears, because it is standing in for a white logotype, not for a link. That is a deliberate override of the :link pin above, at (0,4,1), and the colour it names is still one of the two the pin allows. / .sr-footer .sr-footerinner .sr-footerlist:has(.sr-product) > li:not(.sr-product) > a:link, .sr-footer .sr-footerinner .sr-footerlist:has(.sr-product) > li:not(.sr-product) > a:visited { color: var(--sr-ink-invert); font-size: var(--type-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--sr-logo-well); } / The same two-piece row the header draws, off the same tokens, because it is the same composition on a different ground. See header.css for why the slot is printed even when a product has no mark. / .sr-footer .sr-product > a { min-height: var(--sr-product-row-h); display: flex; align-items: center; gap: var(--sr-mark-gap); } .sr-footer .sr-productmark { flex: 0 0 var(--sr-mark-col); width: var(--sr-mark-col); height: var(--sr-product-row-h); display: inline-flex; align-items: center; justify-content: center; } .sr-footer .sr-productmark-img { display: block; width: auto; height: auto; max-width: calc(var(--sr-mark-size) var(--sr-mark-scale, 1)); max-height: calc(var(--sr-mark-size) * var(--sr-mark-scale, 1)); object-fit: contain; } /* The wordmark sits on the row's centre by its CAP, not by its box. Centring the boxes is not the same thing: an ink-tight wordmark's box runs from the cap down past the descender, so its box centre is below the middle of the capitals and the mark beside it read low. This lifts each wordmark by the difference, which is half of whatever the box carries below the baseline, and it is a transform so it costs the layout nothing. --sr-logo-capmid-* is where each file's cap midline sits as a fraction of its own box, measured off the rendered artwork; the shift is the distance from there to the box's middle. / .sr-footer .sr-productword { display: block; flex: none; width: auto; height: var(--sr-logo-h); transform: translateY(calc(var(--sr-logo-h) (0.5 - var(--sr-logo-capmid, 0.5)))); } /* Every name a mark stands in for is still in the anchor, so the accessible name and the crawlable anchor text are still "DigitalMe", "MEXC", "LinkedIn". Clipped, not removed: display: none would take it out of the accessibility tree along with the pixels, and the link-inventory harness would lose a destination. One rule, because it is one idea. / .sr-footer .sr-productname, .sr-footer .sr-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } / --------------------------------------------------------- the Privacy Stack / / The blog has a name, and the name is not "Blog". Both are printed: the publication leads and the category captions it, so a reader scanning for the word they know still finds it, and the accessible name of the link reads "The Privacy Stack Blog". The destination is untouched; the menu still owns it. / .sr-footer .sr-stack { display: flex; flex-direction: column; } .sr-footer .sr-stackkind { color: var(--sr-ink-invert-faint); font-size: var(--type-badge); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); line-height: var(--leading-snug); text-transform: uppercase; } / ------------------------------------------------ DigitalMe paper rows / / The Resources column's two DigitalMe technical-paper links. inc/nav.php composes the same markup as the header flyout and picks the REVERSED white mark here, because this column sits on --sr-dark and the two-colour mark's navy "Digital" would leave a hole in the footer rather than a wordmark. The composition is NOT the header's one-line row, deliberately. This column is ~170px wide and the descriptor alone ("Technical Whitepaper") needs ~155px at the column's body size, so a side-by-side row can never hold one line: the descriptor wrapped beside the mark and the pair shipped visibly out of line. In a column this narrow the honest composition is a stack: wordmark on its own line, descriptor on the next, both flush to the column's left edge. No baseline coupling exists between the two lines, so the flex-baseline synthesis problem the header row has to answer (see header.css) never arises here. / .sr-footer .sr-paper { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); } / Same registry trims as the header: bottom trims the file's below-baseline air so the gap above is measured from the letters' feet; inline-start trims the left air so the ink starts on the column's edge, level with the other links. The right trim is moot in a stack and stays only so the box does not carry phantom width. / .sr-footer .sr-papermark { display: block; flex: none; width: auto; height: var(--sr-logo-h-digital-me); margin-bottom: calc(var(--sr-logo-h-digital-me) (var(--sr-logo-r-digital-me) - 1)); margin-inline-start: calc(var(--sr-logo-h-digital-me) * var(--sr-logo-x-digital-me) * -1); margin-inline-end: calc(var(--sr-logo-h-digital-me) * var(--sr-logo-rx-digital-me) * -1); } /* The descriptor reads as a peer of the other Resources links: the column's own body size and the soft inverse ink every footer link wears at rest, inherited from .sr-footerlist a, with only the family restated. The white wordmark is a fixed image, so it does not lift to full white on hover the way the descriptor text does; that is correct, a logo is not a link colour. / .sr-footer .sr-paperkind { font-family: var(--font-ui); } / --------------------------------------------------------------------- proof / / The certification marks: two discs of the same diameter, each in its own real colours on a matching white ground. * * A certification mark must not be recoloured to suit a background, so neither * mark's artwork is touched. What changes is the surface. ISO's seal is silver * and DIATF's is a black disc at 1.21:1 on the navy, so both are MOUNTED: an * identical light disc under each, where the ink reads. The mount is a surface, * not a recolour, which is the only honest way to place someone else's * certification mark on the wrong ground. * * Both li share the one `--mounted` modifier and the same box, so the two marks * come out the same diameter and the ACCREDITED row reads as a matched pair. Each * mounted mark is inset from its box by exactly the mount's padding, which is what * makes the outer circles agree. / .sr-footer .sr-seals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .sr-footer .sr-seals li { display: flex; align-items: center; justify-content: center; width: var(--sr-seal-h); height: var(--sr-seal-h); } .sr-footer .sr-sealsitem--mounted { padding: var(--space-2); border-radius: var(--radius-pill); background: var(--sr-canvas); } .sr-footer .sr-seal { display: block; width: auto; height: 100%; } / Credentials, not links. They read as chips: a hairline, a pill, no rule, no hover, nothing to click. That is the whole point of the difference. The one chip left in here is AUSTRAC, which is a registration and not a certification, and is a word and not a mark, for the reasons set out in footer.php. / .sr-footer .sr-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); } .sr-footer .sr-badges li { padding: var(--space-1) var(--space-3); border: var(--border-hairline-invert); border-radius: var(--radius-pill); color: var(--sr-ink-invert-soft); font-family: var(--font-ui); font-size: var(--type-caption); font-weight: var(--weight-medium); line-height: var(--leading-snug); white-space: nowrap; } / ---------------------------------------------------------------- exchanges / / Three exchange logos in a row, and the row is a line of type: what has to agree is the cap height of each wordmark and the baseline they all sit on, not the box each one arrived in. Both numbers come from the registry in tokens.css (--sr-ex-h, --sr-ex-b), measured off the files. * * flex-end plus a negative bottom margin is the trick, and it is the sideways * version of what the products column does with margin-top: each mark's box is * pushed down by the air its own file carries UNDER its wordmark, so what lands * on the row's bottom line is the ink's baseline rather than the file's edge. * MEXC carries 7% of its height under its letters, BitMart 32%; aligned on the * box, BitMart would float half a line above MEXC. / / The gap is --space-4 rather than the --space-5 the rest of the footer's rows take, because the rail this row sits in is a third of the grid and the three marks plus two --space-5 gaps are 16px wider than it: BitMart fell to a line of its own and read as an afterthought. Tightened, the three read as one shelf. They still wrap on the narrow rail below 900px, where they are meant to. / .sr-footer .sr-exchanges { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); } .sr-footer .sr-exchanges a { display: flex; align-items: flex-end; font-family: var(--font-ui); font-size: var(--type-caption); font-weight: var(--weight-medium); line-height: var(--leading-snug); } .sr-footer .sr-exchangelogo { display: block; width: auto; height: var(--sr-ex-h); margin-bottom: calc(var(--sr-ex-h) (var(--sr-ex-b) - 1)); } /* ------------------------------------------------------------------- social / / Six channels, one row, white marks. The colour is the hover. * * The client asked for the platforms' own colours. Two of the six are #000000 * marks (X, Medium) at 1.12:1 on this ground, so the colour set cannot be the * resting state without shipping two invisible links. White is the resting state * because it is the only value all six can share and be read; the brand colour * arrives on hover and on focus, on the link it belongs to, which is the whole of * the client's intent that physics will allow. See footer.php. * * Both marks are stacked in the same box and cross-faded, rather than one mark * being recoloured: these are third-party trademarks and the artwork is theirs. * The box is square and both files are contained inside it, so the row's rhythm * does not move when the LinkedIn bug (the one mark that is not on the 24px icon * grid) swaps. / .sr-footer .sr-social { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); } .sr-footer .sr-socialicon { position: relative; display: block; width: var(--sr-social-h); height: var(--sr-social-h); } .sr-footer .sr-socialmark { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--dur-fast) var(--ease); } .sr-footer .sr-socialmark--colour { opacity: 0; } .sr-footer .sr-sociallink:hover .sr-socialmark--colour, .sr-footer .sr-sociallink:focus-visible .sr-socialmark--colour { opacity: 1; } .sr-footer .sr-sociallink:hover .sr-socialmark--white, .sr-footer .sr-sociallink:focus-visible .sr-socialmark--white { opacity: 0; } / X and Medium are #000000 marks, and a black mark revealed on a navy ground is a link that vanishes when you point at it: the hover would ship the very bug the resting state was designed around. So those two, and only those two, bring a light disc with them when they turn colour. The mark is still the platform's own artwork in its own colour, and it is still legible, which is the only way both halves of the client's ask can be true at once. * * The disc is the surface the certification marks sit on, at icon scale: a plane * this footer already has, not a new one invented for two icons. It is drawn as a * spread shadow rather than as padding so the row's geometry does not move when * it appears. / .sr-footer .sr-sociallink { border-radius: var(--radius-pill); transition: box-shadow var(--dur-fast) var(--ease); } .sr-footer .sr-socialitem--plate .sr-sociallink:hover, .sr-footer .sr-socialitem--plate .sr-sociallink:focus-visible { box-shadow: 0 0 0 var(--space-2) var(--sr-canvas); background: var(--sr-canvas); } / -------------------------------------------------------------------- legal / .sr-footer .sr-footerlegal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding-top: var(--space-5); border-top: var(--border-hairline-invert); } .sr-footer .sr-footerlegal-list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); } .sr-footer .sr-footerlegal-list a { font-family: var(--font-ui); font-size: var(--type-caption); line-height: var(--leading-snug); } .sr-footer .sr-footercopy { margin: 0; max-width: none; color: var(--sr-ink-invert-faint); font-family: var(--font-ui); font-size: var(--type-caption); line-height: var(--leading-snug); } / ---------------------------------------------------------------------- 900 / / Tablet: the rail stops earning its width, so the brand takes the full row and the four columns fold to two by two. Proof and social stay paired. / @media (max-width: 900px) { .sr-footer .sr-footerinner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "brand brand" "cols cols" "proof social" "legal legal"; column-gap: var(--space-6); row-gap: var(--space-8); } .sr-footer .sr-footercols { gap: var(--space-8) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-footer .sr-social { align-self: start; justify-content: flex-end; } } / ---------------------------------------------------------------------- 560 / / Design target 390px: one column, everything stacked, the CTA full width the way the mobile drawer's CTAs are, and the legal row reading top to bottom. / @media (max-width: 560px) { .sr-footer .sr-footerinner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "cols" "proof" "social" "legal"; } .sr-footer .sr-footerbrand { justify-items: stretch; } .sr-footer .sr-footermark { justify-self: start; } / Stretched by the grid, not by width: 100%. base.css now resets every box to border-box, so the pill's own padding is already inside its width. / .sr-footer .sr-footerbrand .sr-btn { padding-block: var(--space-4); font-size: var(--type-body); } .sr-footer .sr-footercols { grid-template-columns: minmax(0, 1fr); } .sr-footer .sr-social { justify-content: flex-start; } .sr-footer .sr-footerlegal { flex-direction: column; align-items: flex-start; } } / * Rohan, 2026-09-01: "The icons for social media in the footer are blury and * the medium icon is not well represented." * * The blur is LinkedIn, and it is the only raster in the set: every other mark * is a 24x24 SVG, while linkedin-white.png is 64x59 and linkedin-colour.png is * 64x54. Neither is square, and .sr-socialmark stretches its box to 100% x * 100%, so the one bitmap in the row was being distorted as well as scaled. * object-fit keeps its own proportions; the marks are also larger now * (--sr-social-h 1.5rem -> 2rem), which is most of what "blurry" was. * * A 64px source at 32px is fine at 2x and soft at 3x. The real fix is a * LinkedIn SVG to match the other five, which the kit does not currently hold. / .sr-footer .sr-social__mark { object-fit: contain; } / * The seals are the real credential artwork now, 512px square, and they carry * their own dark disc, so they are NOT mounted on a light plate the way the old * cropped ISO seal was. Sized up to match: at the previous 3rem the mount * padding left about 32px of a 220px source, which is what "I still dont see * the accreditation images" was describing. */ .sr-footer .sr-seals { gap: var(--space-3); } .sr-footer .sr-seals li { width: auto; height: auto; } .sr-footer .sr-seal { width: var(--sr-seal-h); height: var(--sr-seal-h); border-radius: 50%; }