/* ========================================================================== ECR — social icon normalisation THE PROBLEM, MEASURED The top bar's eight icons were laid out by three different sets of metrics. At 1440px, before this file (element box, and distance from the top of the bar): bell fa fa-bell lh 22px h 22 top 10.0 facebook fa-brands fa-facebook-f lh 22px h 22 top 11.1 X nectar-brands-x-twitter lh 12px h 12 top 14.0 mastodon nectar-brands-mastodon lh 12px h 12 top 14.0 instagram fa-brands fa-instagram lh 22px h 22 top 11.1 threads nectar-brands-threads lh 12px h 12 top 14.0 youtube fa fa-youtube-play lh 12px h 12 top 16.1 linkedin fa-brands fa-linkedin lh 22px h 22 top 11.1 Three line-heights, three vertical bands, and a 6px spread between the highest and lowest icon in a 40px bar. YouTube sat 5px below Facebook. WHY THE TWO FONTS BOTH HAVE TO STAY Salient's `nectar-brands` font has the modern marks (X, Mastodon, Threads, TikTok) but NO LinkedIn glyph; Font Awesome 4/6 has LinkedIn but no TikTok or Threads. Neither family covers the Group's eight accounts, so unifying on one is not available. This normalises across both instead, which is also what the brief asks for: the same VISUAL size and baseline, not the same intrinsic glyph box. HOW 1. Every icon becomes the same square flex box and is centred in it, which is what puts all eight on one baseline regardless of the font's own line-height and ascent. 2. Then each glyph gets an optical size, because at one font-size these marks do not read as one size: Mastodon and Threads are solid and fill their em box, Facebook's bare "f" is narrow and small, and YouTube's play-button is short and wide. Nothing here changes a URL, adds a library, or restyles anything outside the top bar, the mobile menu and the footer icon row. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE COMMON BOX — top bar and the mobile off-canvas copy of it -------------------------------------------------------------------------- */ /* Kept deliberately SHALLOW — one id, one class, one element. The optical sizes in section 2 are one class deeper, so they win on specificity without needing !important. A deeper selector here (`.sf-menu > li > a > .menu-title-text > i`) silently outranked every one of them. */ #header-secondary-outer .menu-title-text > i, #header-secondary-outer .sf-menu i, #slide-out-widget-area .menu-title-text > i, #mobile-menu .menu-title-text > i { display: inline-flex; align-items: center; justify-content: center; /* One box for all of them. The glyph is centred inside it, so the font's own line-height and ascent stop deciding where the icon sits. */ width: 20px; height: 20px; line-height: 1; vertical-align: middle; /* The optical baseline. Instagram is the reference mark — a square outline that fills its em box predictably — and 14.5px is where its ink measures the ~52px (at 3.5x) that every other mark is then tuned to. */ font-size: 14.5px; text-align: center; transition: opacity .2s ease, transform .2s ease; } /* -------------------------------------------------------------------------- 2. OPTICAL SIZES Each value is the size at which that glyph's ink matches the others, not a size chosen for its own sake. Solid marks go down, small-drawn marks go up. -------------------------------------------------------------------------- */ /* Solid, and they fill their em box — the two that read biggest before. */ #header-secondary-outer .sf-menu i.nectar-brands-mastodon, #slide-out-widget-area .menu-title-text i.nectar-brands-mastodon, #header-secondary-outer .sf-menu i.nectar-brands-threads, #slide-out-widget-area .menu-title-text i.nectar-brands-threads { font-size: 12px; } /* A wide, short rounded rectangle: at 14px it out-measures the round marks. */ #header-secondary-outer .sf-menu i.fa-youtube-play, #header-secondary-outer .sf-menu i.fa-youtube, #slide-out-widget-area .menu-title-text i.fa-youtube-play, #slide-out-widget-area .menu-title-text i.fa-youtube { font-size: 13px; } /* A bare "f" with no enclosing shape, so it is drawn small in the em box. */ #header-secondary-outer .sf-menu i.fa-facebook-f, #header-secondary-outer .sf-menu i.fa-facebook, #slide-out-widget-area .menu-title-text i.fa-facebook-f, #slide-out-widget-area .menu-title-text i.fa-facebook { font-size: 14px; } /* Thin diagonal strokes; needs the full box to hold its weight. */ #header-secondary-outer .sf-menu i.nectar-brands-x-twitter, #slide-out-widget-area .menu-title-text i.nectar-brands-x-twitter { font-size: 15px; } /* Two thick strokes and a dot, drawn small in the em box. */ #header-secondary-outer .sf-menu i.fa-linkedin, #header-secondary-outer .sf-menu i.fa-linkedin-in, #slide-out-widget-area .menu-title-text i.fa-linkedin, #slide-out-widget-area .menu-title-text i.fa-linkedin-in { font-size: 15px; } /* The note glyph is solid and slightly tall. */ #header-secondary-outer .sf-menu i.nectar-brands-tiktok, #slide-out-widget-area .menu-title-text i.nectar-brands-tiktok { font-size: 12.5px; } /* The Newsletter bell is a text link's icon, not a brand mark: it keeps its own smaller size so it does not compete with the eight, but it is pulled onto the same centre line as everything else. */ #header-secondary-outer .sf-menu i.fa-bell, #header-secondary-outer .sf-menu i.nectar-menu-icon { width: auto; font-size: 12px; } /* -------------------------------------------------------------------------- 3. SPACING AND HOVER Even gaps between the eight marks. The list is Salient's own
  • , so the spacing goes on the link's padding and not on the icon, which keeps the whole icon clickable. -------------------------------------------------------------------------- */ #header-secondary-outer .sf-menu > li > a { display: flex; align-items: center; } #header-secondary-outer .sf-menu > li > a:hover > .menu-title-text > i, #header-secondary-outer .sf-menu > li > a:focus-visible > .menu-title-text > i { opacity: .7; } /* A visible focus ring: these are the only links in the bar and they were reachable by keyboard with no indication of where the focus was. */ #header-secondary-outer .sf-menu > li > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; } /* -------------------------------------------------------------------------- 4. THE FOOTER ROW Salient's `[nectar_icon]` writes its size inline — `style="font-size:25px;line-height:25px;height:25px;width:25px"` — so the BOX is already uniform there and only the optical sizes are wrong, in the same direction and for the same reasons as the top bar. The box is left to the inline style; the glyph is centred in it and stepped where it needs to be. -------------------------------------------------------------------------- */ .nectar_icon_wrap .nectar_icon i { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1 !important; } .nectar_icon_wrap .nectar_icon i.nectar-brands-mastodon, .nectar_icon_wrap .nectar_icon i.nectar-brands-threads { font-size: 22px !important; } .nectar_icon_wrap .nectar_icon i.fa-youtube-play, .nectar_icon_wrap .nectar_icon i.fa-youtube { font-size: 22px !important; } .nectar_icon_wrap .nectar_icon i.fa-facebook, .nectar_icon_wrap .nectar_icon i.fa-facebook-f { font-size: 27px !important; } .nectar_icon_wrap .nectar_icon i.nectar-brands-x-twitter, .nectar_icon_wrap .nectar_icon i.nectar-brands-tiktok { font-size: 24px !important; } /* ============================================================================= TOP BAR GROUPING --------------------------------------------------------------------------- The bar reads as eleven evenly-spaced things — Newsletter, eight icons, two CTAs — because ALL of that spacing comes from one Salient rule: #header-secondary-outer .sf-menu > li > a { margin: 0 10px } measured live: every social `li` is 40px wide around a 20px icon, so 20px of air between marks, and the same 10px sits either side of Newsletter. The `li` itself has no padding and no margin, and the `ul` has no gap — so this is the ONE place the spacing is decided, and it is corrected here rather than by adding a third layer of margins on top of it. The tap target is not squeezed to buy the space: the margin becomes padding on the link, so the clickable box GROWS from 20px to 28px wide while the visual gap between icons halves from 20px to 12px. Three groups, with the separations that make them read as groups: Newsletter -> 16px to the icons icons -> 12px between marks icons -> 18px to the CTAs ========================================================================== */ /* The icons and Newsletter: less air, bigger target. */ #header-secondary-outer .sf-menu > li:not(.ecr-nav-cta) > a { margin-left: 2px; margin-right: 2px; padding-left: 4px; padding-right: 4px; } /* Newsletter is its own group, so it holds the icons off a little more. */ #header-secondary-outer .sf-menu > li.menu-item-has-icon:not(.ecr-nav-cta) > a { margin-right: 10px; } @media only screen and (max-width: 1200px) { #header-secondary-outer .sf-menu > li:not(.ecr-nav-cta) > a { margin-left: 1px; margin-right: 1px; padding-left: 3px; padding-right: 3px; } #header-secondary-outer .sf-menu > li.menu-item-has-icon:not(.ecr-nav-cta) > a { margin-right: 7px; } }