/* ============================================================ IN MY ELEMENT — FX LAYER (couche d'interactions signature) Direction artistique : maison de cuir, Londres. ------------------------------------------------------------ RÈGLE D'OR DE CE FICHIER : rien n'est masqué tant que ne porte PAS la classe .fx, posée par fx.js de façon synchrone. Si le JS échoue, est bloqué ou si l'utilisateur demande "mouvement réduit", la page reste intégralement visible, lisible et navigable. ------------------------------------------------------------ Contraste (bible §8) : le vert est un CHAMP, jamais une ENCRE sur fond clair. Sur ivoire on écrit en aubergine ou en or-encre. Le vert n'écrit que sur aubergine / noir cuir. ============================================================ */ :root{ /* Courbes — éditoriales, jamais rebondissantes */ --fx-ease-curtain: cubic-bezier(.16,.84,.28,1); /* le rideau qui se lève */ --fx-ease-sheet: cubic-bezier(.76,0,.24,1); /* le volet qui balaie */ --fx-ease-soft: cubic-bezier(.22,.61,.36,1); --fx-dur-curtain: 1.05s; --fx-dur-filet: 1.45s; /* Couches */ --fx-z-selvedge: 90; /* sous le header (100) */ --fx-z-cursor: 9998; --fx-z-veil: 9999; /* Curseur */ --fx-cur-ring: 34px; --fx-cur-dot: 4px; } /* ============================================================ 01 — LE RIDEAU · révélation typographique par masque vertical Intention : un titre de maison ne s'affiche pas, il se lève. Le mot monte de derrière une ligne, comme une pièce que l'on remonte du plateau de coupe. Puis un filet passe et le scelle (le gaufrage). ============================================================ */ /* Le masque : posé par JS AUTOUR de l'élément d'origine. --fx-fs est la taille de police RÉELLE de la ligne masquée (px, écrite par le JS) : le débord se calcule donc sur la ligne, jamais sur la police héritée du parent — sans quoi une lisière de texte armé dépasse sous la coupe des lignes en petit corps. Débord haut/latéral généreux (ombres portées, ascendantes, accents), coupe nette à 0.20 × corps sous la ligne de pied. */ html.fx .fx-line{ position:relative; --fx-fs: 1em; clip-path: inset( calc(var(--fx-fs) * -0.60) -240px calc(var(--fx-fs) * -0.20) -240px ); } html.fx .fx-rise{ transform: translateY(140%); transition: transform var(--fx-dur-curtain) var(--fx-ease-curtain) var(--fx-d, 0s); will-change: transform; } html.fx .fx-line.is-in > .fx-rise{ transform: none; } html.fx .fx-line.is-done > .fx-rise{ will-change: auto; } /* Le hero possède déjà une animation d'entrée ; la couche FX la remplace par le rideau (spécificité supérieure, sans !important). */ html.fx .hero-q span.fx-rise{ animation:none; opacity:1; } html.fx .uni-statement span.fx-rise{ animation:none; opacity:1; } /* Le filet de gaufrage — passe sous le mot, puis se retire. currentColor : or/aubergine sur ivoire, vert sur cuir. Toujours conforme. */ html.fx .fx-line--filet::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: currentColor; opacity:.42; transform: scaleX(0); transform-origin: left center; pointer-events:none; } html.fx .fx-line--filet.is-in::after{ animation: fx-filet var(--fx-dur-filet) var(--fx-ease-sheet) var(--fx-d, 0s) forwards; } @keyframes fx-filet{ 0% { transform: scaleX(0); transform-origin:left center } 46% { transform: scaleX(1); transform-origin:left center } 54% { transform: scaleX(1); transform-origin:right center } 100%{ transform: scaleX(0); transform-origin:right center } } /* ============================================================ 02 — PARALLAXE DE MATIÈRE Intention : le cuir a une épaisseur. L'image ne défile pas à la même vitesse que le papier : la matière traîne, elle a du poids. Technique : propriétés individuelles `translate` + `scale`, qui NE TOUCHENT PAS au `transform` existant (zoom au survol, wipe). ============================================================ */ html.fx .fx-par{ scale: var(--fx-ps, 1.10); will-change: transform; } /* `translate` est écrit en JS, hors de toute transition : on force la liste de transitions à ignorer les translations. */ html.fx img.fx-par, html.fx video.fx-par{ transition-property: transform, filter, opacity; } /* ============================================================ 03 — LE VOLET · écran d'ouverture (1,4 s, une fois par session) Intention : on n'entre pas dans une maison par la vitrine. Le monogramme se trace, le vert balaie — et la maison est là. Le vert n'est jamais un décor : il est le geste d'ouverture. ============================================================ */ /* Aucun verrou de scroll : on ne confisque jamais la page à qui la visite. Le volet est purement visuel (pointer-events:none, aucun focusable). Poser overflow:hidden sur casserait en outre définitivement la propagation body→viewport de overflow-x (Chrome). */ .fx-veil{ position:fixed; inset:0; z-index:var(--fx-z-veil); pointer-events:none; /* ne piège ni le focus, ni le clic, ni le scroll */ } .fx-veil__bg{ position:absolute; inset:0; background:var(--noir); display:grid; place-items:center; animation: fx-veil-off 1ms linear 880ms forwards; } @keyframes fx-veil-off{ to{ opacity:0; visibility:hidden } } .fx-veil__stage{ display:grid; place-items:center; gap:1.5rem; } .fx-veil__mark{ width:84px; height:84px; display:block; overflow:visible } .fx-veil__mark circle{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-dasharray: 327; stroke-dashoffset: 327; animation: fx-draw 620ms var(--fx-ease-soft) 60ms forwards; } .fx-veil__mark text{ fill:var(--gold-soft); font-family:var(--sans); font-size:21px; letter-spacing:.18em; opacity:0; animation: fx-in 420ms var(--fx-ease-soft) 380ms forwards; } @keyframes fx-draw{ to{ stroke-dashoffset:0 } } @keyframes fx-in{ to{ opacity:1 } } .fx-veil__word{ font-family:var(--sans); font-weight:300; text-transform:uppercase; color:var(--paper); font-size:clamp(.82rem, 2.6vw, 1.06rem); letter-spacing:.72em; text-indent:.72em; opacity:0; animation: fx-word 760ms var(--fx-ease-curtain) 180ms forwards; text-align:center; } .fx-veil__word small{ display:block; margin-top:1rem; font-size:.56em; letter-spacing:.48em; text-indent:.48em; color:var(--ime-green); } @keyframes fx-word{ 0% { opacity:0; letter-spacing:.95em; text-indent:.95em } 60% { opacity:1 } 100%{ opacity:1; letter-spacing:.34em; text-indent:.34em } } .fx-veil__sheet{ position:absolute; inset:0; background:var(--ime-green); transform: translateX(-101%); animation: fx-sheet 900ms 470ms forwards; } @keyframes fx-sheet{ 0% { transform:translateX(-101%); animation-timing-function:cubic-bezier(.7,0,.28,1) } 44% { transform:translateX(0); animation-timing-function:linear } 56% { transform:translateX(0); animation-timing-function:cubic-bezier(.72,0,.3,1) } 100%{ transform:translateX(101%) } } /* ============================================================ 04 — LE CURSEUR · « l'œil de la maison » Intention : le curseur système est un outil de bureau. Ici c'est un échantillon de cuir qui se promène : anneau fin, inertie de matière, et qui devient un MOT devant une pièce. Il change d'encre selon le champ traversé — jamais de vert illisible sur ivoire (bible §8). ============================================================ */ html.fx-hidecursor, html.fx-hidecursor *{ cursor:none } /* on rend toujours la main aux champs de saisie */ html.fx-hidecursor input, html.fx-hidecursor textarea, html.fx-hidecursor [contenteditable="true"]{ cursor:text } html.fx-hidecursor select, html.fx-hidecursor option{ cursor:auto } /* dès la première tabulation, le curseur système revient : clavier prioritaire */ html.fx-kb, html.fx-kb *{ cursor:auto } html.fx-kb .fx-cursor{ display:none } .fx-cursor{ position:fixed; top:0; left:0; width:0; height:0; z-index:var(--fx-z-cursor); pointer-events:none; --fx-c: var(--ink); /* champ clair : encre aubergine */ --fx-c-on: var(--ime-green); /* vert sur aubergine = 8,4:1 */ opacity:0; transition: opacity .28s var(--fx-ease-soft); } .fx-cursor.is-live{ opacity:1 } .fx-cursor.is-dark{ --fx-c: var(--ime-green); /* champ cuir : vert Élément */ --fx-c-on: var(--noir); /* noir sur vert = 10,6:1 */ } html.fx-veiling .fx-cursor{ opacity:0 } .fx-cursor__ring, .fx-cursor__dot, .fx-cursor__label{ position:absolute; top:0; left:0; transform: translate3d(-100px,-100px,0); will-change: transform; } .fx-cursor__ring{ width:var(--fx-cur-ring); height:var(--fx-cur-ring); margin:calc(var(--fx-cur-ring)/-2) 0 0 calc(var(--fx-cur-ring)/-2); border:1px solid var(--fx-c); border-radius:50%; background:transparent; transition: background-color .34s var(--fx-ease-soft), border-color .34s var(--fx-ease-soft), opacity .24s linear; } .fx-cursor.is-word .fx-cursor__ring{ background:var(--fx-c); border-color:var(--fx-c) } .fx-cursor.is-hidden .fx-cursor__ring, .fx-cursor.is-hidden .fx-cursor__dot{ opacity:0 } .fx-cursor__dot{ width:var(--fx-cur-dot); height:var(--fx-cur-dot); margin:calc(var(--fx-cur-dot)/-2) 0 0 calc(var(--fx-cur-dot)/-2); border-radius:50%; background:var(--fx-c); transition: opacity .24s linear, background-color .34s var(--fx-ease-soft); } .fx-cursor.is-grow .fx-cursor__dot, .fx-cursor.is-word .fx-cursor__dot{ opacity:0 } .fx-cursor__label{ display:grid; place-items:center; } .fx-cursor__label span{ display:block; transform:translate(-50%,-50%); font-family:var(--sans); font-weight:400; text-transform:uppercase; font-size:.66rem; letter-spacing:.2em; text-indent:.2em; line-height:1; color:var(--fx-c-on); white-space:nowrap; opacity:0; transition: opacity .26s var(--fx-ease-soft); } .fx-cursor.is-word .fx-cursor__label span{ opacity:1; transition-delay:.08s } /* ============================================================ 05 — LA LISIÈRE · l'effet signature (la tranche du volume) Intention : ce site n'est pas une page, c'est un ouvrage relié. Un filet à la lisière gauche — comme la tranche cousue d'un lookbook — se remplit à mesure qu'on descend, et la maison NUMÉROTE SES PROPRES PAGES (01 — 07), en Space Mono, exactement la grammaire des quatre verbes 01 Porter · 02 Écrire. Le filet est or sur ivoire (usage « filets fins », bible §2), vert sur cuir. Décoratif, aria-hidden, jamais dans le flux. ============================================================ */ .fx-selvedge{ position:fixed; left:clamp(10px, calc(var(--gutter) * .30), 26px); top:0; height:100vh; height:100dvh; z-index:var(--fx-z-selvedge); display:none; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; pointer-events:none; color:var(--gold-ink); opacity:0; transition: opacity .6s var(--fx-ease-soft), color .5s var(--fx-ease-soft); } .fx-selvedge.is-live{ opacity:1 } .fx-selvedge.is-dark{ color:var(--ime-green) } html.fx-veiling .fx-selvedge{ opacity:0 } .fx-selvedge__num{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; line-height:1; display:grid; justify-items:center; gap:.35rem; } .fx-selvedge__num i{ font-style:normal; opacity:.42; font-size:.9em } .fx-selvedge__rule{ position:relative; display:block; width:1px; height:min(26vh, 210px); background:currentColor; opacity:.22; } .fx-selvedge__rule i{ position:absolute; inset:0; display:block; background:currentColor; opacity:1; transform:scaleY(0); transform-origin:top center; /* pas de transition : le remplissage suit le scroll au 1:1 */ } .fx-selvedge__label{ writing-mode: vertical-rl; transform: rotate(180deg); font-family:var(--sans); font-size:.6rem; font-weight:400; letter-spacing:.28em; text-transform:uppercase; white-space:nowrap; max-height:34vh; overflow:hidden; transition: opacity .4s var(--fx-ease-soft); } .fx-selvedge__label.is-swap{ opacity:0 } @media (min-width:1200px){ html.fx .fx-selvedge{ display:flex } } /* le tiroir mobile / une modale prend toujours le dessus */ body:has(.drawer.is-open) .fx-selvedge{ opacity:0 } /* ============================================================ 06 — MAGNÉTISME Intention : un bouton de maison ne « pop » pas au survol. Il consent. Il se déplace de quelques points vers la main — moins vite qu'elle. La retenue est le luxe. Écrit via la propriété individuelle `translate` : aucun conflit avec les `transform` existants. ============================================================ */ html.fx .fx-magnet{ transition: translate .55s var(--fx-ease-soft); } html.fx .fx-magnet.is-pulled{ transition: translate .12s linear; } /* ============================================================ 07 — FOCUS CLAVIER : jamais dégradé, toujours renforcé ============================================================ */ html.fx :focus-visible{ outline:2px solid var(--ime-green-deep); outline-offset:3px; } html.fx [data-theme="noir"] :focus-visible, html.fx .footer :focus-visible, html.fx .hero :focus-visible, html.fx .uni-head :focus-visible{ outline-color:var(--ime-green); } /* un élément qui prend le focus ne peut pas rester masqué */ html.fx .fx-line:focus-within{ clip-path:none } html.fx .fx-line:focus-within > .fx-rise{ transform:none } /* ============================================================ MOUVEMENT RÉDUIT — tout se désarme, rien ne disparaît (ceinture + bretelles : fx.js ne pose déjà pas .fx dans ce cas) ============================================================ */ @media (prefers-reduced-motion: reduce){ html.fx .fx-line{ clip-path:none !important } html.fx .fx-rise{ transform:none !important; transition:none !important; will-change:auto } html.fx .fx-line--filet::after{ display:none } html.fx .fx-par{ scale:1 !important; translate:none !important; will-change:auto } html.fx .fx-magnet{ translate:none !important; transition:none !important } .fx-veil{ display:none !important } .fx-cursor{ display:none !important } html.fx-hidecursor, html.fx-hidecursor *{ cursor:auto } .fx-selvedge, .fx-selvedge *{ transition:none !important } } /* Tactile / pointeur grossier : ni curseur, ni magnétisme */ @media (hover:none), (pointer:coarse){ .fx-cursor{ display:none !important } html.fx-hidecursor, html.fx-hidecursor *{ cursor:auto } html.fx .fx-magnet{ translate:none !important } }