/* =========================================================
* Soléa — Elevation layer
* Le saut qualitatif au-dessus de premium-fx.
*
* Apporte :
* - Typographie editorial serif (Cormorant Garamond)
* - Loading screen avec brand reveal
* - Séparateurs SVG bespoke (motifs architecturaux or)
* - Composant Before/After slider drag
* - Hero parallax multicouches (immersion accrue)
* - Scroll cinematics via CSS scroll-timeline + GSAP fallback
* - Micro-interactions raffinées
* ========================================================= */
:root {
--serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
--sans: 'Montserrat', system-ui, -apple-system, sans-serif;
}
/* =========================================================
* TYPOGRAPHIE — Pairing sans/serif éditorial
* ========================================================= */
.font-serif,
.fx-pullquote blockquote,
.hero-luxe-h1 .serif,
h1.serif,
h2.serif {
font-family: var(--serif);
font-weight: 500;
letter-spacing: -0.01em;
}
/* Pull quote raffinée serif italique */
.fx-pullquote blockquote {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2.6vw, 34px);
line-height: 1.32;
letter-spacing: -0.005em;
}
/* H2 éditoriaux : mix sans/serif possible via span.serif */
.fx-editorial-copy h2 .serif,
.cta-final h2 .serif,
.fx-section-header h2 .serif {
font-family: var(--serif);
font-style: italic;
font-weight: 500;
letter-spacing: 0;
}
/* Section header — eyebrow plus aérien */
.eyebrow-tag {
font-family: var(--sans);
font-feature-settings: "tnum" 1, "ss01" 1;
}
/* =========================================================
* LOADING SCREEN — Brand reveal
* Activé via .loading-active sur , retiré par JS au load
* ========================================================= */
.solea-loader {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: #0d0d10;
pointer-events: none;
transition: opacity .8s var(--fx-ease-out), visibility 0s .8s;
opacity: 0;
visibility: hidden;
}
html.loading-active .solea-loader {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .4s ease, visibility 0s;
}
.solea-loader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
text-align: center;
}
/* Loader minimal : trait or 1px dessine un carré 64×64 sans gradient ni glow.
Le "S" path-drawing (si signature.js charge) ajoutera la lettre par-dessus. */
.solea-loader-mark {
width: 80px;
height: 80px;
position: relative;
background: transparent;
box-shadow: none;
animation: none;
}
.solea-loader-mark::before {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-top-color: var(--fx-gold, #f6b72c);
animation: loaderDraw 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.solea-loader-mark::after {
display: none;
}
@keyframes loaderDraw {
0% { border-top-color: var(--fx-gold); border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; clip-path: inset(0 100% 0 0); }
25% { clip-path: inset(0 0 0 0); border-right-color: var(--fx-gold); border-bottom-color: transparent; border-left-color: transparent; }
50% { border-bottom-color: var(--fx-gold); border-left-color: transparent; }
75% { border-left-color: var(--fx-gold); }
100% { border: 1px solid var(--fx-gold); }
}
.solea-loader-text {
color: #fbf8f2;
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
font-weight: 500;
opacity: 0.85;
}
.solea-loader-bar {
width: 140px;
height: 1px;
background: rgba(251, 248, 242, 0.18);
position: relative;
overflow: hidden;
}
.solea-loader-bar::after {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0; width: 40%;
background: #f6b72c;
animation: loaderBar 1.8s ease-in-out infinite;
}
/* keyframes loaderPulse/loaderRing retirés : code mort (jamais référencés).
Audit perf : -260 octets, déparasitage CSS. */
@keyframes loaderBar {
0% { transform: translateX(-110%); }
50% { transform: translateX(110%); }
100% { transform: translateX(110%); }
}
/* =========================================================
* SÉPARATEURS SVG BESPOKE — Motifs architecturaux or
* Usage :
* ========================================================= */
.fx-rule {
position: relative;
display: block;
width: 100%;
height: 64px;
margin: 48px 0;
overflow: hidden;
}
.fx-rule-pattern {
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 240px auto;
height: 32px;
opacity: 0.7;
}
.fx-rule-cross {
height: 48px;
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 320px auto;
}
/* Section background blueprint subtle */
.fx-bg-blueprint {
position: relative;
isolation: isolate;
}
.fx-bg-blueprint::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(246, 183, 44, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(246, 183, 44, 0.04) 1px, transparent 1px);
background-size: 48px 48px;
background-position: center;
pointer-events: none;
z-index: -1;
mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
/* =========================================================
* BEFORE/AFTER SLIDER
* Markup :
*
*
(visible)
*
*
*
Avant
*
Après
*