/* ============================================================ SYNERGY GRID — Universal Preloader File: assets/css/preloader.css Load in every page AFTER your Google Fonts link ============================================================ */ /* ── Overlay ──────────────────────────────────────────────── */ #sg-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: #0d1117; pointer-events: all; } /* Skip animation: already-seen visitors get instant dismiss */ #sg-loader.sg-skip { display: none !important; } #sg-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; } /* ── Logo row ─────────────────────────────────────────────── */ #sg-loader__logo { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(12px); animation: sg-loader-fadein 0.55s ease forwards 0.15s; } #sg-loader__logo img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(69, 84, 177, 0.4)); } /* Sitename column — mirrors .sitename-wrap in the navbar */ #sg-loader__sitename-wrap { display: flex; flex-direction: column; gap: 2px; } /* Wordmark — identical to header#header .sitename */ #sg-loader__wordmark { font-family: 'Bebas Neue', sans-serif; font-size: 30px; font-weight: 400; font-style: normal; letter-spacing: 5px; text-transform: uppercase; color: #ffffff; line-height: 1; margin: 0; } /* GRID word — identical to .grid-word in navbar */ #sg-loader__wordmark .grid-word { color: #6b7de8; text-shadow: 0 0 22px rgba(107, 125, 232, 0.5); font-style: normal; } /* "Combined Solutions" — identical to .sitename-sub in navbar */ #sg-loader__sub { font-family: 'DM Sans', sans-serif; font-size: 8.5px; font-weight: 400; letter-spacing: 3.5px; text-transform: uppercase; color: rgba(240, 237, 232, 0.38); display: block; line-height: 1; padding-left: 2px; } /* ── Progress bar ─────────────────────────────────────────── */ #sg-loader__bar-wrap { width: 180px; height: 2px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; opacity: 0; animation: sg-loader-fadein 0.4s ease forwards 0.55s; } #sg-loader__bar { height: 100%; width: 0%; background: linear-gradient(90deg, #169c53, #4554b1); border-radius: 2px; /* fill duration: 3.5s · delay: 0.65s · total fill finishes at ~4.15s DURATION in preloader.js is 5000ms — giving ~0.85s pause before exit */ animation: sg-loader-progress 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.65s; } /* ── Exit panels (curtain wipe) ───────────────────────────── */ #sg-loader__panel-a, #sg-loader__panel-b { position: absolute; inset: 0; background: #0d1117; } #sg-loader__panel-b { background: #169c53; } #sg-loader.sg-exit #sg-loader__inner { animation: sg-loader-fadeout 0.3s ease forwards; } #sg-loader.sg-exit #sg-loader__panel-b { animation: sg-panel-wipe-up 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards; } #sg-loader.sg-exit #sg-loader__panel-a { animation: sg-panel-wipe-up 0.55s cubic-bezier(0.76, 0, 0.24, 1) forwards 0.08s; } /* ── Header entrance (shared by all pages) ────────────────── */ #header { opacity: 0; transform: translateY(-100%); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } body.page-loaded #header { opacity: 1; transform: translateY(0); } /* Skip state: header visible immediately (returning visitors) */ body.sg-preloader-skip #header { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; } /* ── index.html — first hero panel entrance ───────────────── */ .sg-panel:first-child .sg-panel__content > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } body.page-loaded .sg-panel:first-child .sg-panel__index { opacity: 1; transform: translateY(0); transition-delay: 0.10s; } body.page-loaded .sg-panel:first-child .sg-panel__tag { opacity: 1; transform: translateY(0); transition-delay: 0.20s; } body.page-loaded .sg-panel:first-child .sg-panel__title { opacity: 1; transform: translateY(0); transition-delay: 0.35s; } body.page-loaded .sg-panel:first-child .sg-panel__rule { opacity: 1; transform: translateY(0); transition-delay: 0.50s; } body.page-loaded .sg-panel:first-child .sg-panel__text { opacity: 1; transform: translateY(0); transition-delay: 0.65s; } body.page-loaded .sg-panel:first-child .sg-panel__cta { opacity: 1; transform: translateY(0); transition-delay: 0.80s; } body.sg-preloader-skip .sg-panel:first-child .sg-panel__content > * { opacity: 1 !important; transform: translateY(0) !important; transition: none !important; } /* ── about.html — hero section entrance ──────────────────── */ .about-hero__eyebrow, .about-hero__title, .about-hero__sub, .about-hero__lead, .about-hero__pill-list, .about-hero__badge, .about-hero__scroll, .about-hero__bg { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .about-hero__bg { transform: scale(1.06); transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .about-hero__badge { transform: scale(0.82) rotate(-8deg); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .about-hero__scroll { transform: translateY(10px); transition: opacity 0.5s ease 1.35s, transform 0.5s ease 1.35s; } body.page-loaded .about-hero__bg { opacity: 1; transform: scale(1); transition-delay: 0.05s; } body.page-loaded .about-hero__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.15s; } body.page-loaded .about-hero__title { opacity: 1; transform: translateY(0); transition-delay: 0.30s; } body.page-loaded .about-hero__sub { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } body.page-loaded .about-hero__lead { opacity: 1; transform: translateY(0); transition-delay: 0.60s; } body.page-loaded .about-hero__pill-list { opacity: 1; transform: translateY(0); transition-delay: 0.75s; } body.page-loaded .about-hero__badge { opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.85s; } body.page-loaded .about-hero__scroll { opacity: 1; transform: translateY(0); } body.sg-preloader-skip .about-hero__eyebrow, body.sg-preloader-skip .about-hero__title, body.sg-preloader-skip .about-hero__sub, body.sg-preloader-skip .about-hero__lead, body.sg-preloader-skip .about-hero__pill-list, body.sg-preloader-skip .about-hero__badge, body.sg-preloader-skip .about-hero__scroll, body.sg-preloader-skip .about-hero__bg { opacity: 1 !important; transform: none !important; transition: none !important; } /* ── Keyframes ────────────────────────────────────────────── */ @keyframes sg-loader-fadein { to { opacity: 1; transform: translateY(0); } } @keyframes sg-loader-fadeout { to { opacity: 0; } } @keyframes sg-loader-progress { to { width: 100%; } } @keyframes sg-panel-wipe-up { from { transform: translateY(0); } to { transform: translateY(-100%); } } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #sg-loader { display: none !important; } #header, .sg-panel:first-child .sg-panel__content > *, .about-hero__eyebrow, .about-hero__title, .about-hero__sub, .about-hero__lead, .about-hero__pill-list, .about-hero__badge, .about-hero__scroll, .about-hero__bg { opacity: 1 !important; transform: none !important; transition: none !important; } }