/* =========================================================================== PEC site flow layer --------------------------------------------------------------------------- The header nav mixes two kinds of link. About / What Sets Us Apart / Why Us / Services / Contact are in-page anchors on the home page: clicking them glides. Pricing / Reviews / Project Status / Billing Rates / Careers / Toolset are real documents: clicking them used to blank the viewport and repaint, so the nav felt smooth for five items and then jolted. This file makes the second kind move like the first. Every page loads it, so the effect holds in both directions and on every hop between subpages. Progressive enhancement throughout: a browser without view transitions gets the JS fade in site-flow.js, and a browser without either gets exactly the behaviour it has today. Nothing here changes layout, colour or content. =========================================================================== */ :root { --flow-duration: 260ms; --flow-exit: 150ms; --flow-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --------------------------------------------------------------------------- 1. Cross-document view transitions The browser snapshots the outgoing page, loads the next one, and animates between the two. Same-origin navigations only; the browser handles the rest. --------------------------------------------------------------------------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--flow-duration); animation-timing-function: var(--flow-ease); } /* --------------------------------------------------------------------------- 2. Keep the header still while the page changes under it The header is the one element every page shares. Naming it hands it its own transition group, so instead of cross-fading with the page body it morphs from its old box to its new one — the bar reads as continuous, which is what makes Contact -> Pricing feel like the same gesture as Contact -> Services. The name must be unique per document, so it goes on the id, not the tag. --------------------------------------------------------------------------- */ #site-header { view-transition-name: pec-site-header; } #site-header .logo { view-transition-name: pec-site-logo; } ::view-transition-group(pec-site-header), ::view-transition-group(pec-site-logo) { animation-duration: var(--flow-duration); animation-timing-function: var(--flow-ease); } /* --------------------------------------------------------------------------- 3. Instant feedback on the link you just clicked A cross-page link has a real load behind it. Marking it the moment it is clicked means the nav answers on press rather than on arrival, which is the other half of why the anchor links feel smoother than the page links. --------------------------------------------------------------------------- */ .main-nav a.is-navigating, .nav-drawer a.is-navigating, .cat-nav a.is-navigating { opacity: 0.72; transition: opacity 120ms var(--flow-ease); } /* --------------------------------------------------------------------------- 4. Fallback for browsers without cross-document view transitions site-flow.js sets .pec-flow-fallback on only when it has to. --------------------------------------------------------------------------- */ .pec-flow-fallback body { animation: pec-flow-in var(--flow-duration) var(--flow-ease) both; } /* An animation, not a transition: the entrance animation above fills forwards, and a filled animation beats a transition on the same property, so a transition here would simply never take. */ .pec-flow-fallback.pec-flow-leaving body { animation: pec-flow-out var(--flow-exit) var(--flow-ease) both; } @keyframes pec-flow-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pec-flow-out { from { opacity: 1; } to { opacity: 0; } } /* --------------------------------------------------------------------------- 5. Shared site nav on every page The home page carries the full nav bar; the subpages used to carry only the logo and a "Back to Home" button, so the bar vanished the moment you left the home page. These rules give every other page the same nav, styled to match index.html exactly (same sizes, colours, hover and active states, same hamburger + drawer below 1220px). Scoped to .site-nav-shared so index.html — which has its own copy of these rules — is untouched. Values are literals, not page variables, because each page names its tokens differently. --------------------------------------------------------------------------- */ #site-header.site-nav-shared { gap: 16px; } #site-header.site-nav-shared .main-nav { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; } #site-header.site-nav-shared .main-nav a { color: rgba(255, 255, 255, 0.75); font-size: 0.88rem; font-weight: 600; padding: 7px 14px; border-radius: 4px; white-space: nowrap; text-decoration: none; transition: color 0.25s ease, background 0.25s ease; } #site-header.site-nav-shared .main-nav a:hover, #site-header.site-nav-shared .main-nav a[aria-current="true"], #site-header.site-nav-shared .main-nav a[aria-current="page"] { color: #ffffff; background: rgba(255, 255, 255, 0.1); } #site-header.site-nav-shared .main-nav a.nav-tool { margin-left: 10px; color: #7ec4e8; border: 1px solid rgba(126, 196, 232, 0.55); background: rgba(26, 111, 168, 0.18); font-weight: 700; } #site-header.site-nav-shared .main-nav a.nav-tool:hover, #site-header.site-nav-shared .main-nav a.nav-tool[aria-current="page"] { color: #ffffff; background: #1a6fa8; border-color: #1a6fa8; } #site-header.site-nav-shared .main-nav a.nav-tool .ext { font-size: 0.7rem; opacity: 0.8; margin-left: 4px; } /* Hamburger */ #site-header.site-nav-shared .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; cursor: pointer; padding: 7px; flex-shrink: 0; } #site-header.site-nav-shared .nav-toggle span { display: block; width: 100%; height: 2px; background: #ffffff; border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } #site-header.site-nav-shared .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #site-header.site-nav-shared .nav-toggle.is-open span:nth-child(2) { opacity: 0; } #site-header.site-nav-shared .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Drawer + overlay live outside the header, so they carry their own class. */ .nav-drawer.site-nav-shared { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 260px; background: #0a1825; z-index: 999; padding: 116px 24px 32px; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .nav-drawer.site-nav-shared.is-open { transform: translateX(0); } .nav-drawer.site-nav-shared a { display: block; color: rgba(255, 255, 255, 0.8); font-size: 1.05rem; font-weight: 600; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; transition: color 0.25s ease; } .nav-drawer.site-nav-shared a:hover, .nav-drawer.site-nav-shared a[aria-current="page"] { color: #ffffff; } .nav-drawer.site-nav-shared a.nav-tool { margin-top: 16px; border: 1px solid rgba(126, 196, 232, 0.55); background: rgba(26, 111, 168, 0.18); color: #7ec4e8; border-radius: 4px; padding: 13px 14px; font-weight: 700; } .nav-drawer.site-nav-shared a.nav-tool:hover { background: #1a6fa8; color: #ffffff; } .nav-overlay.site-nav-shared { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; } .nav-overlay.site-nav-shared.is-open { display: block; } @media (min-width: 1220px) { #site-header.site-nav-shared .main-nav { display: flex; } #site-header.site-nav-shared .nav-toggle { display: none !important; } .nav-drawer.site-nav-shared { display: none !important; } } @media (max-width: 1219px) { #site-header.site-nav-shared .main-nav { display: none; } #site-header.site-nav-shared .nav-toggle { display: flex; } .nav-drawer.site-nav-shared { display: block; } } @media (max-width: 768px) { .nav-drawer.site-nav-shared { padding-top: 92px; } } /* The toolset is an app-style layout (100vh flex column, no scrolling body), so its site bar sits in the flex flow instead of being fixed. */ #site-header.site-nav-shared.site-nav-static { position: static; flex-shrink: 0; background: #000000; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); z-index: 1000; } #site-header.site-nav-shared.site-nav-static .logo img { height: 44px; width: auto; display: block; border-radius: 6px; } @media print { #site-header.site-nav-shared, .nav-drawer.site-nav-shared, .nav-overlay.site-nav-shared { display: none !important; } } /* --------------------------------------------------------------------------- 6. Opt-outs --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .pec-flow-fallback body, .pec-flow-fallback.pec-flow-leaving body { animation: none; opacity: 1; transition: none; } } @media print { #site-header, #site-header .logo { view-transition-name: none; } .pec-flow-fallback body, .pec-flow-fallback.pec-flow-leaving body { animation: none; opacity: 1; } }