/* Reusable components: nav, mosaic rows, marquee, footer. Shared across every page — page-specific layout lives in css/home.css (and future css/.css files). */ /* ---------- Preloader ---------- Full-screen intro shown once per page load, before the site underneath is visible — pure CSS keyframes, deliberately with no JS/GSAP dependency (see index.html comment). Sequence: each letter types in via a clip-path wipe (a blinking cursor rides alongside), the accent line draws under the wordmark (echoes .eyebrow::before's brand motif), a brief hold, then the whole mark scales up and fades — a "zoom past the logo" transition — in sync with the overlay itself fading and disabling (visibility + pointer-events, so it can't trap focus or block clicks once done). Reduced-motion overrides for the delays live in base.css. */ .preloader { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-blue-900); animation: preloader-out 0.7s ease-in-out 2.3s forwards; } .preloader__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); animation: preloader-zoom 0.7s cubic-bezier(0.55, 0, 1, 0.45) 2.3s forwards; } .preloader__mark { display: flex; align-items: baseline; letter-spacing: 0.02em; } .preloader__letter { display: inline-block; /* Deliberately hardcoded, not var(--font-display) (Forum, everywhere else on the page) — the intro keeps its original Poppins Bold on request, decoupled from the rest of the site's typeface. */ font-family: "Poppins", "Arial Narrow", sans-serif; font-weight: 700; font-size: clamp(4rem, 15vw, 10rem); line-height: 1; color: var(--color-white); clip-path: inset(0 100% 0 0); animation: preloader-type 0.5s steps(6) forwards; } .preloader__letter:nth-child(1) { animation-delay: 0.1s; } .preloader__letter:nth-child(2) { animation-delay: 0.32s; } .preloader__letter:nth-child(3) { animation-delay: 0.54s; } .preloader__letter:nth-child(4) { animation-delay: 0.76s; } .preloader__cursor { display: inline-block; align-self: stretch; width: 0.06em; margin-inline-start: 0.05em; background: var(--color-accent); opacity: 0; animation: preloader-cursor-in 0.1s linear 0.1s forwards, preloader-blink 0.8s steps(1) 0.1s infinite; } .preloader__line { width: 64px; height: 2px; background: var(--color-accent); transform: scaleX(0); animation: preloader-line 0.5s ease-out 1.3s forwards; } @keyframes preloader-type { to { clip-path: inset(0 0% 0 0); } } @keyframes preloader-cursor-in { to { opacity: 1; } } @keyframes preloader-blink { 50% { opacity: 0; } } @keyframes preloader-line { to { transform: scaleX(1); } } @keyframes preloader-zoom { to { transform: scale(9); opacity: 0; } } @keyframes preloader-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; pointer-events: none; } } /* Set on by index.html's inline script only when this load was routed here by an in-site link click (kiplNavigating), not a fresh open — skips the preloader outright for that one case, so clicking back to Home from elsewhere on the site doesn't replay the intro. Every other way of reaching this page (new tab, typed URL, external link, bookmark, refresh) still gets it, every time. */ html.skip-preloader .preloader { display: none; } /* ---------- Page transition ---------- A quick full-viewport fade-to-brand-navy-and-back for in-site navigation, shared by every page (markup is identical everywhere — see index.html/services.html). Third design for this component: a sliding curtain drew "too big and noticeable" feedback, the top-edge progress bar that replaced it swung too far the other way ("looks almost gone") — this splits the difference. It's brief (well under half a second total) and doesn't slide or move, just a plain opacity fade, but it's full-viewport so it still visibly registers rather than being an easy- to-miss detail in one corner. Solid color (not translucent) so the inevitable blank frame between two separate document loads on a static site reads as an intentional brand-colored flash rather than an accidental flash of white. Default state is opacity: 0 (invisible) so a page that loads with no JS, or before JS runs, is never blocked by it — same "never trust JS alone to unblock a full-page overlay" reasoning as the preloader above. Exit (js/main.js#initPageTransitions intercepts a same-site link click): .page-transition--cover fades it in via a plain CSS transition; JS waits out a matching setTimeout (not a transitionend/animationend listener — those can fail to fire) and only then navigates. Entry: the arriving page's inline script (synchronous, before first paint) adds html.nav-transition-cover if it detects it just got here via that same click — which instantly paints it already fully opaque (no transition, no flash of the new page underneath before the fade starts), then the rule below runs a pure @keyframes animation, with no JS involvement at all, fading it back out. Because it's a self-running CSS animation (like the preloader) rather than something JS has to remove, it's guaranteed to clear on its own even if a later script fails. */ .page-transition { position: fixed; inset: 0; z-index: 1100; background: var(--color-blue-900); opacity: 0; pointer-events: none; } .page-transition--cover { opacity: 1; pointer-events: auto; transition: opacity 0.16s ease-out; } html.nav-transition-cover .page-transition { animation: page-transition-reveal 0.3s ease-in both; } @keyframes page-transition-reveal { from { opacity: 1; } to { opacity: 0; } } /* ---------- Nav ---------- */ .nav { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } .nav.is-scrolled { background: rgba(250, 250, 250, 0.78); border-bottom-color: var(--color-line); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } .nav.is-scrolled .nav__link, .nav.is-scrolled .nav__logo-text { color: var(--color-ink); } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); } .nav__logo { display: flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--color-white); transition: color var(--dur-base) var(--ease-out); } .nav__logo-mark { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; } .nav__links { display: flex; align-items: center; gap: var(--space-lg); } .nav__link { font-size: var(--fs-small); font-weight: 500; color: var(--color-white); position: relative; padding-block: var(--space-3xs); transition: color var(--dur-fast) var(--ease-out); } .nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--color-accent); transition: right var(--dur-base) var(--ease-out); } .nav__link:hover::after, .nav__link.is-active::after { right: 0; } /* ---------- Nav dropdown (About) ---------- The "About" label stays a plain link to about.html (top of page); a separate caret button toggles a flyout to the page's three sections (Mission & Vision / MD's Desk / Our Team) so a visitor can jump straight to one from anywhere on the site, not just from within the About page itself. Kept as two elements ( +