/* ============================================================ NAV RAIL
An icon bar in the LinkedIn shape: a row of icon-over-label targets, each
one a whole rectangle rather than a text link, with the active page marked
by a bar along the bottom edge of the nav itself.
Three widths, and the order things give way is deliberate:
≥1220px logo + wordmark, search field, icons with labels
≥ 980px logo mark only, narrower search — labels stay, because the label
is what makes an unfamiliar icon legible
≥ 760px labels go, icons stay — by now the user has seen the labels
< 760px the rail moves to a fixed bar at the bottom of the screen
-------------------------------------------------------------------- */
/* Signed out there is no search field — Explore is the way in, and it carries
the sign-in prompt. The field ships in the markup so nothing has to be built
at runtime; nav-auth.js simply drops the attribute for a signed-in person. */
#nav .nav-search[hidden] { display: none; }
/* styles.css hides the field below 1300px and swaps in a magnifier icon. That
was right for the old bar, where six text links and a field could not share
the width — the rail is narrower, so the field stays until the phone takes
over and the icon is gone for good. Specificity, not order, does the work:
the rule it overrides is a bare .nav-search inside a media query. */
#nav .nav-search:not([hidden]) { display: flex; }
/* The old text nav and its hamburger are gone. The rules stay for one release
so a page served from a cache mid-deploy does not show both navigations. */
#nav .nav-links, #nav .nav-toggle, #nav .nav-search-ico, .nav-mobile { display: none !important; }
/* styles.css drops the Sign In button below 1120px. That number was measured
for the old bar — six text links plus both buttons plus the search icon
needed 1101px, so something had to go and the secondary button went with the
links. The rail is smaller than those six links, and the button costs 88px
against 277px spare at 1000px, so it comes back: a signed-out visitor should
not have to guess that Create Account is also the way back in. It still goes
at every width, including a 320px phone: measured on the live bar, Sign In
costs 74px against 128px spare there, so it fits with 54px to go. An earlier
380px floor here was picked to pair with the narrow-phone rule below rather
than measured, and it hid Sign In on 375px phones — where a signed-out
visitor then has no visible way back in at all. */
#nav .nr-auth .btn-nav-alt { display: inline-flex; }
.nav-rail {
display: flex;
align-items: stretch;
gap: 0.15rem;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
height: var(--nav-bar-h);
}
.nav-rail > li { display: flex; }
.nr-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-width: 76px;
padding: 0 0.55rem;
color: var(--text-muted);
font-family: 'DM Sans', sans-serif;
font-size: 0.7rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
background: none;
border: none;
cursor: pointer;
transition: color 0.15s;
}
.nr-item:hover,
.nr-item:focus-visible { color: var(--text); }
.nr-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -4px; border-radius: 6px; }
.nr-ico {
width: 24px; height: 24px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* The active page. LinkedIn puts a rule under the item, flush with the bottom
of the bar — it reads as a tab, which is exactly what it is. */
.nr-item[aria-current="page"] { color: var(--text); font-weight: 600; }
.nr-item[aria-current="page"] .nr-ico { stroke-width: 2.1; }
.nr-item[aria-current="page"]::after {
content: "";
position: absolute;
left: 0.35rem; right: 0.35rem; bottom: 0;
height: 2px;
border-radius: 2px 2px 0 0;
background: var(--accent-text);
}
/* ---------------------------------------------------------- badges */
.nr-badge {
position: absolute;
top: 9px; left: 50%;
margin-left: 4px;
min-width: 16px; height: 16px;
padding: 0 4px;
display: flex; align-items: center; justify-content: center;
border-radius: 999px;
background: var(--live);
color: #fff;
font-family: 'DM Sans', sans-serif;
font-size: 0.6rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px rgba(7, 7, 15, 0.9);
}
.nr-badge[hidden] { display: none; }
/* ------------------------------------------------------- the Me item */
.nr-me { min-width: 66px; }
/* nav-auth.js renders either an ![]()
or an initials ; both land here,
so the Me item is exactly as tall as the icon beside it either way. */
.nr-av {
width: 24px; height: 24px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-card);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: 0.56rem; font-weight: 800; color: #fff;
font-family: 'DM Sans', sans-serif;
overflow: hidden;
}
.nr-caret { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; fill: none; }
.nr-me-label { display: inline-flex; align-items: center; gap: 2px; }
/* The Me menu is the one the site already has (.nav-me-menu, built by
nav-auth.js) — only its trigger changes, from the pill to a rail item. The
panel positions itself against this wrapper, so it needs nothing new. */
.nr-drop { position: relative; display: flex; }
/* ------------------------------------------------- signed-out buttons */
.nav-rail .nr-auth {
display: flex; align-items: center; gap: 0.5rem;
margin-left: 0.6rem; padding-left: 0.9rem;
border-left: 1px solid var(--border);
align-self: center;
}
/* ============================================================ WIDTHS */
@media (max-width: 1219px) {
.nav-logo-text { display: none; }
.nav-inner { gap: 1.25rem; }
.nr-item { min-width: 68px; padding: 0 0.4rem; }
}
@media (max-width: 979px) {
.nav-search { max-width: 190px; }
.nr-item { min-width: 58px; font-size: 0.66rem; }
}
/* Labels off, icons only. The bar is still a row of tappable rectangles.
899, not 839: measured across every width from 360 to 1440, the signed-in bar
at 840px had 8px to spare — it fit, but a longer label or a font falling back
would have broken it. Handing off at 899 leaves 68px at the tightest point. */
@media (max-width: 899px) {
.nr-item { min-width: 46px; gap: 0; }
.nr-label { display: none; }
.nr-item[aria-current="page"]::after { left: 0.25rem; right: 0.25rem; }
.nr-badge { top: 12px; }
}
/* ======================================================= PHONE: bottom bar */
.nav-bottom { display: none; }
@media (max-width: 759px) {
/* Up top: identity and the two things that are about *you*. Everything
that is about the site moves to the thumb. */
/* Everything that is a destination leaves the top bar for the bottom one.
Matching on "not the Me menu, not the auth buttons" rather than on a marker
class means markup that forgets the class still behaves. */
/* .nav-inner, not #nav: both bars use .nav-rail, so an unscoped selector
here would hide the very items it is moving down to the phone bar. */
#nav .nav-inner .nav-rail > li:not(.nr-drop):not(.nr-auth) { display: none; }
/* same specificity as the rule above that brings the field back, and later
in the file, so the phone genuinely has no search field in the bar */
#nav .nav-search:not([hidden]) { display: none; }
.nav-bottom {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
display: flex;
align-items: stretch;
background: rgba(7, 7, 15, 0.96);
backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-bottom .nav-rail {
flex: 1 1 auto;
height: 56px;
margin: 0;
gap: 0;
}
.nav-bottom .nav-rail > li { flex: 1 1 0; min-width: 0; }
.nav-bottom .nr-item {
width: 100%;
min-width: 0;
height: 56px;
gap: 3px;
font-size: 0.62rem;
padding: 0 0.15rem;
}
.nav-bottom .nr-label { display: block; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* At the bottom the marker belongs on the top edge — the edge the content
is on — not under the label where the screen ends. */
.nav-bottom .nr-item[aria-current="page"]::after { top: 0; bottom: auto; }
.nav-bottom .nr-badge { top: 6px; }
/* The fixed bar sits over the end of the page, so give every page back the
height it covers. One rule here beats a padding on every template. */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* Small phones. Measured at every width from 320 up: the signed-out bar — logo
plus Sign In plus Join Free — lands on exactly 0px of slack at 320-328px. It
does not overflow, but nothing may ever get one pixel wider either, so the
auth cluster gives back its breathing room here rather than living on the
edge. 320px is an iPhone SE 1st gen and small Androids. */
@media (max-width: 379px) {
.nav-rail .nr-auth { gap: 0.35rem; margin-left: 0.3rem; padding-left: 0.55rem; }
.nav-rail .nr-auth .btn { padding-left: 0.7rem; padding-right: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
.nr-item { transition: none; }
}