/* ───────────────────────────────────────────────────────────── CRIMP. · Site loader · Wordmark pulse Pleine page, overlay au boot — black & white. Usage :

C R I M P

────────────────────────────────────────────────────────── */ .crimp-boot{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--bg-primary, #0a0a0a); /* fade-out when [data-boot="done"] is set */ opacity:1; visibility:visible; transition:opacity .4s ease, visibility .4s ease; } .crimp-boot[data-boot="done"]{ opacity:0; visibility:hidden; pointer-events:none; } /* Le site a deja ete charge recemment (assets probablement en cache) : on saute completement l'ecran de chargement. La classe .no-boot est posee tres tot par un petit script inline en , AVANT le premier paint, donc le loader ne clignote jamais. Il ne s'affiche donc que sur un chargement reellement "froid"/lent (1re visite ou cache expire). */ html.no-boot .crimp-boot{ display:none !important; } .crimp-boot__mark{ display:inline-flex; align-items:baseline; font-family:'Space Grotesk', system-ui, sans-serif; font-weight:700; font-size:clamp(2.2rem, 6vw, 3.6rem); letter-spacing:-.02em; color:#ffffff; /* prevent jank on layout */ line-height:1; } .crimp-boot__ch{ display:inline-block; opacity:.18; animation: crimp-boot-fade 1.8s ease-in-out infinite; } .crimp-boot__ch:nth-child(1){ animation-delay: 0s; } .crimp-boot__ch:nth-child(2){ animation-delay: .12s; } .crimp-boot__ch:nth-child(3){ animation-delay: .24s; } .crimp-boot__ch:nth-child(4){ animation-delay: .36s; } .crimp-boot__ch:nth-child(5){ animation-delay: .48s; } .crimp-boot__dot{ display:inline-block; width:.34em; height:.34em; border-radius:50%; margin-left:.04em; background:#ffffff; transform:scale(1); animation: crimp-boot-dot 1.8s ease-in-out infinite; animation-delay:.6s; } @keyframes crimp-boot-fade{ 0%, 70%, 100% { opacity:.18; } 35% { opacity:1; } } @keyframes crimp-boot-dot{ 0%, 100% { transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.45); } 50% { transform:scale(1.4); box-shadow:0 0 0 12px rgba(255,255,255,0); } } /* a11y — respect user motion preference */ @media (prefers-reduced-motion: reduce){ .crimp-boot__ch, .crimp-boot__dot{ animation:none; } .crimp-boot__ch{ opacity:1; } .crimp-boot{ transition:none; } }