/* * Shared top navigation. * * Colours come from whichever design system the page already has: the captured * site defines --ploy-* custom properties, the zip splitter defines the * workspace tokens, and the literal at the end covers anything else. That way * one stylesheet sits correctly on the coral marketing pages and on a tool page * that also has a dark mode, without either knowing about the other. */ /* The captured pages carry a 64px top margin on , which would leave a bare strip above a sticky bar. No-op on pages that already zero it. */ body { margin-top: 0; } .site-nav { position: sticky; top: 0; z-index: 50; background: var(--ploy-neutral-primary, var(--background, #f7f7f6)); border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.14)); color: var(--ploy-text-primary, var(--foreground, #131316)); } .site-nav__inner { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; max-width: 76rem; margin: 0 auto; padding: 0.85rem 1.25rem; } .site-nav__brand { font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em; text-decoration: none; color: inherit; margin-right: auto; } .site-nav__brand:hover { text-decoration: none; opacity: 0.75; } .site-nav__links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .site-nav__links a { color: inherit; text-decoration: none; opacity: 0.62; padding: 0.2rem 0; border-bottom: 1px solid transparent; transition: opacity 120ms ease, border-color 120ms ease; } .site-nav__links a:hover { opacity: 1; text-decoration: none; } /* The page you are on, marked without relying on colour alone. */ .site-nav__links a[aria-current="page"] { opacity: 1; border-bottom-color: currentColor; } .site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } @media (max-width: 640px) { .site-nav__inner { padding: 0.7rem 1rem; gap: 0.6rem 1rem; } .site-nav__brand { margin-right: 0; width: 100%; } .site-nav__links { gap: 0.9rem; font-size: 0.7rem; } }