/* =========================================================================== org-bar.css — the cross-site organisation ribbon --------------------------------------------------------------------------- Sits above the product nav on every page of /data-hub/ and /route-plan/, linking back to the MESRI organisation site and across to the sibling product. It is what makes three separate sites read as one property. Deliberately self-contained: every value is a local --mb-* custom property defined right here. The two product sites have incompatible design systems (--verdant-500/--ink-200 in Data Hub, --route/--line in Route Plan) and the bar must look identical on both, so it inherits nothing from either. Themes are read the same way both hosts write them: an explicit [data-theme] on always wins, and with no attribute we follow the OS. =========================================================================== */ .mesri-bar { /* Light — a thin band of warm paper, a shade darker than either host's background so it reads as chrome that belongs to someone else. */ --mb-bg: #f2efe9; --mb-bg-hover: #e7e3da; --mb-text: #4a453e; --mb-text-strong: #1f1c19; --mb-line: #ddd8cf; --mb-brand: #14815f; position: relative; z-index: 101; /* above both hosts' sticky nav shadow, below modals */ background: var(--mb-bg); border-block-end: 1px solid var(--mb-line); color: var(--mb-text); font-size: 12.5px; line-height: 1.4; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.005em; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mesri-bar { --mb-bg: #0a0e13; --mb-bg-hover: #161d26; --mb-text: #9aa8b6; --mb-text-strong: #e6ecf2; --mb-line: #1e2833; --mb-brand: #6dceab; } } :root[data-theme="dark"] .mesri-bar { --mb-bg: #0a0e13; --mb-bg-hover: #161d26; --mb-text: #9aa8b6; --mb-text-strong: #e6ecf2; --mb-line: #1e2833; --mb-brand: #6dceab; } .mesri-bar__in { max-width: 1360px; margin-inline: auto; padding: 0 clamp(14px, 4vw, 40px); min-height: 36px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* --- Left: back to the organisation --------------------------------------- */ .mesri-bar__home { display: inline-flex; align-items: center; gap: 8px; padding: 6px 9px 6px 6px; margin-inline-start: -6px; border-radius: 6px; text-decoration: none; color: var(--mb-text); transition: background-color 140ms ease, color 140ms ease; min-width: 0; } .mesri-bar__home:hover, .mesri-bar__home:focus-visible { background: var(--mb-bg-hover); color: var(--mb-text-strong); text-decoration: none; } .mesri-bar__home:focus-visible { outline: 2px solid var(--mb-brand); outline-offset: 1px; } /* The back chevron — only meaningful on the product sites, which is the only place this bar carries a home link. */ .mesri-bar__back { flex-shrink: 0; opacity: 0.6; transition: transform 140ms ease, opacity 140ms ease; } .mesri-bar__home:hover .mesri-bar__back { transform: translateX(-2px); opacity: 1; } .mesri-bar__mark { width: 16px; height: 16px; flex-shrink: 0; display: block; color: var(--mb-brand); } .mesri-bar__name { font-weight: 700; letter-spacing: 0.055em; color: var(--mb-text-strong); flex-shrink: 0; } /* The expanded acronym. First thing to go when space runs out — it is the longest string on the bar by a wide margin. */ .mesri-bar__full { color: inherit; opacity: 0.78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .mesri-bar__full::before { content: ""; display: inline-block; width: 1px; height: 11px; margin-inline: 9px 10px; vertical-align: -1px; background: currentColor; opacity: 0.32; } /* --- Right: the rest of the property -------------------------------------- */ .mesri-bar__links { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .mesri-bar__label { opacity: 0.7; margin-inline-end: 6px; white-space: nowrap; } .mesri-bar__link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--mb-text); white-space: nowrap; transition: background-color 140ms ease, color 140ms ease; } .mesri-bar__link:hover, .mesri-bar__link:focus-visible { background: var(--mb-bg-hover); color: var(--mb-text-strong); text-decoration: none; } .mesri-bar__link:focus-visible { outline: 2px solid var(--mb-brand); outline-offset: 1px; } /* The product you are already on: shown, but not a link. */ .mesri-bar__link[aria-current="page"] { color: var(--mb-text-strong); font-weight: 600; background: var(--mb-bg-hover); } /* Product dot, tinted with that product's own accent so the two are distinguishable at a glance from anywhere on the property. */ .mesri-bar__dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; background: var(--mb-dot, var(--mb-brand)); } /* --- Responsive ------------------------------------------------------------ Three steps down: drop the expanded name, then the "Also from MESRI" label, then let the two rows stack. The home link and the product links survive at every width — they are the only load-bearing parts. */ @media (max-width: 900px) { .mesri-bar__full { display: none; } } @media (max-width: 620px) { .mesri-bar__label { display: none; } .mesri-bar__in { gap: 4px; padding-block: 3px; } .mesri-bar { font-size: 12px; } } @media (max-width: 380px) { .mesri-bar__links { margin-inline-start: 0; width: 100%; } } /* --- Print ----------------------------------------------------------------- Both product sites already hide their nav and footer when printing; the bar is chrome too. */ @media print { .mesri-bar { display: none !important; } }