/* ════════════════════════════════════════════════════════════════════ THE INTERSTICE — kit de transition inter-sites (CSS) Fichier IDENTIQUE sur les 4 repos. Tout est préfixé .ix- pour ne jamais entrer en collision avec les styles de chaque site. Le voile est injecté dans par interstice-transition.js. ════════════════════════════════════════════════════════════════════ */ .ix-voile { --ix-encre: #1C1A17; --ix-creme: #F5F0E8; --ix-ocre: #C4913A; --ix-ocre-clair: #E0B566; --ix-terre-nuit: #281D12; --ix-serif: 'Fraunces', Georgia, serif; --ix-mono: 'JetBrains Mono', ui-monospace, monospace; --ix-cover: 560ms; --ix-reveal: 680ms; --ix-ease: cubic-bezier(0.65, 0, 0.35, 1); --ix-ease-out: cubic-bezier(0.22, 1, 0.36, 1); position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; clip-path: var(--ix-clip-hidden); transition: clip-path var(--ix-cover) var(--ix-ease); will-change: clip-path; } .ix-voile.ix-on { pointer-events: auto; } .ix-voile.ix-cover { clip-path: var(--ix-clip-full); } .ix-voile.ix-reveal { clip-path: var(--ix-clip-reveal); transition-duration: var(--ix-reveal); } .ix-voile.ix-instant { transition: none !important; } .ix-voile__fill { position: absolute; inset: 0; } .ix-voile__deco { position: absolute; inset: 0; overflow: hidden; } .ix-voile__label { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; opacity: 0; transition: opacity .42s ease .14s; } .ix-voile.ix-cover .ix-voile__label { opacity: 1; } .ix-voile.ix-reveal .ix-voile__label { opacity: 0; transition: opacity .22s ease; } .ix-voile__num { font-family: var(--ix-mono); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; } .ix-voile__name { font-family: var(--ix-serif); font-style: italic; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 300; } /* ── 01 · VITRINE — crème, dépli haut→bas, points + arête diagonale ── */ .ix-voile[data-kind="vitrine"] { --ix-clip-hidden: inset(0 0 100% 0); --ix-clip-full: inset(0 0 0 0); --ix-clip-reveal: inset(100% 0 0 0); } .ix-voile[data-kind="vitrine"] .ix-voile__fill { background: radial-gradient(ellipse 70% 80% at 50% 30%, #FBF7EF 0%, var(--ix-creme) 70%); } .ix-voile[data-kind="vitrine"] .ix-voile__num { color: var(--ix-ocre); } .ix-voile[data-kind="vitrine"] .ix-voile__name { color: var(--ix-encre); } .ix-voile__vt-dots { position: absolute; inset: 0; opacity: 0; transform: translateY(-24px); background-image: radial-gradient(circle, var(--ix-ocre) 1.8px, transparent 2.2px); background-size: 32px 32px; transition: opacity .5s ease, transform .8s var(--ix-ease-out); } .ix-voile.ix-cover[data-kind="vitrine"] .ix-voile__vt-dots { opacity: 0.4; transform: none; } .ix-voile.ix-reveal[data-kind="vitrine"] .ix-voile__vt-dots { opacity: 0; } .ix-voile__vt-diag { position: absolute; left: 8%; top: 64%; height: 2px; width: 0; transform: skewX(-4deg); transform-origin: left; background: rgba(196,145,58,0.85); box-shadow: 0 0 12px rgba(224,181,102,0.5); transition: width .6s var(--ix-ease-out) .2s; } .ix-voile.ix-cover[data-kind="vitrine"] .ix-voile__vt-diag { width: 60%; } /* ── 02 · PORTFOLIO — encre, plongée iris, cube fil-de-fer qui se trace ── */ .ix-voile[data-kind="portfolio"] { --ix-clip-hidden: circle(0% at 30% 52%); --ix-clip-full: circle(150% at 30% 52%); --ix-clip-reveal: circle(0% at 30% 52%); } .ix-voile[data-kind="portfolio"] .ix-voile__fill { background: radial-gradient(ellipse 80% 80% at 30% 52%, #1a1612 0%, #0a0805 80%); } .ix-voile[data-kind="portfolio"] .ix-voile__num { color: var(--ix-ocre-clair); } .ix-voile[data-kind="portfolio"] .ix-voile__name { color: var(--ix-creme); } .ix-voile__pf-cube { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(200px, 34vw, 440px); height: auto; } .ix-voile__pf-cube line { stroke: var(--ix-ocre); stroke-dasharray: 200; stroke-dashoffset: 200; } .ix-voile.ix-cover[data-kind="portfolio"] .ix-voile__pf-cube line { stroke-dashoffset: 0; transition: stroke-dashoffset .62s var(--ix-ease-out) .1s; } .ix-voile.ix-reveal[data-kind="portfolio"] .ix-voile__pf-cube { opacity: 0; transition: opacity .3s ease; } /* ── 03 · BLOG — terre, balayage droite→gauche, filet doré ── */ .ix-voile[data-kind="blog"] { --ix-clip-hidden: inset(0 0 0 100%); --ix-clip-full: inset(0 0 0 0); --ix-clip-reveal: inset(0 100% 0 0); } .ix-voile[data-kind="blog"] .ix-voile__fill { background: linear-gradient(160deg, #3a2c1b 0%, var(--ix-terre-nuit) 70%, #1c140c 100%); } .ix-voile[data-kind="blog"] .ix-voile__num { color: var(--ix-ocre-clair); } .ix-voile[data-kind="blog"] .ix-voile__name { color: var(--ix-creme); } .ix-voile__bl-sheen { position: absolute; inset: 0; transform: translateX(60%); background: linear-gradient(100deg, transparent 40%, rgba(224,181,102,0.14) 50%, transparent 60%); transition: transform .7s var(--ix-ease); } .ix-voile.ix-cover[data-kind="blog"] .ix-voile__bl-sheen { transform: translateX(-60%); } .ix-voile__bl-filet { position: absolute; left: 0; bottom: 22%; height: 2px; width: 0; background: linear-gradient(90deg, var(--ix-ocre-clair), rgba(196,145,58,0.3)); box-shadow: 0 0 14px rgba(224,181,102,0.4); transition: width .6s var(--ix-ease-out) .15s; } .ix-voile.ix-cover[data-kind="blog"] .ix-voile__bl-filet { width: 100%; } /* ── Retour sur la landing : pulse doré sur la face d'origine ── */ [data-ix-origin]::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 30; box-shadow: inset 0 0 0 2px var(--ix-ocre-clair, #E0B566); opacity: 0; animation: ix-origin-pulse 1400ms cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes ix-origin-pulse { 0% { opacity: 0.9; } 100% { opacity: 0; } } /* ── MIROIR (WP ↔ Astro) — retournement sur l'axe d'or central ─────── */ .ix-flip-stage { perspective: 2200px; perspective-origin: 50% 42%; /* clip et non hidden : `overflow-x: hidden` force `overflow-y: auto` (spec CSS), ce qui transfère la scrollbar du au et rétrécit le body de la largeur de la scrollbar — d'où le décalage de ~8px du contenu vers la gauche. */ overflow-x: clip; } .ix-flip-root { width: 100%; margin: 0 auto; /* filet de sécurité si la scrollbar décale le containing block */ transform-style: preserve-3d; transform-origin: 50% 50%; backface-visibility: hidden; min-height: 100vh; will-change: transform; } @media (prefers-reduced-motion: reduce) { .ix-voile, .ix-voile *, [data-ix-origin]::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } .ix-flip-root { transform: none !important; } }