/* -------------------------------------------------------------------------- Nav (top of page) -------------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--surface-border); z-index: 20; transition: background var(--transition), border-color var(--transition); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 56px; /* CP-4.11: breathing space above/below the logo mark. With the mark at 32px + 10px top + 10px bottom = 52px, the 56px min-height still wins for the toggle/profile row, so header height is unchanged. Only the logo gains explicit padding around it. */ padding-block: 10px; } /* -------------------------------------------------------------------------- Logo (CP-4.11) — cat mark PNG + wordmark, laid out inline. The is the whole clickable target; image is alt="" (decorative), the wordmark carries the accessible name via .logo__text. -------------------------------------------------------------------------- */ .logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--color-primary); text-decoration: none; /* Reset link colour transitions so hover on the mark doesn't tint it. */ transition: opacity var(--transition); } .logo:hover { opacity: 0.85; } .logo:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 3px; } /* The mark itself — 32px square from the 200x200 source (1:1 aspect preserved by width:auto). display:block strips the inline-baseline whitespace that would otherwise push the wordmark down a hair. */ .logo__img { height: 32px; width: auto; display: block; /* Belt-and-braces: the width/height attributes on the tag already reserve layout space, but if the browser ignores them we still want the picture to look clean while it fetches. */ background: transparent; } /* Wordmark — separate span so we can hide it on very narrow screens without collapsing the mark. Deferred: see nav-right stack below. */ .logo__text { display: inline-block; line-height: 1; } .nav-right { display: flex; align-items: center; gap: var(--space-lg); } .primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); } .primary-nav a { position: relative; /* anchor for the ::after underline */ font-size: 14px; color: var(--text); padding: var(--space-xs) 0; transition: color var(--transition); } /* Restored per-key animated underline (pre-CP-4.10 pattern). Each link's underline sits at the bottom of its padded box, scaled to zero from the left. Hover / keyboard focus / current-page draw it left-to-right. Colour is set per-key below so the drawing animation and the accent colour are decoupled — one animation, six colours. */ .primary-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; /* meets the nav's border-bottom */ height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); border-radius: 1px; pointer-events: none; } .primary-nav a:hover::after, .primary-nav a:focus-visible::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); } /* Text colour follows the same accent on hover / focus / current-page. Per-key --nav-accent rules below feed this; falls back to the global accent so a link without a mapped key still highlights sanely. */ .primary-nav a:hover, .primary-nav a:focus-visible, .primary-nav a[aria-current="page"] { color: var(--nav-accent, var(--color-accent)); } /* -------------------------------------------------------------------------- Per-link accents — palette rotation keyed by data-nav-key (set by header.php's renderNav closure). Mapping is by key, not position, so reordering the nav array preserves colours. home copper #B06F2B matches .logo colour about green #6CB02B matches About hero em accent services blue #2B6CB0 palette-1 solutions light #75A0CC palette-3 (shifted in light theme) demos amber #B58524 showcase — distinct from copper contact pale #C6D3E1 palette-4 (shifted in light theme) -------------------------------------------------------------------------- */ .primary-nav a[data-nav-key="home"] { --nav-accent: #B06F2B; } .primary-nav a[data-nav-key="home"]::after { background: #B06F2B; } .primary-nav a[data-nav-key="about"] { --nav-accent: #6CB02B; } .primary-nav a[data-nav-key="about"]::after { background: #6CB02B; } .primary-nav a[data-nav-key="services"] { --nav-accent: #2B6CB0; } .primary-nav a[data-nav-key="services"]::after { background: #2B6CB0; } .primary-nav a[data-nav-key="solutions"] { --nav-accent: #75A0CC; } .primary-nav a[data-nav-key="solutions"]::after { background: #75A0CC; } .primary-nav a[data-nav-key="demos"] { --nav-accent: #B58524; } .primary-nav a[data-nav-key="demos"]::after { background: #B58524; } .primary-nav a[data-nav-key="contact"] { --nav-accent: #C6D3E1; } .primary-nav a[data-nav-key="contact"]::after { background: #C6D3E1; } /* Light theme — the two lightest accents lose contrast on near-white; shift each to a darker sibling so the underline still reads. */ :root[data-theme="light"] .primary-nav a[data-nav-key="solutions"] { --nav-accent: #2B6CB0; } :root[data-theme="light"] .primary-nav a[data-nav-key="solutions"]::after { background: #2B6CB0; } :root[data-theme="light"] .primary-nav a[data-nav-key="contact"] { --nav-accent: #0D2D4E; } :root[data-theme="light"] .primary-nav a[data-nav-key="contact"]::after { background: #0D2D4E; } /* Reduced motion — snap the underline in rather than draw it. */ @media (prefers-reduced-motion: reduce) { .primary-nav a::after { transition: none; } } /* -------------------------------------------------------------------------- Profile menu (CP-4.10) — visible only when signed in. Mirrors .theme-toggle dimensions + border. Sits adjacent in .nav-right. -------------------------------------------------------------------------- */ .profile-menu { position: relative; /* inline-flex (not inline-block) so no baseline descender gap inflates the box — inline-block made this 41.4px tall and rode the avatar ~2.7px above the theme toggle. inline-flex keeps it at 36px, flush with its row. */ display: inline-flex; align-items: center; } /* Toggle button — 36×36, matches theme-toggle exactly */ .profile-toggle { -webkit-appearance: none; appearance: none; background: transparent; color: var(--text); border: 1px solid var(--surface-border); border-radius: var(--r-card); width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; overflow: hidden; transition: color var(--transition), border-color var(--transition), background var(--transition); } .profile-toggle:hover { background: var(--surface-hover, rgba(117, 160, 204, 0.10)); border-color: var(--color-accent); } .profile-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Avatar image — hidden by default; profile.js swaps in when localStorage holds an avatar for the signed-in user. When present, fallback letter is hidden via the .has-avatar class on .profile-menu. */ .profile-toggle__avatar { width: 100%; height: 100%; object-fit: cover; display: none; } .profile-menu.has-avatar .profile-toggle__avatar { display: block; } .profile-menu.has-avatar .profile-toggle__fallback { display: none; } /* Fallback: initial letter of the display name at heading typeface. Copper accent stands out against the border, echoes the .logo colour. */ .profile-toggle__fallback { font-family: var(--font-heading); font-weight: 700; font-size: 15px; line-height: 1; color: var(--color-primary); letter-spacing: -0.02em; text-transform: uppercase; /* Slight vertical nudge — the letter reads more centred than baseline. */ transform: translateY(-0.5px); } /* -------------------------------------------------------------------------- Dropdown — anchored top-right, fade + subtle slide on open -------------------------------------------------------------------------- */ .profile-dropdown { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 200px; background: var(--bg-alt); border: 1px solid var(--surface-border); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.16); padding: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 0.84, 0.44, 1); } /* [hidden] takes precedence over the transition; JS removes it before adding .is-open. */ .profile-dropdown[hidden] { display: none !important; } .profile-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Header row — "Signed in as " */ .profile-dropdown__hello { padding: 12px 14px 12px; margin: 0 0 4px; border-bottom: 1px solid var(--surface-border); display: flex; flex-direction: column; gap: 3px; } .profile-dropdown__label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); } .profile-dropdown__name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: -0.01em; word-break: break-word; } /* Menu items — and