/**
* Tolion — site chrome.
*
* The header is one Avada Theme Builder layout (post 197) shared by every
* page, so its styling belongs in one stylesheet loaded everywhere rather than
* in home.css and inner.css separately. It used to live in inner.css alone,
* which is why the homepage kept Avada's white dropdown panel and its white
* mobile toggle: those rules were scoped to `body.t-inner` and the homepage is
* the one page that does not carry that class.
*
* Tokens are declared on :root because this sheet has to work on every
* page. Since pass 33 this is the one place the palette lives: front.css
* aliases its --tf-* names to these and inner.css inherits them. The site
* was paper from pass 34 to pass 43; since pass 44 it is the lifted navy
* again (Martin, 2026-09-11: revert to the dark colouring that matches the
* app). The second block below restates the same set on the header and
* footer so the bookends hold whatever :root says.
*
* Loaded on every page as `tolion-chrome`; home.css and inner.css both depend
* on it, so anything either of them says about the header still wins.
*/
:root {
--t-h-ink: #111f5a;
--t-h-ink-rgb: 17, 31, 90;
--t-h-ink-2: #172a70;
--t-h-ink-2-rgb: 23, 42, 112;
--t-h-panel: #1f3a8c;
--t-h-panel-2: #2848a3;
--t-h-line: rgba(160, 190, 255, .22);
--t-h-line-2: rgba(160, 190, 255, .42);
--t-h-fg: #f2f5fd;
--t-h-fg-2: #c8d3ef;
--t-h-fg-3: #98a9d4;
--t-h-blue: #3f82ff;
--t-h-blue-lit: #8ab6ff;
--t-h-cyan: #42d8f8;
--t-h-green: #25de8b;
--t-h-amber: #ffa53a;
--t-h-violet: #a48fff;
--t-h-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
--t-h-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--t-h-wide: "wdth" 118;
--t-h-r: 16px;
/* The page measure, shared by every sheet (front.css, home.css, inner.css
and the footer below all read it). Flat 1240 up to a 1440 window, then
it takes 45% of the extra width and stops at 1720 — so a 1920 or 2560
screen no longer reads as a narrow column in a big room, without the
page filling the window (that was tried and rejected: everything grew). */
--t-measure: clamp(1240px, calc(1240px + (100vw - 1440px) * .45), 1720px);
}
/* The header and the footer are the brand's bookends and keep the navy the
rest of the site had until pass 34: the lion is white, and a paper page
between two navy bands still reads as Tolion. (front.css's header rule
reads these names directly, not its --tf-* aliases: an alias declared on
computes there and would carry the paper colour in.) .t-foot is
the link map functions.php prints above the Theme Builder footer band —
outside it, so it is named here too.
The --t-h-*-rgb pairs exist for the gradients that fade to the ground
(the inner masthead, the strip edges, the hero scrim): a `transparent`
stop fades through grey, so they need the ground's own channels. */
.fusion-tb-header,
.fusion-tb-footer,
.t-foot {
--t-h-ink: #111f5a;
--t-h-ink-rgb: 17, 31, 90;
--t-h-ink-2: #172a70;
--t-h-ink-2-rgb: 23, 42, 112;
--t-h-panel: #1f3a8c;
--t-h-panel-2: #2848a3;
--t-h-line: rgba(160, 190, 255, .22);
--t-h-line-2: rgba(160, 190, 255, .42);
--t-h-fg: #f2f5fd;
--t-h-fg-2: #c8d3ef;
--t-h-fg-3: #98a9d4;
--t-h-blue: #3f82ff;
--t-h-blue-lit: #8ab6ff;
--t-h-cyan: #42d8f8;
--t-h-green: #25de8b;
--t-h-amber: #ffa53a;
--t-h-violet: #a48fff;
}
/* ------------------------------------------------------------------ *
* 1. The header band
* ------------------------------------------------------------------ */
.fusion-tb-header .fusion-fullwidth,
.fusion-tb-header .fusion-flex-container {
background-color: var(--t-h-ink) !important;
background-image: none !important;
}
.fusion-tb-header {
border-bottom: 1px solid var(--t-h-line);
}
/* Luke, pass 48: "when you scroll down a page, the header shrinks slightly
and becomes a bit transparent". The container is Avada-sticky already
(sticky="on", transition offset 0): sticky-kit fixes it to the top and,
the moment the page has moved, adds .fusion-sticky-transition. So the
scrolled look is a state of that class — no script of ours.
Shrunk: the 10px band padding drops to 4px and the logo from 200 to 150px
(Avada already transitions .fusion-imageframe's max-width). Transparent:
the navy at .72 over a 6px blur: content passing beneath shows as a soft
ghost, which is the "slight" Luke asked for. (Three rounds of "still not
seeing it" were not the values — front.css re-asserted a solid band on
the two hand-built pages at equal specificity; see its :not() now.) The band's bottom rule moves onto the fixed
element, since the wrapper's own rule scrolls away with the spacer.
Padding here has to be !important: Avada writes --awb-padding-* inline
and the consuming rule is what we override. */
.fusion-tb-header .fusion-sticky-container:not(.fusion-sticky-spacer) {
transition: background-color .3s, padding .3s, box-shadow .3s, border-color .3s;
/* Luke, pass 90: "the header transition is a bit choppy on mobile". The
blur used to switch on with the class and interpolate over .3s, which
re-blurs the whole backdrop every frame of the shrink. It is on in
both states now: invisible at rest under the opaque navy, so there is
nothing to interpolate and no pop either way. */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.fusion-tb-header .fusion-fullwidth.fusion-sticky-transition {
padding-top: 4px !important;
padding-bottom: 4px !important;
background-color: rgba(var(--t-h-ink-rgb), .72) !important;
border-bottom: 1px solid var(--t-h-line);
box-shadow: 0 8px 28px -12px rgba(0, 0, 0, .45);
}
/* Avada eases the logo's max-width over .3s on the way down but .1s on the
way back up (fullwidth-sticky.css), so the logo popped to full size while
the band was still growing. One timing both ways (pass 90). */
.fusion-tb-header .fusion-sticky-container .fusion-imageframe {
transition: max-width .3s ease-in-out;
}
.fusion-tb-header .fusion-sticky-transition .fusion-imageframe {
max-width: 150px;
}
/* Below the 1060px collapse threshold the logo is an SVG ![]()
at 3× on a
phone, and animating its width re-rasterises it at every intermediate
size – the main cost of the shrink on a phone. There the width stays at
200px and the logo shrinks with a transform (compositor-only) plus a
negative margin that takes the same 16px out of the layout box, so the
column still ends at 58px and the toggle-to-band geometry of pass 55
holds (measured: logo 150 × 50, band 67, as before). */
@media (max-width: 1060px) {
.fusion-tb-header .fusion-sticky-container .fusion-imageframe {
transform-origin: left center;
transition: transform .3s ease-in-out, margin .3s ease-in-out;
}
.fusion-tb-header .fusion-sticky-transition .fusion-imageframe {
max-width: var(--awb-max-width);
transform: scale(.75);
margin-top: -8px;
margin-bottom: -8px;
}
}
/* Luke: "move the nav items up slightly when scrolled". The menu element
has a 10px top margin and each link a 25px top padding (both Theme
Builder values), which parks the text 14px below the logo's midline once
the band has shrunk. Scrolled, the margin goes and the padding drops to
15px, so text and logo share a centre line (measured: both at 29px). Desktop menu only — the
collapsed mobile menu has its own geometry in section 4. */
.fusion-tb-header .fusion-sticky-container .awb-menu:not(.collapse-enabled) {
transition: margin-top .3s;
}
.fusion-tb-header .fusion-sticky-container .awb-menu:not(.collapse-enabled) .awb-menu__main-a {
/* At rest the same inline 25px/0 padding sat the text 9px below the
logo's midline (text 54px, logo 45px in the 91px band). 16px/9px keeps
the link's bottom edge, and so the dropdown, exactly where it was and
centres the text on the logo (pass 50, Luke: "nav items slightly too
low"). */
padding-top: 16px !important;
padding-bottom: 9px !important;
transition: padding .3s;
}
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition .awb-menu:not(.collapse-enabled) {
margin-top: 0 !important;
}
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition .awb-menu:not(.collapse-enabled) .awb-menu__main-a {
padding-top: 15px !important;
padding-bottom: 0 !important;
}
/* The menu list carries a 60px minimum (--awb-min-height, inline) that would
otherwise hold the band at 79px with the smaller logo sitting high in it.
48px scrolled brings the band to about 67px (from 91), and the columns
centre their content so logo and nav share a midline in both states. */
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition .awb-menu__main-ul {
min-height: 48px;
}
.fusion-tb-header .fusion-sticky-container .fusion-column-wrapper.fusion-content-layout-column {
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
.fusion-tb-header .fusion-sticky-container:not(.fusion-sticky-spacer),
.fusion-tb-header .fusion-sticky-container .fusion-imageframe,
.fusion-tb-header .fusion-sticky-transition .fusion-imageframe {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 2. Top-level navigation
* ------------------------------------------------------------------ */
.fusion-tb-header .fusion-menu > li > a,
.fusion-tb-header .fusion-menu > li > a .menu-text {
color: var(--t-h-fg-2);
font-family: var(--t-h-sans);
font-weight: 500;
letter-spacing: .01em;
}
.fusion-tb-header .fusion-menu > li > a:hover .menu-text,
.fusion-tb-header .fusion-menu > li.current-menu-item > a .menu-text,
.fusion-tb-header .fusion-menu > li.current-menu-ancestor > a .menu-text {
color: var(--t-h-fg);
}
/* ------------------------------------------------------------------ *
* 3. Dropdowns
*
* Avada draws these as a white panel, which was right for the old light
* header and is wrong against ink.
*
* The hook is `.awb-menu__sub-ul`, not `.sub-menu`: the Theme Builder menu
* element emits its own BEM classes and never adds the classic WordPress ones,
* so a `.sub-menu` rule matches nothing here. The `` does carry
* `fusion-menu` alongside `awb-menu__main-ul`, which is why the top-level
* rules above work.
*
* The panel treatment is desktop-only. Collapsed, the same `sub-ul` is a
* nested block inside the open menu, where a bordered rounded card inside
* another bordered rounded card reads as a mistake.
* ------------------------------------------------------------------ */
.fusion-tb-header .awb-menu:not(.collapse-enabled) .awb-menu__sub-ul {
background-color: var(--t-h-panel) !important;
border: 1px solid var(--t-h-line) !important;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 24px 60px -32px rgba(0, 0, 0, .95);
}
.fusion-tb-header .awb-menu__sub-li {
background-color: transparent !important;
}
/* Avada's global submenu typography names Inter, so every dropdown item sat
in a different face from the top-level item that opened it. The family is
only stated here — the size and weight Avada gives them are fine. */
.fusion-tb-header .awb-menu__sub-a,
.fusion-tb-header .awb-menu__sub-a .menu-text {
background-color: transparent !important;
color: var(--t-h-fg-2) !important;
font-family: var(--t-h-sans) !important;
}
.fusion-tb-header .awb-menu__sub-a {
border-color: var(--t-h-line) !important;
}
.fusion-tb-header .awb-menu__sub-a:hover,
.fusion-tb-header .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a {
background-color: var(--t-h-panel-2) !important;
}
/* Avada wraps a *top-level* label in `.menu-text` but a submenu label in a bare
, so the `.menu-text` half of the rule above never matched down here
and hover fell through to Avada's own #1fb6d1 — a saturated cyan that appears
nowhere else in the header. Over a 300ms transition, on a list you sweep the
pointer down, that reads as the rows flashing. Naming the link and its own
span puts hover back on the near-white this file intends. Colour only: never
give these a font-family, because Avada draws menu icons as glyphs on the
same elements (gotcha 19). */
.fusion-tb-header .awb-menu__sub-a:hover,
.fusion-tb-header .awb-menu__sub-a:hover > span,
.fusion-tb-header .awb-menu__sub-a:focus-visible,
.fusion-tb-header .awb-menu__sub-a:focus-visible > span,
.fusion-tb-header .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a,
.fusion-tb-header .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a > span,
.fusion-tb-header .awb-menu__sub-a:hover .menu-text,
.fusion-tb-header .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a .menu-text {
color: var(--t-h-fg) !important;
}
/* Avada's separator between submenu rows is --awb-submenu-sep-color, #e2e2e2 —
a near-white hairline drawn for a white dropdown, and one of the brightest
things on the whole header. The variable is written inline on the menu
element and cannot be redefined (gotcha 9), so the consuming property is
overridden instead. */
.fusion-tb-header .awb-menu__sub-li {
border-bottom-color: var(--t-h-line);
}
/* Avada gives the rows `transition: all` over `--awb-transition-time`, 300ms
here. `all` is why a hover can animate more than the colour, and 300ms is
long enough that moving down three items has all three mid-fade at once.
Two properties, and fast enough to feel like a response rather than an
animation. */
.fusion-tb-header .awb-menu__sub-li,
.fusion-tb-header .awb-menu__sub-a,
.fusion-tb-header .awb-menu__sub-a:hover {
transition: background-color .12s ease, color .12s ease;
}
/* ------------------------------------------------------------------ *
* 4. The collapsed menu, and the height it is allowed to take
*
* Avada caps the open menu list only once the sticky header has passed its
* transition threshold:
*
* .fusion-sticky-transition .collapse-enabled.mobile-size-full-absolute
* :not(.mobile-mode-always-expanded) .awb-menu__main-ul
* { max-height: var(--awb-mobile-sticky-max-height) }
*
* where that variable resolves to 340px on this header.
*
* So an open menu with a submenu expanded (505px tall) is fine until you
* scroll, at which point it is chopped to 340px mid-gesture. The cap is real
* but arbitrary, and the list is `overflow-y: auto` with no visible
* affordance, so it reads as the menu being cut off.
*
* Fixed by setting the cap from the viewport instead, in both states — so
* nothing resizes while the reader is looking at it, and the menu only ever
* scrolls when it genuinely cannot fit. The variable itself cannot be
* redefined here: Avada writes it inline on the menu element, and an inline
* custom property beats any stylesheet. Override the consuming property.
* ------------------------------------------------------------------ */
.fusion-tb-header .fusion-sticky-container .awb-menu.collapse-enabled:not(.mobile-mode-always-expanded) .awb-menu__main-ul {
max-height: calc(100vh - 120px);
max-height: calc(100dvh - 120px);
overscroll-behavior: contain;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-ul {
background-color: var(--t-h-ink-2) !important;
border: 1px solid var(--t-h-line);
border-radius: 12px;
overflow-x: hidden;
}
/* Type. Avada sets the collapsed menu from its own mobile settings — 24px
for both levels, weight 400 on the sub-items, a 60px sub indent — while
the desktop nav runs at 16px/500. Brought onto the same scale: top level
a touch larger than the desktop nav for the thumb, sub-items a step
smaller and lighter so the two levels read as two levels. The sub-item
label is a bare ; the family for it comes from section 3 — never
name a family on `> span` here, Avada's glyphs share those spans. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a .menu-text {
font-family: var(--t-h-sans) !important;
font-size: 17px !important;
font-weight: 500 !important;
letter-spacing: .01em !important;
line-height: 1.3 !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a {
min-height: 50px !important;
padding: 0 24px !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a > span {
font-size: 15.5px !important;
font-weight: 400 !important;
letter-spacing: .01em !important;
line-height: 1.3 !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a {
min-height: 44px !important;
padding: 0 24px 0 40px !important;
}
/* The chevron: Avada draws it at its 20px arrow size, which at 24px type
passed but beside 17px type is a boulder. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile {
width: 50px !important;
font-size: 13px !important;
}
/* Avada's 18px trigger margin (--awb-mobile-nav-trigger-bottom-margin) is
what carries the panel from the toggle's bottom edge to the header's;
zeroing it puts the panel over the logo. At rest it landed the panel 4px
under the band (toggle bottom 72, band bottom 87, panel top 90 at 400px).
Luke, pass 55: "when you scroll down and the header shrinks, the hamburger
dropdown doesn't move to match". The margin is a fixed 18px, so once the
band has lost its padding (section 1: 10px to 4px, and the column
re-centres) the toggle sits 5px above the band's edge instead of 14, and
the panel hangs 13px below it. Luke, same evening: "shouldn't there be no
space?" So the margin is now the measured toggle-to-band distance in each
state (14px at rest, 5px scrolled; constant from 400px up to the 1060px
collapse threshold), which puts the panel's top edge on the band's bottom
rule, and it transitions with the band. The variable itself is inline on
the menu element, so the consuming property is what is overridden. */
.fusion-tb-header .fusion-sticky-container .awb-menu.collapse-enabled:not(.mobile-mode-always-expanded) .awb-menu__main-ul {
margin-top: 14px !important;
transition: margin-top .3s;
}
.fusion-tb-header .fusion-sticky-container.fusion-sticky-transition .awb-menu.collapse-enabled:not(.mobile-mode-always-expanded) .awb-menu__main-ul {
margin-top: 5px !important;
}
@media (prefers-reduced-motion: reduce) {
.fusion-tb-header .fusion-sticky-container .awb-menu.collapse-enabled:not(.mobile-mode-always-expanded) .awb-menu__main-ul {
transition: none;
}
}
/* The expanded submenu sits a shade deeper than the list it opens inside, so
the nesting reads without another border. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-ul {
background-color: var(--t-h-ink) !important;
}
/* Two things the hover-expand desktop menu does that leak into the collapsed
panel. Both were sampled per frame through CDP before being touched.
1. The flash. On every mouseenter of a tab that has children, Avada's
fusionNavSubmenuDirection() writes `transition: all 0s; opacity: 0`
inline on that tab's submenu to measure where a dropdown would land,
then restores it — on a 10ms timeout whenever the measured `left`
differs from the one it wrote last time, which in the panel is every
time after the first. In the panel the submenu is an open accordion,
so it blanked for a frame and faded back in over 300ms each time the
pointer re-entered its tab. Inline styles lose to !important: the
panel's submenus are pinned opaque, untransitioned and unoffset here,
which also makes the routine take its synchronous path. The panel opens
submenus with a jQuery slide (display + height), which none of this
touches.
2. The scrollbar. `.awb-menu_row.awb-menu_em-hover .awb-menu__main-li:hover:before`
hangs an invisible 20px box below the hovered tab so the pointer can
cross the gap to a desktop dropdown. On the last row it hangs past the
list's bottom edge, and the list is overflow-y:auto, so hovering Media
grew a scrollbar (scrollHeight 306 -> 325). There is no gap to bridge
in the panel. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-ul {
opacity: 1 !important;
transition: none !important;
left: auto !important;
right: auto !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li:hover::before {
content: none;
}
/* Avada fades the panel's rows over 300ms, so sweeping down the list has
several rows mid-fade at once — the same thing section 3 fixed on the
desktop dropdown. Same two properties, same 120ms. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a {
transition: background-color .12s ease, color .12s ease;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li {
background-color: transparent !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a .menu-text {
background-color: transparent !important;
color: var(--t-h-fg-2) !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a {
border-color: var(--t-h-line) !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li:hover > .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li.current-menu-item > .awb-menu__main-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a {
background-color: var(--t-h-panel-2) !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li:hover > .awb-menu__main-a .menu-text,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li.current-menu-item > .awb-menu__main-a .menu-text,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a .menu-text {
color: var(--t-h-fg) !important;
}
/* Avada paints the collapsed menu's links with
* .awb-menu.collapse-enabled a { background: … !important }
* — a shorthand at (0,2,1). The generic `.fusion-tb-header .awb-menu__sub-a`
* rule in section 3 is (0,2,0), so even with !important it loses and the
* submenu rows stay white inside the dark panel. Matching the collapse class
* takes this to (0,3,0), which wins.
*/
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-a .menu-text {
background-color: transparent !important;
color: var(--t-h-fg-2) !important;
}
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li:hover > .awb-menu__sub-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a {
background-color: var(--t-h-panel) !important;
}
/* Same bare- miss as the desktop dropdown above. */
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li:hover > .awb-menu__sub-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li:hover > .awb-menu__sub-a > span,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a > span,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li:hover > .awb-menu__sub-a .menu-text,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__sub-li.current-menu-item > .awb-menu__sub-a .menu-text {
color: var(--t-h-fg) !important;
}
/* The two submenu markers, neither of which any rule above reaches.
*
* There is no element with the bare class `awb-menu__open-nav-submenu` — the
* pass-9 rule that named it matched nothing on any page. Avada ships two
* separate things: a `_hover` span on the desktop item, carrying a CSS-triangle
* ::before, and a `_mobile` button in the collapsed panel, carrying an
* awb-icons glyph. Colour only on both: the glyph is a font character, so a
* font-family here would turn it into tofu (gotcha 19).
*
* The desktop caret sat at pure white — brighter than the word beside it — and
* went to Avada's #1fb6d1 on hover while the word went near-white. The
* collapsed chevron sat at #4a4e57, about 1.9:1 on the panel. Both now follow
* the label they belong to.
*
* The collapsed half needs `.collapse-enabled` in the selector for the same
* reason the submenu links do (gotcha 9): Avada paints that glyph with
* .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile:before
* { color: var(--awb-mobile-color) !important }
* at (0,3,1), so a (0,2,1) rule loses even with an !important of its own.
*/
.fusion-tb-header .awb-menu__main-a .awb-menu__open-nav-submenu-hover,
.fusion-tb-header .awb-menu__main-a .awb-menu__open-nav-submenu-hover::before,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile::before {
background-color: transparent !important;
color: var(--t-h-fg-3) !important;
border-top-color: var(--t-h-fg-3) !important;
}
.fusion-tb-header .awb-menu__main-li:hover > .awb-menu__main-a .awb-menu__open-nav-submenu-hover,
.fusion-tb-header .awb-menu__main-li:hover > .awb-menu__main-a .awb-menu__open-nav-submenu-hover::before,
.fusion-tb-header .awb-menu__main-li.current-menu-item > .awb-menu__main-a .awb-menu__open-nav-submenu-hover,
.fusion-tb-header .awb-menu__main-li.current-menu-item > .awb-menu__main-a .awb-menu__open-nav-submenu-hover::before,
.fusion-tb-header .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a .awb-menu__open-nav-submenu-hover,
.fusion-tb-header .awb-menu__main-li.current-menu-ancestor > .awb-menu__main-a .awb-menu__open-nav-submenu-hover::before,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile:hover,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile:hover::before,
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile[aria-expanded="true"],
.fusion-tb-header .awb-menu.collapse-enabled .awb-menu__open-nav-submenu_mobile[aria-expanded="true"]::before {
color: var(--t-h-fg) !important;
border-top-color: var(--t-h-fg) !important;
}
/* ------------------------------------------------------------------ *
* 5. The toggle button
*
* Avada ships it as a Font Awesome fa-bars glyph in a 66x50 white pill, drawn
* for a light header. The glyph is replaced with three drawn bars: they are
* sharper at this size than the icon font, they can cross into an X on open
* without a second glyph swap, and they take their colour from the button so
* hover and open states need one declaration each.
*
* The markup is fixed by Avada:
* button.awb-menu__m-toggle[aria-expanded]
* span.awb-menu__m-toggle-inner
* span.collapsed-nav-text > span.screen-reader-text (the label)
* span.awb-menu__m-collapse-icon
* span.awb-menu__m-collapse-icon-open (fa-bars)
* span.awb-menu__m-collapse-icon-close (fa-times)
* ------------------------------------------------------------------ */
/* No `display` here on purpose. Avada hides this button with `display: none`
above the collapse breakpoint, and declaring `display: flex` put a second,
permanent hamburger next to the full desktop nav. The centring lives on the
inner span instead, which only matters when the button is shown at all. */
.awb-menu__m-toggle {
width: 46px;
height: 46px;
padding: 0 !important;
align-items: center;
justify-content: center;
background-color: var(--t-h-panel) !important;
border: 1px solid var(--t-h-line-2) !important;
border-radius: 12px;
color: var(--t-h-fg) !important;
transition: background-color .18s ease, border-color .18s ease;
}
.fusion-mobile-nav-holder .fusion-mobile-nav-item {
background-color: var(--t-h-panel) !important;
border: 1px solid var(--t-h-line-2) !important;
border-radius: 12px;
color: var(--t-h-fg) !important;
}
.awb-menu__m-toggle:hover,
.awb-menu__m-toggle[aria-expanded="true"] {
background-color: var(--t-h-panel-2) !important;
border-color: var(--t-h-cyan) !important;
}
.awb-menu__m-toggle .awb-menu__m-toggle-inner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
line-height: 0;
}
/* The icon font glyphs are decorative — the button's accessible name comes
from the screen-reader text beside them — so they can go entirely. */
.awb-menu__m-toggle .awb-menu__m-collapse-icon-open,
.awb-menu__m-toggle .awb-menu__m-collapse-icon-close {
display: none !important;
}
/* Middle bar is the element itself; the outer two are its pseudo-elements. */
.awb-menu__m-toggle .awb-menu__m-collapse-icon {
position: relative;
display: block;
width: 19px;
height: 1.5px;
margin: 0;
padding: 0;
background-color: currentColor !important;
border-radius: 2px;
color: inherit !important;
transition: background-color .16s ease;
}
.awb-menu__m-toggle .awb-menu__m-collapse-icon::before,
.awb-menu__m-toggle .awb-menu__m-collapse-icon::after {
content: "";
position: absolute;
left: 0;
width: 19px;
height: 1.5px;
background-color: currentColor;
border-radius: 2px;
transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.awb-menu__m-toggle .awb-menu__m-collapse-icon::before { top: -6px; }
.awb-menu__m-toggle .awb-menu__m-collapse-icon::after { top: 6px; }
/* Open: the middle bar drops out and the other two cross. */
.awb-menu__m-toggle[aria-expanded="true"] .awb-menu__m-collapse-icon {
background-color: transparent !important;
}
.awb-menu__m-toggle[aria-expanded="true"] .awb-menu__m-collapse-icon::before {
transform: translateY(6px) rotate(45deg);
}
.awb-menu__m-toggle[aria-expanded="true"] .awb-menu__m-collapse-icon::after {
transform: translateY(-6px) rotate(-45deg);
}
.awb-menu__m-toggle:focus-visible {
outline: 2px solid var(--t-h-cyan);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.awb-menu__m-toggle,
.awb-menu__m-toggle .awb-menu__m-collapse-icon,
.awb-menu__m-toggle .awb-menu__m-collapse-icon::before,
.awb-menu__m-toggle .awb-menu__m-collapse-icon::after {
transition: none;
}
}
/* ------------------------------------------------------------------ *
* 6. The footer band
*
* Theme Builder layout 252, shared by every page — so it belongs here for
* the same reason the header does. It used to be styled in inner.css under
* `body.t-inner`, which is the one class the homepage does not carry: the
* homepage footer kept Avada's #000d27 and had no top hairline, so the band
* changed colour as soon as you navigated home.
* ------------------------------------------------------------------ */
/* No hairline and no gap between the site map and this row any more: the
two print as one footer (Luke, pass 40: "I don't like how the footer has
two separate sections - just combine them"). The map's bottom padding and
this row's top padding are set so the legal line reads as the map's last
row. */
.fusion-tb-footer {
border-top: 0;
}
.fusion-tb-footer .fusion-fullwidth {
background-color: var(--t-h-ink-2) !important;
}
/* The copyright block is an