/* ==========================================================
Intone Header — intone-header.css v1.2
Prefix: ihn- (intone-header-nav)
Global scope — loaded on every page.
Uses #intone-header ID prefix on nav selectors for
high specificity over the base reset stylesheet.
========================================================== */
/* ── CSS Variables ── */
:root {
--ihn-height: 72px;
--ihn-bg: #ffffff;
--ihn-border: #e8e8e8;
--ihn-text: #181818;
--ihn-muted: #6b7280;
--ihn-primary: #f6b43f; /* brand gold — used for active/hover accents */
--ihn-pill-bg: #F4F6F9;
--ihn-pill-color: #000000;
--ihn-pill-hover-bg: #E4E7EC;
--ihn-pill-hover-color: #181818;
--ihn-drop-shadow: 0 8px 40px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
--ihn-z: 9990;
/* Both font vars now point to Public Sans — no Inter anywhere in the header */
--ihn-font: 'Public Sans', sans-serif;
--ihn-font-heading: 'Public Sans', sans-serif;
--ihn-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
--ihn-logo-size: 40px;
--ihn-mobile-logo-size: 26px;
--ihn-gutter: clamp(20px, 4vw, 44px);
}
/* ── Scope reset — high specificity to beat Elementor resets ── */
body{
padding: 0 !important;
}
.ihn *, .ihn *::before, .ihn *::after { box-sizing: border-box; }
.ihn ul, .ihn ol { list-style: none; margin: 0; padding: 0; }
.ihn a { text-decoration: none;}
/* ── Broad reset: cancel hello-elementor/reset.css
The parent theme's reset.css rule:
[type=button],[type=submit],button { border:1px solid #c36; color:#c36; border-radius:3px; font-size:1rem; font-weight:400; ... }
has specificity (0,1,0) for [type=...] and (0,0,1) for button.
Prefixing with #intone-header gives us (1,1,0) / (1,0,1) which beats it
across the board — no :not() exclusions needed at this level. ── */
#intone-header [type=button],
#intone-header [type=submit],
#intone-header button {
-webkit-appearance: none;
appearance: none;
background-color: transparent !important;
border: none !important;
border-radius: 0 !important;
color: inherit !important;
font-family: inherit; /* family only — size/weight set per component below */
font-size: inherit;
font-weight: inherit;
padding: 0;
text-align: inherit;
cursor: pointer;
outline-offset: 2px;
white-space: normal;
-webkit-user-select: none;
user-select: none;
}
.ihn p { margin: 0; }
/* ════════════════════════════════════════════
FIXED SHELL — floats above all page content
════════════════════════════════════════════ */
.ihn {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--ihn-z);
background: transparent;
/* border-bottom: 1px solid transparent; */
transition: transform 350ms var(--ihn-ease),
background 250ms var(--ihn-ease),
border-color 250ms var(--ihn-ease),
box-shadow 250ms var(--ihn-ease);
}
.ihn.is-scrolled {
background: var(--ihn-bg);
border-bottom-color: var(--ihn-border);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
}
.ihn.is-hidden {
transform: translateY(-100%);
}
/* ── Admin bar offset ──
WordPress adds margin-top: 32px to for logged-in users,
which creates a visible gap above the header. We zero that out and
instead shift the sticky header's top threshold so it parks below
the fixed admin bar — no gap, no overlap. */
html { margin-top: 0 !important; }
body { padding-top: 0 !important; }
.admin-bar .ihn { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .ihn { top: 46px; }
}
/* ════════════════════════════════════════════
INNER LAYOUT
════════════════════════════════════════════ */
.ihn-inner {
display: flex;
align-items: center;
height: var(--ihn-height);
padding: 0 var(--ihn-gutter);
/* max-width: 1440px; */
margin: 0 auto;
position: relative;
}
/* ════════════════════════════════════════════
LOGO
WordPress the_custom_logo() outputs:
![]()
The HTML width/height attributes cause the browser to synthesise
an "Attributes Style" rule. CSS !important beats those attributes.
We also contain the link wrapper so nothing bleeds out.
════════════════════════════════════════════ */
.ihn-logo {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: auto;
height: var(--ihn-logo-size);
max-height: var(--ihn-logo-size) !important;
overflow: hidden;
}
/* Hover opacity on the link, not the div wrapper */
#intone-header .ihn-logo .custom-logo-link,
#intone-header .ihn-logo a {
display: flex;
align-items: center;
height: var(--ihn-logo-size) !important;
max-height: var(--ihn-logo-size) !important;
overflow: hidden;
transition: opacity 150ms;
}
#intone-header .ihn-logo .custom-logo-link:hover,
#intone-header .ihn-logo a:hover { opacity: 0.8; }
/* Image — !important overrides HTML attribute-derived styles */
#intone-header .ihn-logo img,
#intone-header .ihn-logo svg,
#intone-header .ihn-logo img.custom-logo,
#intone-header .ihn-logo .custom-logo-link img {
height: var(--ihn-logo-size) !important;
width: auto !important;
max-width: unset !important;
max-height: var(--ihn-logo-size) !important;
display: block;
}
.ihn-logo-wordmark {
font-family: var(--ihn-font-heading);
font-size: 24px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ihn-text);
line-height: 1;
}
/* ════════════════════════════════════════════
DESKTOP NAV
════════════════════════════════════════════ */
.ihn-nav {
display: flex;
align-items: center;
gap: 4px;
height: 100%;
}
.ihn-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
/* Nav triggers and plain links.
#intone-header prefix (specificity 1-1-0) beats Elementor's
[type=button] (0-1-0) and a (0-0-1) resets. */
#intone-header .ihn-trigger,
#intone-header .ihn-link {
display: inline-flex;
align-items: center;
gap: 6px;
/* Full pill sizing lives here (identical in both states → no resize on scroll).
Colour is set by the pill rules below: a light DEFAULT plus dark-hero (page)
and dark-theme (toggle) overrides — see "NAV PILLS — DEFAULT" below. */
padding: 14px 28px;
box-sizing: border-box;
font-family: var(--ihn-font-heading);
font-size: 18px;
font-weight: 600;
color: var(--ihn-text) !important;
white-space: nowrap;
border-radius: 0px !important;
line-height: 27px;
letter-spacing: 0.01em;
background: none;
border: none !important;
transition: background 200ms var(--ihn-ease), color 200ms var(--ihn-ease);
}
#intone-header .ihn-trigger:hover,
#intone-header .ihn-link:hover {
background: var(--ihn-pill-bg);
color: var(--ihn-text) !important;
}
#intone-header .ihn-trigger[aria-expanded="true"] {
background: var(--ihn-pill-bg);
color: var(--ihn-text) !important;
}
/* "What we do" pill — shares the base .ihn-trigger sizing (the element carries
both classes); only the resting colour differs. Padding / weight are
intentionally omitted so the shared 18px sizing applies in both states. */
#intone-header .ihn-trigger--pill {
color: var(--ihn-pill-color) !important;
border-radius: 0px !important;
border: none !important;
}
#intone-header .ihn-trigger--pill:hover,
#intone-header .ihn-trigger--pill[aria-expanded="true"] {
background: var(--ihn-pill-hover-bg) !important;
color: var(--ihn-pill-hover-color) !important;
}
/* Animated chevron */
.ihn-chevron {
flex-shrink: 0;
transition: transform 220ms var(--ihn-ease);
}
.ihn-trigger[aria-expanded="true"] .ihn-chevron {
transform: rotate(180deg);
}
/* ════════════════════════════════════════════
NAV PILLS — DEFAULT (light) appearance
The nav items (.ihn-trigger, .ihn-link, .ihn-trigger--pill; NOT .ihn-cta) are
solid pills: white resting pill + #141414 text, inverting to a dark pill on
hover / open. This is the DEFAULT, which applies to:
• the transparent top-of-page view over LIGHT heroes, and
• the scrolled (solid) header in LIGHT theme.
Two context overrides sit elsewhere and beat it (specificity 1,3,0):
• DARK hero, transparent view → #intone-header.ihn--dark:not(.is-scrolled)
(DARK VARIANT section below) — driven by the Header Style metabox, and
INDEPENDENT of the theme toggle (the over-hero header must stay put).
• DARK theme, scrolled → [data-theme="dark"] …is-scrolled (theme-tokens.css)
— driven by the user's theme toggle, scrolled header only.
So the top-of-page view is governed by the PAGE; the scrolled bar by the TOGGLE.
Chevron is stroke="currentColor" so it tracks the text; responsive scaling is in
the RESPONSIVE BREAKPOINTS section.
════════════════════════════════════════════ */
#intone-header .ihn-trigger,
#intone-header .ihn-link,
#intone-header .ihn-trigger--pill {
color: #141414 !important;
}
#intone-header .ihn-trigger:hover,
#intone-header .ihn-link:hover,
#intone-header .ihn-trigger--pill:hover,
#intone-header .ihn-trigger[aria-expanded="true"],
#intone-header .ihn-trigger--pill[aria-expanded="true"] {
background: #141414 !important;
color: #ffffff !important;
}
/* Chevron follows the inverted text colour on hover / open */
#intone-header .ihn-trigger:hover .ihn-chevron path,
#intone-header .ihn-trigger[aria-expanded="true"] .ihn-chevron path {
stroke: #ffffff;
}
/* ════════════════════════════════════════════
DROPDOWN BASE (standard dropdowns)
════════════════════════════════════════════ */
.ihn-dropdown {
position: absolute;
top: calc(100% + 6px);
left: 0;
background: #ffffff;
border: 1px solid var(--ihn-border);
border-radius: 0;
box-shadow: var(--ihn-drop-shadow);
padding: 8px;
z-index: calc(var(--ihn-z) + 1);
opacity: 0;
transform: translateY(-8px) scale(0.98);
pointer-events: none;
transition: opacity 200ms var(--ihn-ease),
transform 200ms var(--ihn-ease);
}
.ihn-dropdown:not([hidden]) {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Section label inside standard dropdowns */
.drop-section-label {
font-family: var(--ihn-font);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ihn-muted);
padding: 8px 12px 6px;
}
/* Standard drop list */
.drop-list { display: flex; flex-direction: column; gap: 2px; min-width: 230px; }
.drop-link {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
font-family: var(--ihn-font);
font-size: 14px;
font-weight: 500;
color: var(--ihn-text);
/* border-radius: 8px; */
transition: background 140ms, color 140ms;
}
.drop-link svg { flex-shrink: 0; color: var(--ihn-muted); transition: color 140ms; }
.drop-link:hover { background: #f5f5f5; color: var(--ihn-primary); }
.drop-link:hover svg { color: var(--ihn-primary); }
.drop-link--more { color: var(--ihn-muted); }
.drop-link--more:hover { color: var(--ihn-primary); }
/* Product card */
.drop-card {
display: grid;
grid-template-columns: 88px 1fr;
gap: 14px;
padding: 10px;
border-radius: 10px;
min-width: 320px;
transition: background 140ms;
}
.drop-card:hover { background: #f5f5f5; }
.drop-card-img {
border-radius: 8px;
overflow: hidden;
background: #f0f0f0;
}
.drop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drop-card-body {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: center;
}
.drop-card-tag {
font-family: var(--ihn-font);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ihn-primary);
}
.drop-card-name {
font-family: var(--ihn-font);
font-size: 1.6rem;
font-weight: 700;
color: var(--ihn-text);
display: block;
}
.drop-card-desc {
font-family: var(--ihn-font);
font-size: 13px;
color: var(--ihn-muted);
line-height: 1.5;
}
/* ════════════════════════════════════════════
MEGA MENU
════════════════════════════════════════════ */
.ihn-mega {
/* --mega-shift lets JS pull the panel back onto screen when it's opened
from a trigger positioned far from the nav's horizontal center (e.g.
"Industries" near the right edge) — .ihn-mega centers itself on its own
trigger by default, which overflows the viewport for edge items since
the panel (720-1100px) is far wider than the trigger button itself. */
--mega-shift: 0px;
left: 50%;
transform: translateX(calc(-50% + var(--mega-shift))) translateY(-8px) scale(0.98);
/* Widened from 1100px so "What We Do" has room for its permanent 4th
(detail) column alongside Services/Advisory/Featured, then again to
1440px for extra breathing space between columns. */
width: min(1440px, calc(100vw - 80px));
padding: 32px;
border-radius: 0;
}
/* Industries has fewer columns (list + featured image, no Advisory-style
middle column) — the full 1100px width used by "What We Do" would leave
too much empty space. */
.ihn-mega--sm {
width: min(720px, calc(100vw - 80px));
}
.ihn-mega:not([hidden]) {
transform: translateX(calc(-50% + var(--mega-shift))) translateY(0) scale(1);
}
.mega-inner {
/* Services | Detail (permanent master-detail pane) | Advisory | Featured */
display: grid;
grid-template-columns: 1fr 0.85fr 0.65fr 0.55fr;
gap: 0;
}
/* Industries mega (2 columns: list + featured image, no middle Advisory-style column) */
.mega-inner--industries { grid-template-columns: 1fr 0.6fr; }
/* Column dividers */
.mega-col { padding: 0 24px; }
.mega-col:first-child { padding-left: 0; border-right: 1px solid var(--ihn-border); }
.mega-col--impl {
display: flex;
flex-direction: column;
border-right: 1px solid var(--ihn-border);
}
.mega-col--detail {
background: #f9f9f9;
border-radius: 10px;
padding-top: 6px;
padding-bottom: 6px;
}
.mega-col--featured { padding-right: 0; }
/* Section labels */
.mega-label {
font-family: var(--ihn-font);
font-size: clamp(10px, 0.35vw + 9px, 11px);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ihn-primary);
margin-bottom: 12px;
}
/* Mega link list */
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-link {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 9px;
transition: background 140ms;
}
.mega-link:hover { background: #f7f7f7; }
.mega-link-icon {
flex-shrink: 0;
width: clamp(26px, 0.9vw + 20px, 32px);
height: clamp(26px, 0.9vw + 20px, 32px);
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
border-radius: 7px;
color: var(--ihn-muted);
margin-top: 1px;
transition: background 140ms, color 140ms;
}
/* Icon SVGs ship width/height="24" attributes for a sane no-CSS fallback;
this scales them with the clamped icon box instead of staying fixed. */
.mega-link-icon svg { width: 70%; height: 70%; }
.mega-link:hover .mega-link-icon {
background: rgba(255, 92, 2, 0.1);
color: var(--ihn-primary);
}
.mega-link-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.mega-link-text strong {
font-family: var(--ihn-font);
font-size: clamp(14px, 1.6vw, 1.8rem);
font-weight: 600;
color: var(--ihn-text);
line-height: 1.3;
}
.mega-link-text span {
font-family: var(--ihn-font);
font-size: clamp(11px, 0.25vw + 10.5px, 12.5px);
color: var(--ihn-muted);
line-height: 1.5;
}
/* Row wrapper for mega-menu links that also expose a grandchild list.
The expand button can't nest inside .mega-link (that anchor already
wraps the whole row), so it's laid out as a flex sibling instead. */
.mega-row { display: flex; align-items: center; gap: 4px; }
.mega-row .mega-link { flex: 1; min-width: 0; }
/* Ties the currently-expanded row back to its detail content: a persistent
brand-tinted highlight (distinct from the plain-gray :hover treatment)
so it reads as "selected", not just "moused over". */
.mega-row--active .mega-link { background: rgba(255, 200, 2, 0.07); }
.mega-row--active .mega-link-icon {
background: rgba(255, 92, 2, 0.12);
color: var(--ihn-primary);
}
.mega-expand-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
/* Stays >=28px so the touch target never drops below the WCAG 2.5.8
24px floor even at the clamp's low end. */
width: clamp(28px, 0.7vw + 22px, 32px);
height: clamp(28px, 0.7vw + 22px, 32px);
padding: 0;
border: none;
background: transparent;
border-radius: 7px;
color: var(--ihn-muted);
cursor: pointer;
transition: background 140ms, color 140ms;
}
.mega-expand-btn:hover,
.mega-expand-btn:focus-visible {
background: #f5f5f5;
color: var(--ihn-primary);
}
.mega-expand-chevron { transition: transform 160ms; }
.mega-expand-btn[aria-expanded="true"] .mega-expand-chevron { transform: rotate(180deg); }
/* Stats row inside implementation column */
.mega-stat-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid var(--ihn-border);
}
.mega-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background: #f9f9f9;
border-radius: 8px;
}
.mega-stat-num {
font-family: var(--ihn-font-heading);
font-size: clamp(20px, 1.4vw + 14px, 26px);
font-weight: 800;
color: var(--ihn-text);
line-height: 1;
letter-spacing: -0.03em;
}
.mega-stat-num em {
font-style: normal;
color: var(--ihn-primary);
}
.mega-stat-label {
font-family: var(--ihn-font);
font-size: clamp(10px, 0.35vw + 9px, 11.5px);
color: var(--ihn-muted);
line-height: 1.4;
}
/* Featured image column.
.mega-featured-img is given a fixed height rather than flex:1/height:100%
— that percentage chain runs through a CSS Grid item (.mega-col--featured)
whose own height is normally "stretch to tallest sibling", which is
indeterminate during the browser's row-sizing pass. A portrait-oriented
source image (e.g. a tall skyline shot) then falls back to its intrinsic
aspect ratio instead of the intended crop, which can blow the image (and
therefore the whole panel) up to 800px+ tall. A fixed height sidesteps
that entirely regardless of the source image's own dimensions. */
.mega-featured {
display: flex;
flex-direction: column;
gap: 14px;
border-radius: 10px;
overflow: hidden;
transition: opacity 150ms;
}
.mega-featured:hover { opacity: 0.92; }
.mega-featured[hidden] { display: none; }
.mega-featured-img {
border-radius: 9px;
overflow: hidden;
height: 300px;
}
.mega-featured-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mega-featured-caption { padding: 0 4px; }
.mega-featured-caption p {
font-family: var(--ihn-font);
font-size: clamp(12px, 0.25vw + 11.5px, 13px);
color: var(--ihn-muted);
line-height: 1.5;
margin-bottom: 10px;
}
.mega-featured-cta {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--ihn-font);
font-size: clamp(12px, 0.25vw + 11.5px, 13px);
font-weight: 700;
color: var(--ihn-primary);
}
/* Detail view: on "What We Do" this is a permanent .mega-col--detail column
(see .mega-col--detail below); on Industries it still swaps in over the
featured promo. Reuses .mega-label/.mega-list/.mega-link with a scoped
density pass. max-height + scroll guards the 6-item GRC Monitoring case
on shorter viewports; raised from 320px so most lists never need to
scroll at all. */
.mega-detail {
display: flex;
flex-direction: column;
gap: 2px;
max-height: 460px;
overflow-y: auto;
}
.mega-detail[hidden] { display: none; }
.mega-detail .mega-label { margin-bottom: 10px; }
.mega-detail .mega-link { padding: 8px 10px; }
.mega-detail .mega-link-text strong { font-size: clamp(14px, 1.4vw, 1.8rem); }
/* Trailing arrow on detail-column / Industries-overlay links — these rows
have no leading icon like the Services column, so without it a plain
text row doesn't read as clickable at a glance. */
.mega-detail .mega-link { justify-content: space-between; }
.mega-detail .mega-link-text { flex: 1; min-width: 0; }
.mega-link-arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
color: var(--ihn-muted);
opacity: 0.6;
transition: transform 140ms, color 140ms, opacity 140ms;
}
.mega-detail .mega-link:hover .mega-link-arrow {
color: var(--ihn-primary);
opacity: 1;
transform: translateX(2px);
}
/* ════════════════════════════════════════════
ACTIONS (right side of header)
════════════════════════════════════════════ */
.ihn-actions {
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
flex-shrink: 0;
}
#intone-header .ihn-cta {
display: inline-flex;
align-items: center;
padding: 8px 20px;
font-family: var(--ihn-font-heading);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ihn-text) !important;
background: transparent !important;
white-space: nowrap;
transition: border-color 150ms, color 150ms, background 150ms;
}
#intone-header .ihn-cta:hover {
border-color: var(--ihn-primary) !important;
color: var(--ihn-primary) !important;
background: rgba(255, 92, 2, 0.04) !important;
}
/* Hamburger */
.ihn-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
border-radius: 7px;
flex-shrink: 0;
transition: background 150ms;
}
.ihn-hamburger:hover { background: #f5f5f5; }
.ihn-bar {
display: block;
width: 22px;
height: 2px;
background: var(--ihn-text);
border-radius: 2px;
transition: transform 240ms var(--ihn-ease),
opacity 200ms,
width 200ms;
}
/* Hamburger → X animation */
.ihn-hamburger[aria-expanded="true"] .ihn-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.ihn-hamburger[aria-expanded="true"] .ihn-bar:nth-child(2) {
opacity: 0;
width: 0;
}
.ihn-hamburger[aria-expanded="true"] .ihn-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ════════════════════════════════════════════
THEME TOGGLE BUTTON — #ihn-theme-toggle
Sits in .ihn-actions between CTA and hamburger.
Icon-only button; accessible label set via JS.
════════════════════════════════════════════ */
/* The toggle is always in the DOM so its appearance can be ANIMATED rather than
snapped in with display:none→flex (which can't transition). In the transparent
top-of-page view it is collapsed (width:0), faded (opacity:0) and pulled out of
the tab order (visibility:hidden); on scroll it smoothly expands + fades in.
visibility is delayed on hide so the fade-out can finish first. */
#intone-header .ihn-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0; /* collapsed (no reserved gap) while at top of page */
height: 36px;
flex-shrink: 0;
overflow: hidden;
background: transparent;
border-radius: 8px;
color: var(--ihn-text);
cursor: pointer;
opacity: 0;
transform: scale(0.8);
pointer-events: none;
visibility: hidden;
transition: opacity 260ms var(--ihn-ease),
transform 260ms var(--ihn-ease),
width 260ms var(--ihn-ease),
background 150ms,
visibility 0s linear 260ms; /* defer hide until fade-out ends */
}
/* Revealed with a smooth expand + fade once the header gains its solid bg. */
#intone-header.is-scrolled .ihn-theme-toggle {
width: 36px;
opacity: 1;
transform: scale(1);
pointer-events: auto;
visibility: visible;
transition: opacity 260ms var(--ihn-ease),
transform 260ms var(--ihn-ease),
width 260ms var(--ihn-ease),
background 150ms,
visibility 0s linear 0s; /* become visible immediately, then fade in */
}
#intone-header .ihn-theme-toggle:hover {
background: var(--ihn-pill-bg);
}
/* Icon visibility is driven by the button's current preference, which
theme-toggle.js writes to data-pref (light | dark | system). Exactly one
icon shows at a time; default markup ships data-pref="light". */
.ihn-theme-icon { display: none; flex-shrink: 0; }
#intone-header .ihn-theme-toggle[data-pref="light"] .ihn-theme-icon--sun { display: block; }
#intone-header .ihn-theme-toggle[data-pref="dark"] .ihn-theme-icon--moon { display: block; }
#intone-header .ihn-theme-toggle[data-pref="system"] .ihn-theme-icon--auto { display: block; }
/* ════════════════════════════════════════════
MOBILE DRAWER
════════════════════════════════════════════ */
.ihn-mobile-nav {
position: fixed;
top: var(--ihn-height);
left: 0;
right: 0;
bottom: 0;
background: #ffffff;
z-index: calc(var(--ihn-z) - 1);
overflow-y: auto;
transform: translateX(100%);
transition: transform 320ms var(--ihn-ease);
-webkit-overflow-scrolling: touch;
}
.admin-bar .ihn-mobile-nav { top: calc(var(--ihn-height) + 32px); }
@media screen and (max-width: 782px) {
.admin-bar .ihn-mobile-nav { top: calc(var(--ihn-height) + 46px); }
}
.ihn-mobile-nav.is-open {
transform: translateX(0);
}
.ihn-mobile-inner {
display: flex;
flex-direction: column;
padding: 0 0 48px;
min-height: 100%;
}
/* Mobile menu items */
.ihn-mobile-menu { flex: 1; }
/* .ihn-mobile-item {
border-bottom: 1px solid var(--ihn-border);
} */
/* ── Drill-down screens ──────────────────────────────────────
"What we do" / "Industries" (and any child with grandchildren)
navigate to a dedicated full-width screen rather than expanding an
accordion in place. Screens stack via position:absolute so the
slide reuses the drawer's own translateX/transition idiom instead
of an abrupt display:none swap. */
.ihn-mobile-screens {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
}
.ihn-mobile-screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
visibility: hidden;
opacity: 0;
transform: translateX(24px);
transition: opacity 220ms var(--ihn-ease), transform 260ms var(--ihn-ease), visibility 0s linear 260ms;
}
.ihn-mobile-screen.is-active {
position: relative;
visibility: visible;
opacity: 1;
transform: translateX(0);
transition: opacity 220ms var(--ihn-ease), transform 260ms var(--ihn-ease);
}
#intone-header .ihn-mobile-back {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 18px 24px;
font-family: var(--ihn-font-heading, 'Public Sans', sans-serif);
font-size: 14px;
font-weight: 600;
color: var(--ihn-muted);
background: #f9f9f9;
border: none;
border-bottom: 1px solid var(--ihn-border);
text-align: left;
cursor: pointer;
}
#intone-header .ihn-mobile-back:hover { color: var(--ihn-text); }
/* Flat link rows inside a level-1/level-2 screen (same look as the old
accordion's .ihn-mobile-sub links, reused here without the collapse
behavior since these screens are full panels, not inline accordions). */
.ihn-mobile-menu--sub a {
display: block;
padding: 14px 24px;
font-family: var(--ihn-font-heading, 'Public Sans', sans-serif);
font-size: 15px;
font-weight: 500;
color: var(--ihn-text);
border-bottom: 1px solid #f0f0f0;
transition: color 140ms, padding-left 140ms;
}
#intone-header .ihn-mobile-menu--sub a:hover { color: #09101d; padding-left: 30px; }
/* Row wrapper for a child link that also has its own drill-down screen —
the drill button can't nest inside the row's , so it's a flex sibling. */
.ihn-mobile-row {
display: flex;
align-items: stretch;
border-bottom: 1px solid #f0f0f0;
}
.ihn-mobile-row a { flex: 1; min-width: 0; border-bottom: none; }
.ihn-mobile-drill-btn {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
padding: 0;
border: none;
background: transparent;
color: var(--ihn-muted);
cursor: pointer;
}
#intone-header .ihn-mobile-drill-btn:hover { color: var(--ihn-primary); }
/* Prefix with #intone-header → specificity (1,1,0) beats global reset (1,0,1) */
#intone-header .ihn-mobile-trigger,
#intone-header .ihn-mobile-link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 18px 24px;
font-family: var(--ihn-font-heading, 'Public Sans', sans-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.5;
color: var(--ihn-text);
background: transparent;
text-align: left;
transition: background 150ms, color 150ms;
}
#intone-header .ihn-mobile-trigger:hover,
#intone-header .ihn-mobile-link:hover {
color: var(--ihn-text);
background: #f4f6f9;
}
/* Expanded trigger — light gray bg + rotated chevron */
#intone-header .ihn-mobile-trigger[aria-expanded="true"] {
color: var(--ihn-text);
background: #f4f6f9;
}
#intone-header .ihn-mobile-trigger[aria-expanded="true"] .ihn-chevron {
transform: rotate(180deg);
}
/* Accordion sub-menu */
.ihn-mobile-sub {
overflow: hidden;
max-height: 0;
transition: max-height 320ms ease;
background: #f9f9f9;
border-top: 1px solid #f0f0f0;
}
/* Sub-section label (e.g. "Services", "Implementation") */
.ihn-mobile-sub-section {
font-family: var(--ihn-font);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #6b7280; /* neutral muted — was orange, now matches design */
padding: 16px 24px 6px;
}
#intone-header .ihn-mobile-sub a {
display: block;
padding: 13px 24px 13px 28px;
font-family: var(--ihn-font-heading, 'Public Sans', sans-serif);
font-size: 15px;
font-weight: 500;
color: var(--ihn-text);
border-bottom: 1px solid #f0f0f0;
transition: color 140ms, padding-left 140ms;
}
#intone-header .ihn-mobile-sub a:hover { color: #09101d; padding-left: 36px; }
#intone-header .ihn-mobile-sub a:last-child { border-bottom: none; }
/* Mobile CTA */
.ihn-mobile-footer { padding: 24px 24px 0; }
.ihn-mobile-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px;
background: var(--ihn-text);
color: #ffffff;
font-family: var(--ihn-font);
font-size: 15px;
font-weight: 700;
border-radius: 9px;
transition: background 150ms;
}
.ihn-mobile-cta:hover { background: #2e2e2e; color: #ffffff; }
/* ════════════════════════════════════════════
DARK VARIANT — ihn--dark
Applied when page has dark/image background.
Only active when header is transparent (not .is-scrolled).
Once scrolled, header becomes white and dark styles lift off.
FIX: Selectors use compound form #intone-header.ihn--dark
because the element IS both #intone-header AND .ihn--dark.
The old form .ihn--dark #intone-header looked for #intone-header
as a *descendant*, which never matched.
════════════════════════════════════════════ */
/* ── Logo swap — dual-image strategy ──────────────────────
Two ![]()
tags live in .ihn-logo; CSS toggles which is
visible based on header state and theme. No filter needed.
Visibility matrix:
┌─────────────────────────────┬───────┬──────┐
│ State │ Light │ Dark │
│ │ img │ img │
├─────────────────────────────┼───────┼──────┤
│ Default (light page) │ show │ hide │
│ ihn--dark + not scrolled │ hide │ show │
│ ihn--dark + scrolled │ show │ hide │
│ ihn--normal + dark theme │ hide │ show │
│ ihn--normal + light theme │ show │ hide │
│ [data-theme="dark"] scrolled│ hide │ show │
└─────────────────────────────┴───────┴──────┘
Specificity note: existing #intone-header .ihn-logo img
(1,1,1) sets display:block without !important, so our
(1,2,0) selectors win cleanly without needing !important.
────────────────────────────────────────────────────────── */
/* Default: light logo visible, dark logo hidden */
#intone-header .ihn-logo .ihn-logo-img--dark { display: none; }
#intone-header .ihn-logo .ihn-logo-img--light { display: block; }
/* ──────────────────────────────────────────────────────────
DARK TRANSPARENT TREATMENT — top-of-page (NOT scrolled).
White logo + dark pills/white text + white CTA over a dark backdrop.
TWO triggers feed every rule in this block:
1. .ihn--dark → page is LOCKED dark (Header Style = Dark), any
theme. Theme-toggle INDEPENDENT (fixed hero).
2. .ihn--normal + dark → page FOLLOWS the theme (Header Style = Normal)
([data-theme="dark"]) and the visitor is currently in dark mode. Flips
live with the toggle.
Header Style = Light (or Normal + light theme) uses the default light styles
above/below — no override needed. The SCROLLED solid bar is handled separately
by [data-theme="dark"] … .is-scrolled (here for the logo, theme-tokens for pills).
────────────────────────────────────────────────────────── */
/* Logo + wordmark → white (dark-variant), DESKTOP ONLY (min-width: 861px).
Below 861px, the logo/wordmark instead follow the independent Header Style
(Mobile) control — see the .ihn-m--* rules in RESPONSIVE BREAKPOINTS below. */
@media (min-width: 861px) {
#intone-header.ihn--dark:not(.is-scrolled) .ihn-logo .ihn-logo-img--light,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-logo .ihn-logo-img--light { display: none; }
#intone-header.ihn--dark:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark { display: block; }
/* Wordmark fallback (text-only logo) → white */
#intone-header.ihn--dark:not(.is-scrolled) .ihn-logo-wordmark,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-logo-wordmark { color: #ffffff; }
}
/* Global dark mode — logo/wordmark swap when SCROLLED (any page mode, any
screen size). The transparent view is governed by the desktop (.ihn--*,
above) / mobile (.ihn-m--*, below) triggers instead. */
[data-theme="dark"] #intone-header.is-scrolled .ihn-logo .ihn-logo-img--light { display: none; }
[data-theme="dark"] #intone-header.is-scrolled .ihn-logo .ihn-logo-img--dark { display: block; }
[data-theme="dark"] #intone-header.is-scrolled .ihn-logo-wordmark { color: #ffffff; }
/* Nav pills → transparent bg + white text over a dark hero; solid white pill on hover / open.
(theme-tokens.css inverts the SCROLLED bar's pills for dark mode.) */
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger,
#intone-header.ihn--dark:not(.is-scrolled) .ihn-link,
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger--pill,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-link,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger--pill {
background: transparent !important;
color: #ffffff !important;
}
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger:hover,
#intone-header.ihn--dark:not(.is-scrolled) .ihn-link:hover,
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger--pill:hover,
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger[aria-expanded="true"],
#intone-header.ihn--dark:not(.is-scrolled) .ihn-trigger--pill[aria-expanded="true"],
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger:hover,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-link:hover,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger--pill:hover,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger[aria-expanded="true"],
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-trigger--pill[aria-expanded="true"] {
background: #ffffff !important;
color: #141414 !important;
}
/* CTA "Contact us" → white text + hairline border. (Scrolled CTA colour comes
from the --ihn-text theme token, so it needs no override here.) */
#intone-header.ihn--dark:not(.is-scrolled) .ihn-cta,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-cta {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.5) !important;
background: transparent !important;
}
#intone-header.ihn--dark:not(.is-scrolled) .ihn-cta:hover,
[data-theme="dark"] #intone-header.ihn--normal:not(.is-scrolled) .ihn-cta:hover {
border-color: #ffffff !important;
background: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
}
/* (Desktop nav chevrons need no override: stroke="currentColor" follows the pill
text. The mobile drawer uses .ihn-mobile-* selectors and is unaffected.) */
/* Hamburger bars → white. The hamburger only ever renders below the 860px
breakpoint, so it follows the independent Header Style (Mobile) control
(.ihn-m--*) rather than the desktop .ihn--* class — no media-query wrapper
needed since the element itself is display:none above 860px regardless. */
#intone-header.ihn-m--dark:not(.is-scrolled) .ihn-bar,
[data-theme="dark"] #intone-header.ihn-m--normal:not(.is-scrolled) .ihn-bar { background: #ffffff; }
/* ── ihn--light + dark-mode visitor ─────────────────────────
Header Style (Desktop) = 'Light always' locks the nav PILLS (white/dark
text) to the admin's choice, but the logo, wordmark, and CTA follow the
visitor's data-theme so brand elements stay legible in dark mode.
Pills are excluded — their locked white appearance is the entire point of
choosing 'Light always'. The theme toggle is collapsed/hidden at this zone
(width:0; opacity:0; visibility:hidden) so no toggle rule is needed here.
Logo/wordmark are DESKTOP ONLY here — mobile uses .ihn-m--light below.
─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 861px) {
[data-theme="dark"] #intone-header.ihn--light:not(.is-scrolled) .ihn-logo .ihn-logo-img--light { display: none; }
[data-theme="dark"] #intone-header.ihn--light:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark { display: block; }
[data-theme="dark"] #intone-header.ihn--light:not(.is-scrolled) .ihn-logo-wordmark { color: #ffffff; }
}
[data-theme="dark"] #intone-header.ihn--light:not(.is-scrolled) .ihn-cta {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.5) !important;
background: transparent !important;
}
[data-theme="dark"] #intone-header.ihn--light:not(.is-scrolled) .ihn-cta:hover {
border-color: #ffffff !important;
background: rgba(255, 255, 255, 0.12) !important;
color: #ffffff !important;
}
/* Hamburger: mobile-only element, follows Header Style (Mobile) = 'Light
always' + dark-mode visitor instead of the desktop .ihn--light class. */
[data-theme="dark"] #intone-header.ihn-m--light:not(.is-scrolled) .ihn-bar { background: #ffffff; }
/* ════════════════════════════════════════════
RESPONSIVE BREAKPOINTS
════════════════════════════════════════════ */
/* Compact nav sizing at medium screens (padding now from global --gutter) */
@media (max-width: 1200px) {
/* Scale the shared nav sizing down (applies to BOTH states now that the base
rule carries the full pill dimensions) so the row never overflows. */
#intone-header .ihn-trigger,
#intone-header .ihn-link,
#intone-header .ihn-trigger--pill {
font-size: 16px;
line-height: 24px;
padding: 12px 18px;
}
.mega-inner { grid-template-columns: 1fr 0.8fr 0.6fr 0.5fr; }
.mega-inner--industries { grid-template-columns: 1fr 0.65fr; }
}
@media (max-width: 1024px) {
#intone-header .ihn-trigger,
#intone-header .ihn-link,
#intone-header .ihn-trigger--pill {
font-size: 15px;
line-height: 22px;
padding: 10px 14px;
}
/* Drop the promo image from "What We Do" only — Services/Detail/Advisory
need the room more than a picture does once the panel itself is
capped by a narrower viewport (calc(100vw - 80px)). Industries keeps
its featured column untouched. */
#mega-what-we-do .mega-col--featured { display: none; }
#mega-what-we-do .mega-inner { grid-template-columns: 1fr 0.95fr 0.75fr; }
}
/* Hide desktop nav, show hamburger */
@media (max-width: 860px) {
.ihn-nav,
.ihn-cta { display: none; }
.ihn-hamburger { display: flex; }
/* Apply mobile logo size (--ihn-mobile-logo-size: 26px defined in :root) */
.ihn-logo {
height: var(--ihn-mobile-logo-size);
max-height: var(--ihn-mobile-logo-size) !important;
}
#intone-header .ihn-logo .custom-logo-link,
#intone-header .ihn-logo a {
height: var(--ihn-mobile-logo-size) !important;
max-height: var(--ihn-mobile-logo-size) !important;
}
#intone-header .ihn-logo img,
#intone-header .ihn-logo svg,
#intone-header .ihn-logo img.custom-logo,
#intone-header .ihn-logo .custom-logo-link img {
height: var(--ihn-mobile-logo-size) !important;
max-height: var(--ihn-mobile-logo-size) !important;
}
/* ── Header Style (Mobile) — logo/wordmark, transparent top-of-page only.
Independent from the desktop .ihn--* control above; mirrors the same
three-state logic (Light/Dark/Normal) but reads the Header Style (Mobile)
metabox (.ihn-m--*) instead. The hamburger's own dark-variant rules live
outside this query since the element is display:none above 860px anyway. */
#intone-header.ihn-m--dark:not(.is-scrolled) .ihn-logo .ihn-logo-img--light,
[data-theme="dark"] #intone-header.ihn-m--normal:not(.is-scrolled) .ihn-logo .ihn-logo-img--light { display: none; }
#intone-header.ihn-m--dark:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark,
[data-theme="dark"] #intone-header.ihn-m--normal:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark { display: block; }
#intone-header.ihn-m--dark:not(.is-scrolled) .ihn-logo-wordmark,
[data-theme="dark"] #intone-header.ihn-m--normal:not(.is-scrolled) .ihn-logo-wordmark { color: #ffffff; }
/* Header Style (Mobile) = 'Light always' + dark-mode visitor: logo/wordmark
still follow the visitor's theme for legibility (mirrors desktop .ihn--light
behaviour above). */
[data-theme="dark"] #intone-header.ihn-m--light:not(.is-scrolled) .ihn-logo .ihn-logo-img--light { display: none; }
[data-theme="dark"] #intone-header.ihn-m--light:not(.is-scrolled) .ihn-logo .ihn-logo-img--dark { display: block; }
[data-theme="dark"] #intone-header.ihn-m--light:not(.is-scrolled) .ihn-logo-wordmark { color: #ffffff; }
}
/* Always show desktop nav on large screens */
@media (min-width: 861px) {
.ihn-mobile-nav { display: none !important; }
}
/* Small mobile tweaks */
@media (max-width: 480px) {
:root { --ihn-height: 64px; }
}