/* ============================================================ ID Preloader — drop-in stylesheet All rules are namespaced under .idp- so nothing collides with your existing site styles. ============================================================ */ /* pre-paint guard: set from an inline script so the landing page can never flash before the overlay mounts. Removed by preloader.js on mount. */ html.idp-loading { background: #171511; } html.idp-loading body > :not(.idp-overlay) { visibility: hidden !important; } .idp-overlay { position: fixed; inset: 0; z-index: 99999; background: #171511; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; /* fade the whole overlay away at handoff */ transition: opacity 600ms cubic-bezier(.4, 0, .2, 1); } .idp-overlay.idp-done { opacity: 0; pointer-events: none; } .idp-overlay * { box-sizing: border-box; } .idp-content { position: absolute; inset: 0; opacity: 0; } /* soft ignition glow behind the emblem */ .idp-glow { position: absolute; left: 50%; top: calc(50% - 26px); width: 62vmin; height: 62vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217, 171, 106, 0.20), rgba(217, 171, 106, 0) 62%); opacity: 0; pointer-events: none; } /* logo stage: emblem + wordmark share the 248×142 coordinate space */ .idp-stage { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* match the landing page's .intro-logo exactly so the emblem doesn't jump size at handoff */ width: clamp(230px, 16.5vw, 320px); aspect-ratio: 248 / 142; } .idp-emblem { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .idp-wordmark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .idp-idletters { opacity: 0; } /* loader chrome: brand hairline + percent */ .idp-loader { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; } .idp-track { position: relative; width: 224px; height: 1px; background: rgba(217, 171, 106, 0.16); overflow: hidden; } .idp-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #d9ab6a; transform: scaleX(0); transform-origin: left center; } .idp-status-row { display: flex; gap: 16px; align-items: center; } .idp-status { font-size: 10px; font-weight: 500; letter-spacing: 0.34em; color: rgba(236, 230, 218, 0.42); } .idp-pct { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; color: #d9ab6a; } /* landing scroll hint — revealed only at handoff */ .idp-hint { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; pointer-events: none; } .idp-hint-rail { position: relative; width: 8px; height: 64px; } .idp-hint-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); background: rgba(217, 171, 106, 0.16); } .idp-hint-trail { position: absolute; left: 50%; width: 4px; height: 20px; border-radius: 2px; transform: translate(-50%, -100%); background: linear-gradient(to top, rgba(217, 171, 106, 0.9), transparent); animation: idp-sc-run 2.2s cubic-bezier(.5, 0, .4, 1) infinite; } .idp-hint-dot { position: absolute; left: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(217, 171, 106, 1); box-shadow: 0 0 10px rgba(217, 171, 106, 0.9); animation: idp-sc-run 2.2s cubic-bezier(.5, 0, .4, 1) infinite; } .idp-hint-label { font-size: 10px; font-weight: 500; letter-spacing: 0.34em; color: rgba(236, 230, 218, 0.45); } @keyframes idp-sc-run { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }