, where Elementor must keep full control. * * Two exceptions, both of which are roots and so have nothing to be scoped * under: * - `.sr-skip`, whose colour is pinned with a repeated class (see below). * - `.sr-btn`, the one primitive shared by all three chrome blocks. It is * scoped under each of the three roots by name, which is also what keeps it * out of page bodies. * * Inheritance is not specificity: `.elementor-kit-5` sets font-family on * and no scoped rule of ours can out-specify an inherited value, it can only * declare its own. So every text element in the chrome names font-family * explicitly, and each root names it too as a backstop for anything (badges, * copy, burger label) that does not. */ /* ---------------------------------------------------------------- skip link */ /* First in tab order, and fixed rather than absolute, so it is reachable from anywhere on the page. It rides in from above its own resting position rather than teleporting from an off-canvas -9999px. */ .sr-skip { position: fixed; top: var(--space-4); inset-inline-start: var(--space-4); z-index: calc(var(--z-drawer) + 2); translate: 0 calc(-100% - var(--space-6)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-caption); font-weight: var(--weight-semibold); text-decoration: none; box-shadow: var(--shadow-md); transition: translate var(--dur-fast) var(--ease); } /* A second skip link is injected by WPCode snippet 991365, styled eyebrow indigo on brand blue: 1.68:1, which is invisible to the keyboard users it exists for. The snippet is not ours to edit, so its colours are corrected here. Same ink and ground as the theme's own skip link, so the two read as one control if both fire. Repeated class clears Elementor's kit link rules at (0,2,1). */ .shr-skip-link.shr-skip-link, .shr-skip-link.shr-skip-link:link, .shr-skip-link.shr-skip-link:visited, .shr-skip-link.shr-skip-link:focus { background: var(--sr-ink); color: var(--sr-ink-invert); font-family: var(--font-ui); text-decoration: none; } /* The skip link is a direct child of : it has no block root to be scoped under, and it is an , so `.elementor-kit-5 a` (0,1,1) and, worse, `.elementor-kit-5 a:hover` (0,2,1) both outrank a bare `.sr-skip` (0,1,0) and paint it dark navy on its own dark navy pill. Repeating the class is the cheapest honest way to buy specificity: `.sr-skip.sr-skip:hover` scores (0,3,0) and clears the kit's hover in every state, without !important and without naming Elementor's kit id, which is a database detail and could change. */ .sr-skip.sr-skip:link, .sr-skip.sr-skip:visited, .sr-skip.sr-skip:hover, .sr-skip.sr-skip:focus { color: var(--sr-ink-invert); } .sr-skip:focus { translate: 0 0; } /* ------------------------------------------------------------------ buttons */ /* The chrome's one button primitive. Named under each of the three roots it can appear in, which raises it above the kit's `a` rules and, at the same time, makes it structurally impossible for these rules to reach page content. */ .sr-header .sr-btn, .sr-drawer .sr-btn, .sr-footer .sr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border: var(--border-hairline); border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: var(--type-caption); font-weight: var(--weight-semibold); line-height: var(--leading-snug); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-base) var(--ease); } /* Brand blue, the fill the live site puts under every CTA. It presses to the deep indigo, which is the brand's own darker neighbour rather than a computed darkening of the blue. */ .sr-header .sr-btn--primary, .sr-drawer .sr-btn--primary { background: var(--sr-cta-surface); border-color: transparent; color: var(--sr-cta-ink); } /* Colour is restated on hover and focus because `.elementor-kit-5 a:hover` (0,2,1) would otherwise take the ink back on that one state. */ .sr-header .sr-btn--primary:hover, .sr-header .sr-btn--primary:focus-visible, .sr-drawer .sr-btn--primary:hover, .sr-drawer .sr-btn--primary:focus-visible { background: var(--sr-cta-surface-hover); color: var(--sr-cta-ink); box-shadow: var(--shadow-md); } /* The ghost is the primary's quiet half: it carries no fill at rest, and on hover it takes the tint plane and the brand ink, so the pair reads as one set with the blue rather than as two unrelated buttons. */ .sr-header .sr-btn--ghost, .sr-drawer .sr-btn--ghost { background: transparent; color: var(--sr-ink); } .sr-header .sr-btn--ghost:hover, .sr-header .sr-btn--ghost:focus-visible, .sr-drawer .sr-btn--ghost:hover, .sr-drawer .sr-btn--ghost:focus-visible { background: var(--sr-tint); color: var(--sr-brand); } /* ------------------------------------------------------------- header shell */ .sr-header { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--sr-canvas) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: var(--border-hairline); color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-body); line-height: var(--leading-normal); transition: box-shadow var(--dur-base) var(--ease), background-color var(--dur-base) var(--ease); } /* The only thing that changes on scroll. No shrinking, no colour flip: the page simply gains a shadow to sit under. */ .sr-header[data-scrolled="true"] { box-shadow: var(--shadow-sm); } /* * The header bar is CHROME, and chrome is allowed to be wider than the column * of text a page sets. It was capped at --content-max (1200px) like body * content, and the arithmetic simply did not work: logo 121 + gap + nav 811 + * gap + CTA 289 comes to 1269px of intrinsic width against a 1136px content * box once the 32px gutters are taken off. The 133px difference went off the * right-hand edge, so "Book a demo" — the primary call to action on every page * of the site — was cut in half at every viewport from 1025px to about 1420px. * Above 1420 it stopped being visible only because the page margin was wide * enough to swallow it; it was still overflowing. * * Widening the bar to 1440 recovers 80px of that at 1280. The other 53 comes * from tightening the nav below, and the burger breakpoint moves up to cover * the widths where it genuinely cannot fit. */ .sr-header .sr-header__inner { display: flex; align-items: center; gap: var(--space-4); max-width: min(1440px, 100%); min-height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter); } .sr-header .sr-header__logo { display: flex; align-items: center; flex: none; } /* The logo's box, from the token. The mark inside the file is centred in it and the file is a vector, so the only thing this rule does is choose the size, and the reasoning behind the size lives with the token in tokens.css. */ .sr-header .sr-header__logo img { display: block; width: auto; height: var(--sr-header-logo-h); } /* -------------------------------------------------------------- desktop nav */ /* The nav stretches the full height of the header, so a flyout hung off the bottom of an item meets the header's own border with no dead gap for the pointer to fall through. */ .sr-header .sr-nav { display: flex; align-self: stretch; } /* * No gap between items. Each link already carries 12px of padding on both * sides, so adjacent labels still sit 24px apart — the 8px gap on top of that * was buying 56px of width for a separation the eye cannot see. */ .sr-header .sr-nav__list { display: flex; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; } .sr-header .sr-nav__list > li { position: relative; display: flex; align-items: stretch; } /* A group heads a flyout instead of going anywhere, so it renders as a button rather than a link (see inc/nav.php). It is still the same object on the shelf, so it takes the same box: the button's own chrome is stripped, and every rule below addresses the pair. font-family is named rather than inherited, because the kit sets a face of its own on . */ .sr-header .sr-nav__list > li > a, .sr-header .sr-nav__list > li > .sr-group { position: relative; display: flex; align-items: center; padding-inline: var(--space-3); color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-body); font-weight: var(--weight-medium); letter-spacing: normal; line-height: var(--leading-snug); text-decoration: none; text-transform: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease); } /* `.elementor-kit-5 button` gives every bare button a blue fill, white ink, rounded corners and 13px of padding on all four sides. The group caption has to answer all of it, not just the background, or the flyout heads sit in blue pills. padding-block: 0 is what cancels the kit's padding shorthand, since the rule above only claims padding-inline. */ .sr-header .sr-nav__list > li > button.sr-group { appearance: none; margin: 0; padding-block: 0; border: 0; border-radius: 0; background: none; cursor: default; } /* The rule that runs along the bottom of an open group, drawn from the left in the accent. It is the seam between the header and the flyout it opens. */ .sr-header .sr-nav__list > li > a::before, .sr-header .sr-nav__list > li > .sr-group::before { content: ""; position: absolute; inset-inline: var(--space-3); bottom: 0; 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-header .sr-nav__list > li:hover > a::before, .sr-header .sr-nav__list > li:hover > .sr-group::before, .sr-header .sr-nav__list > li:focus-within > a::before, .sr-header .sr-nav__list > li:focus-within > .sr-group::before, .sr-header .sr-nav__list > li.current-menu-item > a::before, .sr-header .sr-nav__list > li.current-menu-parent > a::before, .sr-header .sr-nav__list > li.current-menu-parent > .sr-group::before, .sr-header .sr-nav__list > li.current-menu-ancestor > a::before, .sr-header .sr-nav__list > li.current-menu-ancestor > .sr-group::before { scale: 1 1; } .sr-header .sr-nav__list > li:hover > a, .sr-header .sr-nav__list > li:hover > .sr-group, .sr-header .sr-nav__list > li:focus-within > a, .sr-header .sr-nav__list > li:focus-within > .sr-group { color: var(--sr-brand); } /* The kit paints bare buttons blue on hover and focus too. The group caption keeps its own surface, which is no surface at all. */ .sr-header .sr-nav__list > li > button.sr-group:hover, .sr-header .sr-nav__list > li > button.sr-group:focus { background: none; } /* ------------------------------------------------------------- mega flyouts */ /* Opens on hover and on :focus-within. Focus on the group's own link is what makes the panel visible, and only then does the first child link become focusable, so Tab walks straight into an open panel. A panel that stayed visibility:hidden while its parent had focus could never be reached at all. Every panel runs as one column down the page. It used to wrap into columns after a row cap, which made Industry read landscape across nine items, and Products carried an exception that undid the wrap for its logotypes. Rohan asked on 2026-08-27 for all of them to run down the page, so the wrap and the exception that fought it both went and one flow remains. A panel is now as tall as its own list and no taller. */ .sr-header .sr-nav__list .sub-menu { position: absolute; top: 100%; inset-inline-start: 0; z-index: var(--z-header); display: grid; gap: var(--space-1) var(--space-5); min-width: var(--space-12); margin: 0; padding: var(--space-3); list-style: none; background: var(--sr-canvas); border: var(--border-hairline); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; translate: 0 calc(var(--space-1) * -1); transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease); } /* The last group sits close to the right edge, so its panel hangs the other way. */ .sr-header .sr-nav__list > li:last-child .sub-menu { inset-inline-start: auto; inset-inline-end: 0; } .sr-header .sr-nav__list > li:hover > .sub-menu, .sr-header .sr-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; translate: 0 0; } /* A dropdown row. * * These were a background tint on hover and nothing else, which tells you the * row is under the cursor but not that it leads anywhere. The rows now carry a * rule that grows from the left on hover and a label that shifts across to meet * it, so the gesture has a direction. The current page keeps that rule * permanently, which is what stops hover and you-are-here reading the same. * * padding-left leaves room for the rule so nothing reflows when it appears. */ .sr-header .sr-nav__list .sub-menu a { position: relative; display: flex; align-items: center; padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 10px); border-radius: var(--radius-md); color: var(--sr-ink); font-family: var(--font-ui); font-size: var(--type-body); font-weight: var(--weight-regular); letter-spacing: 0.006em; line-height: var(--leading-snug); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), font-weight var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease); } .sr-header .sr-nav__list .sub-menu a::before { content: ""; position: absolute; left: var(--space-2); top: 50%; width: 2px; height: 0; border-radius: 1px; background: var(--sr-brand); translate: 0 -50%; transition: height var(--dur-fast) var(--ease); } .sr-header .sr-nav__list .sub-menu a:hover::before, .sr-header .sr-nav__list .sub-menu a:focus-visible::before { height: 1.05em; } .sr-header .sr-nav__list .sub-menu a:hover, .sr-header .sr-nav__list .sub-menu a:focus-visible { background: var(--sr-tint); color: var(--sr-brand); font-weight: var(--weight-medium); translate: 3px 0; } /* The rule is the only thing the current page and a hovered row share, so the current page shows it at rest and does not move. */ .sr-header .sr-nav__list .sub-menu .current-menu-item > a::before { height: 1.05em; } @media (prefers-reduced-motion: reduce) { .sr-header .sr-nav__list .sub-menu a:hover, .sr-header .sr-nav__list .sub-menu a:focus-visible { translate: none; } } .sr-header .sr-nav__list .sub-menu .current-menu-item > a { color: var(--sr-brand); font-weight: var(--weight-medium); } /* ------------------------------------------------------ product logotypes */ /* The Products panel shows each product as its own logotype. Six rows, four marks and two names, and the job is to make those two kinds of row read as one list. * * The composition rests on two lines, one horizontal and one vertical. * * The horizontal one: every row is a well of the same height, and every mark in * it is laid on the same baseline, --sr-logo-baseline down from the top of that * well. The marks are NOT sized to a common width or a common box: each is set * to the height at which its own LETTERING comes out at --sr-logo-cap, the one * cap height the whole shelf is hung from (see the optical registry in * tokens.css), then dropped so its own baseline, not its bounding box, meets * the line. Equal boxes would give unequal letters, which is the ransom note; * equal letters give unequal boxes, which nobody reads as a fault, because the * boxes are transparent air and the letters are the mark. * * The vertical one arrived with the column, below. Stacked, the marks are read * down a left edge, and each file carries a different amount of transparent air * on its left. So each is pulled back by its own inset (--sr-logo-x) until the * INK starts on the rule, not the bounding box. * * The two products with no light-background logotype are set in type, on that * same baseline, on that same rule, at the same size a wordmark would occupy. * They are rows in the same list, not a gap where a logotype should be. * * The panel finds itself with :has(): a submenu class filter is never handed * its own items, so the rows are what declare the panel. */ /* The products panel keeps a larger gap than the text panels. This block used * to also reset grid-auto-flow, because the base rule wrapped panels into * columns and a column of logotypes was wrong; that wrap is gone, so only the * gap is left. * * The gap is --space-2 rather than --space-1. Each mark sits in a 2rem well, and * the air between wells has to be unmistakably larger than the air inside them * or six logotypes read as one crowded block. Words do not have that problem, * which is why the text panels stay tighter. */ .sr-header .sr-nav__list .sub-menu:has(.sr-product) { gap: var(--space-2); } /* The well. Both kinds of row take it, which is what makes them the same row. Each render keeps its own padding, so the well is added to it rather than fighting it. CENTRED, not flex-start. flex-start was right while every mark was dropped onto a shared baseline with a margin-top computed from its own artwork; the row now holds a mark slot and a wordmark that centre on the line instead, and this rule out-specifies the one that says so, so leaving it at flex-start hung both children off the top of the row and put the icons below the lettering. */ .sr-header .sr-nav__list .sub-menu:has(.sr-product) > li > a, .sr-drawer .sr-drawer__list .sub-menu:has(.sr-product) > li > a { display: flex; align-items: center; } /* A product row is the same height as every other row in the flyout, and says so in the same terms: the nav's line-height plus the padding the plain rows take. It used to be --sr-logo-well plus a smaller pad, which came out 4px taller and made the Products panel sit to a different rhythm than Solutions or Company. */ .sr-header .sr-nav__list .sub-menu:has(.sr-product) > li > a { min-height: calc(var(--sr-product-row-h) + var(--space-3) * 2); } .sr-drawer .sr-drawer__list .sub-menu:has(.sr-product) > li > a { min-height: calc(var(--sr-logo-well) + var(--space-3) * 2); } /* A name with no mark. Set in the wordmark register, semibold and tight, rather than in the panel'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. */ .sr-header .sr-nav__list .sub-menu:has(.sr-product) > li:not(.sr-product) > a, .sr-drawer .sr-drawer__list .sub-menu:has(.sr-product) > li:not(.sr-product) > a { display: block; color: var(--sr-ink); font-size: var(--type-body); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--sr-logo-well); } /* ------------------------------------------------ the product row, two pieces Rohan, 2026-09-01: "The icons are not aligned. make sure they all line up perfectly. Make the text do the same from the left after the icon." Both columns, which one file could not give. The row is a flex line of three things: a fixed-width slot holding the mark, the wordmark, and the name that screen readers keep and sighted readers do not see. The SLOT is what makes both lines true. It is the same width on every row whether or not the product has a mark in it, so every icon is centred on one vertical axis and every wordmark begins at the same distance from the row's left edge. Me Modules has no glyph and still lands its wordmark on the line, because the slot is printed empty rather than skipped. Vertical alignment is centring, not baselines. Six marks of six different proportions have no baseline in common: a ring, a diamond, a shield, a book and an eye are shapes, and a shape reads as aligned when its mass is centred, which is the same reasoning the STARS mark below already uses. The wordmarks keep their own heights off the optical registry so the LETTERING still matches across products; centring lines them up without touching that. */ .sr-header .sr-product > a, .sr-drawer .sr-product > a { min-height: var(--sr-product-row-h); display: flex; align-items: center; gap: var(--sr-mark-gap); } /* The slot is as tall as the ROW, not as wide as it. That is what makes every row the same height: the slot is then the tallest thing on the line whatever wordmark sits beside it, so the artwork stops having a vote on the pitch. min-height on the anchor cannot do this job, because the anchor is border-box and its padding swallows the minimum before the content sees it. The icon's own size stays tied to --sr-mark-col, so making the slot taller changes the rhythm and not the marks. */ .sr-header .sr-product__mark, .sr-drawer .sr-product__mark { 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; } /* Contained, never stretched, and scaled by the product's own optical factor so that a wide ring and an upright book carry the same visual weight in an identical square. */ .sr-header .sr-product__mark-img, .sr-drawer .sr-product__mark-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-header .sr-product__word, .sr-drawer .sr-product__word { 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)))); } /* ------------------------------------------------------------ program mark */ /* STARS. An icon beside a name, not a logotype instead of one: there is no STARS wordmark, so the words stay words. The star is centred on the type it rides with rather than dropped onto a baseline, because it is a shape, not a letterform, and a shape reads as aligned when its mass is centred. */ .sr-header .sr-mark, .sr-drawer .sr-mark, .sr-footer .sr-mark { display: inline-flex; align-items: center; gap: var(--space-2); } .sr-header .sr-mark__icon, .sr-drawer .sr-mark__icon, .sr-footer .sr-mark__icon { display: block; flex: none; width: auto; height: var(--sr-mark-h); } /* --------------------------------------------------------- the Privacy Stack */ /* The Newsroom flyout's blog row. The publication is called The Privacy Stack; "Blog" is the word a reader scans for, so both are printed, the name leading and the category captioning it under a second line. inc/nav.php composes the two spans (the same it composes for the footer's Resources column), and the accessible name of the link reads "The Privacy Stack Blog". The destination is untouched; the menu still owns it. The anchor is already a flex row (see .sub-menu a), so the stack is stood upright inside it. The caption is set at --type-badge, smaller than the footer's, because this row sits in a list of one-line flyout items rather than in a footer masthead: the name reads at the panel's own body size and the caption tucks under it without turning one row into two full lines of body copy. */ .sr-header .sr-stack, .sr-drawer .sr-stack { display: flex; flex-direction: column; } .sr-header .sr-stack__kind, .sr-drawer .sr-stack__kind { color: var(--sr-ink-soft); font-family: var(--font-ui); 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 two DigitalMe technical-paper links (Technical Whitepaper, Briefing Overview) show the DigitalMe wordmark where the words "DigitalMe" would be, then the paper's descriptor as visible text. inc/nav.php composes the row and picks the two-colour mark for this white ground; this only lays it out. * * Unlike the product rows, the mark does NOT replace the whole label: it stands * in for the first two words and a real descriptor follows it on the same line. * So the row is a baseline-aligned inline line, not a well: the wordmark's own * baseline is dropped onto the descriptor's text baseline the same way every * product mark is dropped onto the shelf's baseline, off the same registry * fractions, so the "Digital me" of the mark and the "Technical Whitepaper" * beside it sit on one line with one cap height (--sr-logo-cap, the cap of the * body type this row is set in). */ .sr-header .sr-paper, .sr-drawer .sr-paper { display: inline-flex; align-items: baseline; gap: var(--space-2); } /* Height from the registry (cap-matched to the row's text), so the wordmark's "D" is the cap height of "Technical Whitepaper" beside it. Three margins, all off measured registry fractions, all negative because they trim the file's own transparent air rather than adding anything: - bottom trims the below-baseline air (--sr-logo-r) so the flex line is sized to the letters' feet, not the file's box edge; - inline-start trims the left air (--sr-logo-x) so the wordmark's ink starts on the row's left edge, level with every other item in the panel; - inline-end trims the right air (--sr-logo-rx) so the gap to the descriptor is exactly the --space-2 above, not that plus whatever air the file carries. The baseline drop itself is the transform, NOT the bottom margin. In a flex container a replaced item's alignment baseline is synthesized from its BORDER box (css-align), so a negative bottom margin never moves it: the file's bottom air edge lands on the text baseline and the ink floats (1 - r) x height too high, which is exactly how the wordmark shipped out of line. The translateY paints the ink down by that same air so the letters' feet meet the descriptor's baseline; transforms do not move layout, so the margin trims above stay in charge of the line's size. The 0.035 is an optical correction, sighted against the descriptor at 3.4x (Rohan's call, 2026-07-16): the file's letter feet carry anti-aliased ink a couple of rows past the measured baseline row, so the geometrically exact drop reads about a pixel low. A fraction of the mark's height, not a px literal, so it scales with the registry height like every other trim here. */ .sr-header .sr-paper__mark, .sr-drawer .sr-paper__mark { 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); transform: translateY(calc(var(--sr-logo-h-digital-me) * (1 - var(--sr-logo-r-digital-me) - 0.035))); } /* The descriptor reads as a peer of the other Resources links: the panel's own body size, weight and ink, inherited from .sub-menu a, with only the family restated because the kit sets a face on . It is the meaningful part of the label, not a caption, so it is not shrunk or uppercased the way the Privacy Stack's category line is. */ .sr-header .sr-paper__kind, .sr-drawer .sr-paper__kind { font-family: var(--font-ui); } /* The old badge, refused. A customizer/WPCode snippet prints an 18px "me" eye favicon on the ::before of these two primary-menu items by their id class (.menu-item-991361 and .menu-item-991362, the Whitepaper and the Briefing Overview), which is the treatment the wordmark now replaces: a small eye set in front of the full DigitalMe wordmark says "me" twice and reads as a mark that failed to load. So the chrome refuses it here, the same way it refuses the DigitalMe plugin's NEW pill lower in this file, and for the same reason it can: the snippet's `content` is a plain "" with no !important, and a pseudo-element with no content is never generated, so there is nothing left for its background to paint into. The snippet is not edited; it still does what it does under any other theme. It targets only the primary menu, so only the nav and the drawer need answer it; the footer's paper items carry different ids and never had it. */ .sr-header .sr-has-paper > a::before, .sr-drawer .sr-has-paper > a::before { content: none; } /* The product's name, still in the anchor and still the accessible name and the crawlable anchor text. Clipped, not removed: display:none would take it out of the accessibility tree along with the pixels. */ .sr-header .sr-product__name, .sr-drawer .sr-product__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------- the NEW pill, and its removal */ /* There is no NEW pill any more. The client asked for it to go, and it is gone * at source: the menu item no longer carries the menu-new-pill class (item * 991636 in menu 63; its _menu_item_classes meta is now empty). That kills the * DigitalMe plugin's pill outright, because the plugin's whole stylesheet * (plugins/digital-me-landing/css/nav-pill.css) hangs off that one class, and * it kills it WITHOUT editing the plugin, which under any other theme still * does what it always did. * * The rules below are therefore not what removes the pill. They are what stops * it coming back. The class is one checkbox away in wp-admin (Appearance > * Menus > DigitalMe > CSS Classes), and the day somebody re-adds it, the * plugin would repaint BOTH of the things it draws off that class: a second * DigitalMe logotype on ::before, at a size that belongs to no shelf, over the * top of the theme's own; and a NEW badge on ::after in #FF3D8C, which is a * DigitalMe CINEMA colour, is not a ShareRing brand colour, and must never * appear in the sitewide chrome. So the chrome refuses both pseudo-elements * outright. * * content: none is what does it, and it does it without a specificity war: the * plugin's background-image carries !important, but its `content` does not, and * a pseudo-element with no content is never generated at all, so there is * nothing left for the !important to paint into. * * Both hooks are named: sr-new is the theme's own class, menu-new-pill is the * plugin's. Neither is on any menu item today; both are refused anyway. */ .sr-header .sr-new > a::before, .sr-header .menu-new-pill > a::before, .sr-drawer .sr-new > a::before, .sr-drawer .menu-new-pill > a::before, .sr-header .sr-new > a::after, .sr-header .menu-new-pill > a::after, .sr-drawer .sr-new > a::after, .sr-drawer .menu-new-pill > a::after { content: none; } /* --------------------------------------------------------------------- CTAs */ .sr-header .sr-header__cta { display: flex; align-items: center; gap: var(--space-3); margin-inline-start: auto; } /* ------------------------------------------------------------------- burger */ /* Another bare