/* ═══════════════════════════════════════════════════════════════
EFL – preloader.css
Drop this into every page , after style.css:
═══════════════════════════════════════════════════════════════ */
/* ── LOCK SCROLL while loading ── */
body.efl-loading {
overflow: hidden !important;
}
/* ── OVERLAY ── */
#efl-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #0a1628;
transition: opacity .55s ease, visibility .55s ease;
}
/* Dot-grid texture */
#efl-preloader::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(184,148,63,.09) 1px, transparent 1px);
background-size: 42px 42px;
pointer-events: none;
}
/* Radial gold glow */
#efl-preloader::after {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 640px; height: 640px;
background: radial-gradient(circle, rgba(184,148,63,.08) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: efl-pre-glow 3s ease-in-out infinite;
}
@keyframes efl-pre-glow {
0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
50% { transform: translate(-50%,-50%) scale(1.12); opacity: .6; }
}
/* ── HIDE / DONE state ── */
#efl-preloader.efl-pre-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ── INNER WRAP ── */
.efl-pre-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* ── LOGO MARK ── */
.efl-pre-logo {
width: 72px; height: 72px;
background: rgba(2, 0, 0, 0.06);
/* background: rgba(255,255,255,.06); */
/* border: 1px solid rgba(184,148,63,.2); */
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
margin-bottom: 22px;
animation: efl-pre-pop .6s cubic-bezier(.34,1.56,.64,1) both;
}
.efl-pre-logo img {
width: 100%; height: 100%; object-fit: contain;
}
.efl-pre-logo-fallback {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem; font-weight: 700; color: #b8943f;
}
@keyframes efl-pre-pop {
from { opacity: 0; transform: scale(.6); }
to { opacity: 1; transform: scale(1); }
}
/* ── BRAND NAME ── */
.efl-pre-brand {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem; font-weight: 700;
color: #fff; letter-spacing: .04em;
line-height: 1; margin-bottom: 4px;
animation: efl-pre-fadein .7s .15s ease both;
}
.efl-pre-brand em {
color: #b8943f; font-style: normal;
}
.efl-pre-tagline {
font-size: .63rem; letter-spacing: .22em;
text-transform: uppercase; color: #475569;
font-family: 'Outfit', sans-serif; font-weight: 500;
margin-bottom: 38px;
animation: efl-pre-fadein .7s .25s ease both;
}
@keyframes efl-pre-fadein {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* ── NEEDLE + THREAD SPINNER ── */
.efl-pre-spinner-wrap {
position: relative;
width: 64px; height: 64px;
margin-bottom: 28px;
animation: efl-pre-fadein .7s .35s ease both;
}
/* Outer ring */
.efl-pre-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid rgba(184,148,63,.12);
}
/* Spinning arc */
.efl-pre-arc {
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: #b8943f;
border-right-color: rgba(184,148,63,.4);
animation: efl-pre-spin 1s linear infinite;
}
/* Inner dot (needle eye) */
.efl-pre-needle-dot {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(184,148,63,.1);
border: 1px solid rgba(184,148,63,.25);
display: flex; align-items: center; justify-content: center;
}
.efl-pre-needle-dot i {
font-size: .75rem; color: #b8943f;
animation: efl-pre-spin-rev 2s linear infinite;
}
@keyframes efl-pre-spin { to { transform: rotate(360deg); } }
@keyframes efl-pre-spin-rev { to { transform: rotate(-360deg); } }
/* ── THREAD PROGRESS BAR ── */
.efl-pre-bar-wrap {
width: 200px;
animation: efl-pre-fadein .7s .45s ease both;
}
.efl-pre-bar-track {
width: 100%; height: 2px;
background: rgba(255,255,255,.07);
border-radius: 2px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
}
.efl-pre-bar-fill {
height: 100%;
background: linear-gradient(90deg, #b8943f, #e0b86a, #b8943f);
background-size: 200% 100%;
border-radius: 2px;
width: 0%;
transition: width .3s ease;
animation: efl-pre-shimmer 1.6s linear infinite;
}
@keyframes efl-pre-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── STATUS TEXT ── */
.efl-pre-status {
text-align: center;
font-size: .68rem; letter-spacing: .1em;
text-transform: uppercase;
color: #475569; font-family: 'Outfit', sans-serif;
min-height: 16px;
transition: opacity .3s;
}
/* ── FLOATING THREADS (decorative) ── */
.efl-pre-threads {
position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
}
.efl-pre-thread {
position: absolute;
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(184,148,63,.12), transparent);
animation: efl-pre-thread-fall linear infinite;
}
@keyframes efl-pre-thread-fall {
0% { transform: translateY(-120%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(110vh); opacity: 0; }
}
/* ── BOTTOM BADGE ── */
.efl-pre-bottom {
position: absolute;
bottom: 28px; left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex; align-items: center; gap: 18px;
animation: efl-pre-fadein .7s .6s ease both;
}
.efl-pre-cert {
font-size: .6rem; letter-spacing: .1em;
text-transform: uppercase; color: #334155;
display: flex; align-items: center; gap: 5px;
}
.efl-pre-cert i { color: rgba(184,148,63,.4); }
.efl-pre-cert-dot { width: 3px; height: 3px; border-radius: 50%; background: #1e293b; }