/* Site chrome: nav + footer. THE single source for the header/footer look. Linked by src/layouts/Base.astro on every page. */ .nav-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,0.5); border:1px solid transparent; border-radius:999px; padding:8px 8px 8px 24px; box-shadow:0 0 0 rgba(9,21,36,0); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; } .nav-inner.scrolled { background:rgba(255,255,255,0.8); border-color:rgba(255,255,255,0.55); box-shadow:0 8px 30px rgba(9,21,36,0.10); } .logo { font-family:var(--sans); font-weight:500; font-size:20px; letter-spacing:-0.01em; display:flex; align-items:center; gap:9px; } .logo .mark { width:22px; height:22px; border-radius:6px; background:var(--accent-teal); display:inline-flex; align-items:center; justify-content:center; } .logo .mark span { width:9px; height:9px; border-radius:50%; background:var(--accent-lime); } .logo small { font-weight:400; color:var(--text-body); font-size:20px; } .nav-links { display:flex; align-items:center; gap:20px; } .nav-item { position:relative; } .nav-link { font-size:14px; font-weight:500; letter-spacing:0.01em; color:var(--text-body); display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:999px; transition:color .2s ease, background .2s ease; } .nav-link:hover, .nav-link.active, .nav-item:hover > .nav-link { color:var(--text-primary); background:var(--bg-muted); } .nav-link svg { width:11px; height:11px; opacity:.6; transition:transform .2s ease; } .nav-item:hover > .nav-link svg { transform:rotate(180deg); } .nav-dropdown-card { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-4px); background:var(--bg-section); border-radius:16px; padding:20px; border:1px solid var(--border); width:480px; opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s ease, visibility .25s; box-shadow:0 16px 48px rgba(9,21,36,0.12); display:grid; grid-template-columns:1fr 1fr; gap:6px; } .nav-item:hover .nav-dropdown-card, .nav-item:focus-within .nav-dropdown-card { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } /* ---- ACCESSIBILITY (2026-08-04) ---- */ /* Keyboard-only focus ring. currentColor keeps it visible on every surface: near-black on the ivory ground, ivory on the navy bands, white on buttons. */ :focus-visible { outline:2px solid currentColor; outline-offset:3px; } /* Skip link: off-screen until a keyboard user tabs onto it. */ .skip-link { position:absolute; left:-9999px; top:0; z-index:2000; background:#091524; color:#F9F9F7; padding:12px 22px; border-radius:0 0 12px 0; font-size:14px; font-weight:600; text-decoration:none; } .skip-link:focus-visible { left:0; } main { display:block; } .dd-link { padding:12px; border-radius:10px; transition:background .2s; } .dd-link:hover { background:var(--bg-muted); } .dd-link.cur { background:var(--bg-muted); } .dd-link .t { font-size:15px; color:var(--text-primary); } .dd-link .d { font-size:13px; color:var(--text-body); margin-top:2px; line-height:1.3; } .nav-right { display:flex; align-items:center; gap:8px; } .nav-right .text-link { font-size:14px; font-weight:500; color:var(--text-body); padding:8px 14px; border-radius:999px; transition:color .2s ease, background .2s ease; } .nav-right .text-link:hover { color:var(--text-primary); background:var(--bg-muted); } .nav-signin { position:relative; z-index:0; background:var(--accent-teal); color:#fff; border:none; border-radius:999px; padding:10px 22px; font-size:14px; font-weight:600; transition:background .2s ease; } .nav-signin::after { content:''; position:absolute; inset:-8px; border-radius:inherit; background:radial-gradient(rgba(42,82,142,0.5), transparent); opacity:0; filter:blur(12px); z-index:-1; transition:opacity .35s ease; pointer-events:none; } .nav-signin:hover { background:#1E3F6E; } .nav-signin:hover::after { opacity:1; } footer.site { background:var(--bg-dark); color:var(--text-light); border-radius:24px 24px 0 0; margin:0 12px; padding:64px 0 32px; } /* When the page ends on a dark section, that section carries the rounded top (same 12px inset) and the footer joins it flush as one navy card. */ footer.site.flush { border-radius:0; padding-top:8px; } /* Brand takes the slack, link columns size to their content and pack right — Cory: "the logo and the contact needs to be further over to the left, the columns need to be a little bit more compressed and further to the right." */ .foot-grid { display:grid; grid-template-columns:minmax(280px,1fr) repeat(4,auto); gap:clamp(28px,3.4vw,80px); } .foot-brand .logo { color:var(--text-light); margin-bottom:16px; } .foot-brand .logo small { color:rgba(252,252,247,0.6); } .foot-brand p { font-size:14px; color:rgba(252,252,247,0.55); line-height:1.6; max-width:280px; } .foot-contact { margin-top:18px; font-size:13.5px; color:rgba(252,252,247,0.7); line-height:1.8; display:flex; flex-direction:column; align-items:flex-start; } .foot-contact a { color:inherit; border-bottom:1px solid transparent; transition:border-color .2s ease; } .foot-contact a:hover { border-bottom-color:currentColor; } .foot-col h3 { font-family:var(--sans); font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:rgba(252,252,247,0.5); margin-bottom:16px; } .foot-col a { display:block; font-size:14px; color:rgba(252,252,247,0.78); padding:6px 0; transition:color .2s; } .foot-col a:hover { color:var(--text-light); } /* Service status pill, matching the one on noctelfiber.com. Grey is the honest default: it means "not read yet", and it is what stays on screen if the status API is unreachable — a green dot that cannot go red is worse than no dot. */ .chrome-vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .foot-status { display:inline-flex; align-items:center; gap:11px; margin-top:22px; padding:10px 20px 10px 14px; border-radius:999px; background:rgba(252,252,247,0.07); border:1px solid rgba(252,252,247,0.09); font-size:15px; font-weight:500; color:rgba(252,252,247,0.92); /* the label is replaced once the status is read; a floor keeps that swap from visibly resizing the pill */ min-width:186px; transition:background .2s ease, border-color .2s ease; } .foot-status:hover { background:rgba(252,252,247,0.11); border-color:rgba(252,252,247,0.16); } .foot-dot { width:16px; height:16px; border-radius:50%; flex:none; /* unread: the same shape, drained of colour */ background:radial-gradient(circle at 34% 30%, rgba(252,252,247,.42), rgba(252,252,247,.16) 70%); transition:background .35s ease, box-shadow .35s ease; } .foot-status[data-state="ok"] .foot-dot { background:radial-gradient(circle at 34% 30%, #A8E6C4 0%, #6BC79A 45%, #3E9E74 100%); box-shadow:0 0 0 3px rgba(107,199,154,.15); } .foot-status[data-state="warn"] .foot-dot { background:radial-gradient(circle at 34% 30%, #F5D79A 0%, #E5B45E 45%, #C08D2E 100%); box-shadow:0 0 0 3px rgba(229,180,94,.15); } .foot-status[data-state="down"] .foot-dot { background:radial-gradient(circle at 34% 30%, #F2A9A2 0%, #DC736A 45%, #B8453B 100%); box-shadow:0 0 0 3px rgba(220,115,106,.15); } .foot-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:56px; padding-top:24px; border-top:1px solid rgba(252,252,247,0.12); flex-wrap:wrap; gap:16px; } .foot-bottom .legal { font-size:13px; color:rgba(252,252,247,0.5); } /* Terms and Privacy became real links here; without this they inherit the default anchor colour and light up against a muted line in a dark footer. They read as the same quiet text until hovered. */ .foot-bottom .legal a { color:inherit; text-decoration:none; } .foot-bottom .legal a:hover { color:rgba(252,252,247,0.9); text-decoration:underline; } .foot-bottom .socials { display:flex; gap:14px; } .foot-bottom .socials a { width:34px; height:34px; border-radius:50%; border:1px solid rgba(252,252,247,0.2); display:flex; align-items:center; justify-content:center; transition:all .2s; } .foot-bottom .socials a:hover { background:rgba(252,252,247,0.08); } .foot-bottom .socials svg { width:15px; height:15px; stroke:rgba(252,252,247,0.8); } @media (max-width:920px) { /* The nav links used to be hidden here, but the burger that replaces them does not appear until 860 (see below) — so between 861 and 920 every page on the site had no navigation at all: no links, no burger, no way out of the page but the browser's back button. The links are not even tight at that width; measured at 861px they need 795 of 829 available. Hiding them now happens at 860, where the burger takes over on the same pixel. The footer and dropdown rules genuinely want 920 and stay. */ .foot-grid { grid-template-columns:1fr 1fr; } .nav-dropdown-card { width:280px; } } /* AFTER the base .foot-* rules, not before them. Media queries add no specificity, so at equal specificity source order is the only thing deciding — placed above, every one of these silently lost. */ @media (max-width:840px) { /* Full bleed on a phone. The 12px inset and 24px radius read as a card floating on the page at this width — and the hero above it already runs edge to edge, so an inset footer was the only thing on the page still pretending to be a panel. It also gives the columns back 24px they need. */ footer.site { margin:0; border-radius:0; padding:48px 0 26px; } footer.site.flush { padding-top:8px; } /* Type floor. At 14px in a 214px column the links were both hard to read and hard to hit — 6px of padding puts them at ~33px against a 44px target. Column headings stay small because they are labels you scan, not prose. */ .foot-col a { font-size:15px; padding:11px 0; } .foot-col h3 { font-size:12px; margin-bottom:10px; } .foot-brand p { font-size:15px; line-height:1.62; max-width:none; } .foot-contact { font-size:15px; } /* the brand paragraph is prose, and 214px of a two-column grid is ~28 characters — well under the readable range. It takes the full width and the link columns keep the grid. */ .foot-brand { grid-column:1 / -1; } .foot-bottom { margin-top:36px; } /* 44px touch targets. Measured before this: the nav "Get started" button 38px, both logos 26px, the footer contact links 26px, the social icons 34px. All are padding changes — nothing moves, the hit area just reaches the guideline. */ .navbar .logo, .foot-brand .logo { padding:9px 0; } .nav-signin { padding:13px 22px; } .foot-contact a { display:inline-block; padding:9px 0; } .foot-bottom .socials a { width:44px; height:44px; } } .logo-img { height:26px; width:auto; display:block; } nav.navbar { position:sticky; top:0; z-index:50; padding:16px 0 0; transition:transform .32s ease; } /* scroll-back: the bar slides away while reading downward, returns the moment you scroll up. Shape, blur, and scrolled state are unchanged. */ nav.navbar.nav-away { transform:translateY(-120%); } @media (prefers-reduced-motion:reduce){ nav.navbar { transition:none; } } /* ---- The nav bar's own geometry ------------------------------------- The nav markup is
, so without this it inherits each page's .container width (1440px on the homepage, 1200px elsewhere) and the bar changes size page to page. Pinned here so the header is identical everywhere. This is the one knob for nav width. */ .navbar .nav-inner { max-width: 1200px; margin-left: auto; margin-right: auto; } /* ---- Chrome typography is self-contained ----------------------------- Pages set their own base line-height (notes.css/setups.css use a taller body rhythm). Without this the nav links inherit it and the bar grows a few px on those pages. The header defines its own text metrics. */ .navbar .nav-inner, .navbar .nav-link, .navbar .nav-right a, .navbar .logo { line-height: normal; font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; } .navbar .nav-link, .navbar .nav-right a { font-size: 14px; } /* ============================================================ MOBILE MENU (2026-08-03, editorial pass) — navigation as typography. Full warm-ivory takeover; three type sizes carry the whole hierarchy; one committed pill at the foot. ============================================================ */ .nav-burger { display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; padding:11px; margin-left:2px; flex-direction:column; justify-content:center; gap:7px; } .nav-burger span { display:block; height:2px; width:100%; background:#1A1B17; border-radius:2px; transition:transform .28s cubic-bezier(.4,0,.2,1), opacity .18s ease; } /* Three bars in a 22px content box: 3x2px + 2x7px gaps = 20px, so the outer bars sit 9px either side of centre. That 9px is what they travel to meet in the middle — the old two-bar version used 4.5px because its bars were half as far apart. The middle bar fades rather than moving, so the X forms from the pair that was already going to cross. */ .nav-burger.open span:first-child { transform:translateY(9px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity:0; transform:scaleX(.4); } .nav-burger.open span:last-child { transform:translateY(-9px) rotate(-45deg); } .nav-mobile { position:fixed; inset:0; z-index:49; background:#F0EFE9; display:flex; flex-direction:column; opacity:0; transition:opacity .22s ease; } /* The markup carries the `hidden` attribute, but `hidden` is only enforced by the UA rule [hidden]{display:none} — any author-origin display beats it. With display:flex above and no guard here, the closed menu stayed a fixed, full-viewport, opacity:0 layer that swallowed every touch on every page at ≤860px: the homepage would not scroll and the contact form could not be tapped. This one line is the fix. */ .nav-mobile[hidden] { display:none; } .nav-mobile.open { opacity:1; } html.nm-lock, html.nm-lock body { overflow:hidden; } .nm-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:84px 28px 14px; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 64px,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 64px,#000 calc(100% - 34px),transparent 100%); } .nm-label { font-family:"Sometype Mono",ui-monospace,monospace; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:#2A528E; margin:20px 0 8px; } .nm-label:first-child { margin-top:0; } .nav-mobile a { display:flex; align-items:center; color:#1A1B17; min-height:44px; text-decoration:none; } .nm-primary a { font-size:clamp(26px,7.2vw,31px); font-weight:600; letter-spacing:-0.02em; line-height:1.12; padding:4px 0; opacity:0; transform:translateY(12px); } .nm-secondary a { font-size:19px; font-weight:500; letter-spacing:-0.01em; padding:3px 0; opacity:0; transform:translateY(12px); } .nm-utility { display:flex; flex-wrap:wrap; gap:2px 26px; margin-top:18px; padding-top:16px; border-top:1px solid rgba(9,21,36,0.10); opacity:0; transform:translateY(12px); } .nm-utility a { font-size:15.5px; font-weight:500; color:rgba(9,21,36,0.64); } /* the one flourish: where you are */ .nav-mobile a.here::before { content:''; width:7px; height:7px; border-radius:50%; background:#2A528E; margin-right:12px; flex-shrink:0; } /* staggered rise on open */ .nav-mobile.open .nm-primary a, .nav-mobile.open .nm-secondary a, .nav-mobile.open .nm-utility { opacity:1; transform:none; transition:opacity .34s ease, transform .34s cubic-bezier(.22,.8,.36,1); } .nav-mobile.open .nm-primary a:nth-child(1){transition-delay:.03s} .nav-mobile.open .nm-primary a:nth-child(2){transition-delay:.06s} .nav-mobile.open .nm-primary a:nth-child(3){transition-delay:.09s} .nav-mobile.open .nm-primary a:nth-child(4){transition-delay:.12s} .nav-mobile.open .nm-primary a:nth-child(5){transition-delay:.15s} .nav-mobile.open .nm-primary a:nth-child(6){transition-delay:.18s} .nav-mobile.open .nm-primary a:nth-child(7){transition-delay:.21s} .nav-mobile.open .nm-secondary a:nth-child(1){transition-delay:.24s} .nav-mobile.open .nm-secondary a:nth-child(2){transition-delay:.26s} .nav-mobile.open .nm-secondary a:nth-child(3){transition-delay:.28s} .nav-mobile.open .nm-secondary a:nth-child(4){transition-delay:.30s} .nav-mobile.open .nm-utility {transition-delay:.33s} /* the foot: number + one committed pill */ .nm-foot { padding:16px 28px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid rgba(9,21,36,0.10); background:#F0EFE9; } .nm-reach { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; } .nm-num { font-family:"Sometype Mono",ui-monospace,monospace; font-size:15px; letter-spacing:0.02em; color:#1A1B17; } .nm-quiet { font-size:14.5px; color:rgba(9,21,36,0.64); text-decoration:none; min-height:44px; display:inline-flex; align-items:center; } .nm-talk { display:flex; align-items:center; justify-content:center; min-height:54px; border-radius:999px; background:#091524; color:#fff !important; font-size:16.5px; font-weight:500; text-decoration:none; } .nm-talk:active { background:#2A528E; } @media (max-width:860px){ /* links out and burger in on the same pixel — one hands off to the other */ .nav-links, .nav-right .text-link { display:none; } .nav-burger { display:flex; } .navbar { position:sticky; z-index:50; } } @media (max-width:480px){ .nav-right .nav-signin { display:none; } } @media (min-width:861px){ .nav-mobile { display:none !important; } } @media (prefers-reduced-motion: reduce){ .nav-mobile, .nav-mobile.open .nm-primary a, .nav-mobile.open .nm-secondary a, .nav-mobile.open .nm-utility { transition:none; } .nm-primary a, .nm-secondary a, .nm-utility { opacity:1; transform:none; } } /* ---- NO-JS FALLBACK (2026-08-04) -------------------------------------- Both elements are invisible unless the