/* ba-li ported */ /* ═══════════════════════════════════════════════════════════ Blue Arctic · Shared components Announcement bar, header & navigation, mobile drawer, footer, cards, chips, reveal utilities. Reused site-wide. ═══════════════════════════════════════════════════════════ */ /* ── Announcement bar ──────────────────────────────────── */ .announce { /* Variable-driven like .header-dark: a page sets --announce-bg on and the bar follows the hero canvas, so announce → header → hero read as one surface. Default stays navy. */ background: var(--announce-bg, var(--navy-950)); color: #C4D8EA; font-size: var(--fs-tiny); } .announce-inner { display: flex; justify-content: center; } .announce-link { display: inline-flex; align-items: center; gap: .65rem; padding-block: .55rem; color: inherit; min-height: var(--announce-h); min-width: 0; max-width: 100%; } .announce-link:hover { text-decoration: none; color: #fff; } .announce-tag { background: rgba(95, 185, 238, .16); color: var(--sky-400); border: 1px solid rgba(95, 185, 238, .3); padding: .1rem .55rem; border-radius: var(--r-pill); font-weight: 600; white-space: nowrap; } .announce-arrow { transition: transform var(--dur-fast) var(--ease-out); } .announce-link:hover .announce-arrow { transform: translateX(3px); } @media (max-width: 640px) { .announce-inner { min-width: 0; } .announce-text { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .announce-tag, .announce-arrow { flex: none; } } /* ── Header ────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-med), box-shadow var(--dur-med); } .site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(8, 25, 45, .25); } .header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .header-logo { flex: none; display: inline-flex; } /* 28px logo inside the 80px header. Artwork is 563×84 (6.70:1), so 28px tall renders ≈188px wide; the header itself stays --header-h. */ .header-logo img { width: 188px; height: 28px; object-fit: contain; } /* Primary nav */ .primary-nav { flex: 1; display: flex; justify-content: center; } .nav-list { display: flex; align-items: center; gap: .5rem; list-style: none; padding: 0; } .nav-item { position: relative; } /* Top-level nav is typographic: a quiet text button with a small radius, subtle hover tint, soft neutral open state. .header-dark below inherits the same interaction language. */ .nav-link { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .7rem; border: 0; background: transparent; border-radius: var(--r-sm); font-weight: 500; font-size: .95rem; white-space: nowrap; color: var(--ink); cursor: pointer; transition: color var(--dur-fast), background-color var(--dur-fast); } .nav-link:hover { color: var(--blue-600); background: rgba(20, 40, 60, .05); } a.nav-link, a.nav-link:hover { text-decoration: none; } .nav-caret { transition: transform var(--dur-fast) var(--ease-out); color: var(--ink-3); } .nav-item.open .nav-caret { transform: rotate(180deg); } .nav-item.open > .nav-link { color: var(--blue-600); background: var(--frost); } /* Dropdown panels are navigation, not floating content cards: narrow, short, light border, restrained shadow, centered under the trigger. */ .nav-panel { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%) translateY(5px); min-width: 28rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 4px 12px rgba(8, 25, 45, .05), 0 18px 40px -26px rgba(8, 25, 45, .22); padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast); } .nav-item.open .nav-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* The Hosting panel is the only wide one. 35rem is the width at which its three action-bar CTAs still sit on one line; below that they wrap. */ .nav-panel-wide { min-width: 35rem; } /* It is also the widest panel under the LEFTMOST trigger, so centring it pushes its left edge off narrow desktops, so anchor it to the trigger's left edge there instead. */ @media (max-width: 1279px) { .nav-panel-wide { left: 0; transform: translateX(0) translateY(5px); } .nav-item.open .nav-panel-wide { transform: translateX(0) translateY(0); } /* Services is fourth in the bar: anchoring its wide panel to the left edge would push it off the right of a narrow desktop, so it hangs from the trigger's right edge instead. */ #menuPro.nav-panel-wide { left: auto; right: 0; } } .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; list-style: none; padding: 0; } .panel-grid-1 { grid-template-columns: 1fr; } /* One item pattern: a plain blue glyph (no tile) top-aligned with the bold title, description flowing beneath; the whole row is the link. */ .panel-item { display: flex; align-items: flex-start; gap: .8rem; padding: .55rem .6rem; border-radius: var(--r-sm); color: var(--ink); transition: background-color var(--dur-fast), color var(--dur-fast); } .panel-item:hover, .panel-item:focus-visible { background: var(--mist); text-decoration: none; } .panel-item:hover .panel-copy strong, .panel-item:focus-visible .panel-copy strong { color: var(--blue-700); } .panel-ico { flex: none; display: grid; place-items: center; color: var(--blue-600); /* optical nudge so the glyph centers against the title's first line */ margin-top: .15rem; } .panel-ico .ico { width: 22px; height: 22px; } .panel-copy { display: grid; gap: .15rem; min-width: 0; } .panel-copy strong { font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--ink); } .panel-copy small { font-size: var(--fs-tiny); color: var(--ink-3); line-height: 1.45; } /* Quiet footer row: one statement or a couple of links, never a promo banner. */ .panel-foot { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--line); background: var(--mist); border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); margin-inline: -0.5rem; margin-bottom: -0.5rem; padding-inline: 1rem; } .panel-foot a { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-tiny); font-weight: 600; color: var(--blue-600); } /* An urgent action stays in the bar's blue so the footer reads as one row, earning emphasis from weight and the alert glyph, because there is no token for an alert colour. */ .panel-foot-urgent { font-weight: 700; } .panel-foot-urgent .ico { color: var(--blue-600); } /* Secondary grouping inside a panel: hairline + label, and links lighter than .panel-item (smaller, gray hover, no description): applications are not products. */ .panel-section { margin-top: .3rem; padding: .6rem .6rem .15rem; border-top: 1px solid var(--line); } .panel-section-label { margin: 0 0 .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); } .panel-apps { display: flex; flex-wrap: wrap; gap: .2rem; list-style: none; padding: 0; margin: 0; } .panel-app { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .55rem; border-radius: var(--r-sm); font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-2); transition: background-color var(--dur-fast), color var(--dur-fast); } .panel-app .ico { width: 16px; height: 16px; color: var(--blue-600); flex: none; } .panel-app:hover, .panel-app:focus-visible { background: var(--mist); color: var(--ink); text-decoration: none; } /* Header actions */ .header-actions { display: flex; align-items: center; gap: .6rem; flex: none; } .btn-header { padding: .7rem 1.45rem; } /* ── Dark header (homepage dark hero) ────────────────────── .header-dark sits on the navy surface so announce bar, header and hero read as one dark canvas. Dropdown panels and the mobile drawer stay light: they float above it. */ .site-header.header-dark { /* Solid, not glass: glass would show the white body behind the sticky header and break the canvas. Colour follows --header-dark-bg on (tokens.css), so carbon heroes join the seam without a second theme. */ background: var(--header-dark-bg, var(--navy-900)); } .site-header.header-dark.is-scrolled { border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 6px 24px -14px rgba(2, 8, 16, .6); } .header-dark .nav-link { color: #DCE8F3; } .header-dark .nav-link:hover, .header-dark .nav-item.open > .nav-link { color: #fff; background: rgba(255, 255, 255, .08); } .header-dark .nav-caret { color: #7A93AB; } .header-dark .btn-quiet { color: #DCE8F3; } .header-dark .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .08); } .header-dark .nav-toggle { /* Lift the button off the navy hero. */ background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .42); color: #E8F1F9; } .header-dark .mobile-nav { border-top-color: rgba(255, 255, 255, .1); } /* Mobile toggle */ .nav-toggle { display: none; border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm); width: 2.6rem; height: 2.6rem; place-items: center; cursor: pointer; color: var(--ink); } .nav-toggle .nav-toggle-close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; } /* ── Mobile drawer ─────────────────────────────────────── */ .mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; padding: 1rem var(--container-pad) 2rem; } .mobile-nav[data-open="true"] { display: block; } .m-group { border-bottom: 1px solid var(--line); } .m-group summary { display: flex; align-items: center; justify-content: space-between; padding: 1rem .25rem; font-weight: 600; cursor: pointer; list-style: none; } .m-group summary::-webkit-details-marker { display: none; } .m-group .m-caret { transition: transform var(--dur-fast); color: var(--ink-3); } .m-group[open] .m-caret { transform: rotate(180deg); } .m-group ul { padding: 0 .25rem 1rem; display: grid; gap: .1rem; } .m-group ul a { display: block; padding: .55rem .75rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: .95rem; } .m-group ul a:hover { background: var(--mist); color: var(--blue-600); text-decoration: none; } /* Drawer equivalent of .panel-section-label: groups supporting links under a heading without turning them into tappable rows. */ .m-label { margin: .7rem 0 .15rem; padding: .5rem .75rem 0; border-top: 1px solid var(--line); font-size: .7rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--ink-3); } /* Top-level drawer row with no children (Website Care). Same row as a

, without the caret. */ .m-link { display: block; padding: 1rem .25rem; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--ink); } .m-link:hover { color: var(--blue-600); text-decoration: none; } .m-actions { display: grid; gap: .6rem; padding-top: 1.25rem; } /* Narrow desktop: keep the roomier nav from overflowing */ /* Six top-level items + logo + Login + Get Started do not fit at 992px on default metrics, so the bar compresses rather than dropping to the drawer. Get Started must stay on screen and .header-inner must not overflow, re-measure at 992/1060/1120/1199 before adding another top-level item. */ @media (min-width: 992px) and (max-width: 1199px) { .nav-list { gap: .1rem; } .nav-link { padding: .5rem .45rem; font-size: .9rem; } .header-inner { gap: .5rem; padding-inline: 1.25rem; } .header-actions { gap: .4rem; } .header-actions .btn { padding-inline: .8rem; } } @media (max-width: 991px) { .primary-nav { display: none; } .header-actions .btn-quiet { display: none; } .nav-toggle { display: grid; } /* Balance the mobile header: equal optical margins in both gutters. */ .header-inner { justify-content: space-between; } /* Slightly under desktop scale (~26px) so the mark keeps its presence without crowding the Get Started button and toggle on phones. */ .header-logo img { width: 176px; height: auto; } } @media (max-width: 480px) { .header-actions .btn-header { display: none; } } /* Lock body scroll while drawer is open */ body.nav-open { overflow: hidden; } /* ══ Navigation without JavaScript ══════════════════════ Progressive enhancement, not a second design. `no-js` is on in the markup; head.php removes it before first paint and main.js only leaves it off once the menus are actually wired, so these rules apply when scripting is disabled, blocked, or fails part-way. Nothing here changes the scripted experience: every rule is scoped to .no-js. Desktop: the dropdown panels open on hover and on focus-within, so a mouse and the keyboard both reach them. The trigger is a