/* ============================================================ GP Preloader — georgepickering.com Drop into site/css/loader.css Referenced in before styles.css ============================================================ */ #gp-loader { position: fixed; inset: 0; z-index: 99999; background: #06070b; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: all; /* Exit transition */ transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1); } #gp-loader.gp-loader--hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ── Monogram SVG ── */ #gp-loader__mark { width: 160px; height: 80px; margin-bottom: 28px; opacity: 0; transition: opacity 0.1s; } #gp-loader__mark.is-visible { opacity: 1; } #gp-loader__glyph { fill: none; stroke: #ffffff; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.15, 1); } #gp-loader__glyph.is-drawn { stroke-dashoffset: 0; } /* ── Name line ── */ #gp-loader__name { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.92); text-transform: uppercase; margin: 0 0 6px; opacity: 0; transform: translateY(6px); transition: opacity 0.55s ease, transform 0.55s ease; } #gp-loader__name.is-visible { opacity: 1; transform: translateY(0); } /* ── Discipline line ── */ #gp-loader__discipline { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 9.5px; font-weight: 400; letter-spacing: 0.20em; color: rgba(255, 255, 255, 0.40); text-transform: uppercase; margin: 0 0 44px; opacity: 0; transform: translateY(4px); transition: opacity 0.55s ease 0.12s, transform 0.55s ease 0.12s; } #gp-loader__discipline.is-visible { opacity: 1; transform: translateY(0); } /* ── Progress track ── */ #gp-loader__track { width: 200px; height: 1px; background: rgba(255, 255, 255, 0.08); position: relative; margin-bottom: 12px; overflow: hidden; } #gp-loader__bar { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: rgba(255, 255, 255, 0.72); /* Width is driven by JS — no CSS transition here, JS uses rAF */ } /* ── Counter ── */ #gp-loader__counter { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 10px; letter-spacing: 0.10em; color: rgba(255, 255, 255, 0.28); font-variant-numeric: tabular-nums; transition: color 0.4s ease; } #gp-loader__counter.is-complete { color: rgba(255, 255, 255, 0.68); } /* ── Reduced-motion: skip animation, short delay then hide ── */ @media (prefers-reduced-motion: reduce) { #gp-loader { transition: opacity 0.3s ease, visibility 0.3s ease; } #gp-loader__mark, #gp-loader__name, #gp-loader__discipline { opacity: 1; transform: none; transition: none; } #gp-loader__glyph { stroke-dashoffset: 0; transition: none; } }