From 90e5ff71161a24213625fe501d959ee5daa9207e Mon Sep 17 00:00:00 2001 From: MVA Global Fret Date: Tue, 5 May 2026 01:55:19 +0200 Subject: [PATCH] Drop the parachute, scale cloud up to 520x360, fit text inside MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Lottie parachute was floating above the cloud as an extra layer, which felt busy. Strip it out — the dotlottie player script tag, the .cta-stack wrapper, the .cta-parachute rule, and assets/parachute.json all go. The cloud is now the only landing element. Bumped width 360→520 and height 200→360 so the Fluent cloud renders much larger; bumped font size 1.15→1.4rem; added a small negative margin-top to seat the text on the cloud's "body" (Fluent's base is heavy, the body sits a bit above the geometric center). Drop animation moved off the wrapper onto the button itself, with the :hover rule overriding animation:none + applying the centered scale transform so hover doesn't fight the keyframe. Co-Authored-By: Claude Opus 4.6 --- assets/parachute.json | 1 - css/parallax.css | 76 +++++++++++++++++-------------------------- index.html | 20 ++++-------- 3 files changed, 37 insertions(+), 60 deletions(-) delete mode 100644 assets/parachute.json diff --git a/assets/parachute.json b/assets/parachute.json deleted file mode 100644 index 849bf86..0000000 --- a/assets/parachute.json +++ /dev/null @@ -1 +0,0 @@ -{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":"#FFFFFF"},"fr":29.9700012207031,"ip":0,"op":76.0000030955435,"w":1080,"h":1080,"nm":"Parachute","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"clouds 4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":83,"s":[573.806,740.36,0],"to":[0,-103.167,0],"ti":[0,103.167,0]},{"t":164.000006679857,"s":[573.806,121.36,0]}],"ix":2},"a":{"a":0,"k":[119.314,39.17,0],"ix":1},"s":{"a":0,"k":[350,350,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[8.714,0],[1.877,-0.534],[10.914,0],[3.592,-6.886],[5.092,0],[0,-11.892],[-0.064,-0.676]],"o":[[-3.39,-7.444],[-2.047,0],[-1.409,-10.529],[-8.304,0],[-3.687,-2.956],[-11.893,0],[0,0.693],[0,0]],"v":[[50.466,15.223],[30.863,2.602],[24.96,3.428],[3.624,-15.223],[-15.475,-3.633],[-28.931,-8.361],[-50.466,13.173],[-50.366,15.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.999999820485,0.999999760646,0.999999820485,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[187.912,62.867],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":83.0000033806593,"op":237.000009653208,"st":83.0000033806593,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"clouds 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":78,"s":[573.806,929.36,0],"to":[0,-108.333,0],"ti":[0,108.333,0]},{"t":138.000005620855,"s":[573.806,279.36,0]}],"ix":2},"a":{"a":0,"k":[119.314,39.17,0],"ix":1},"s":{"a":0,"k":[350,350,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[8.714,0],[1.877,-0.534],[10.914,0],[3.592,-6.886],[5.092,0],[0,-11.893],[-0.064,-0.675]],"o":[[-3.39,-7.444],[-2.047,0],[-1.41,-10.529],[-8.305,0],[-3.687,-2.955],[-11.894,0],[0,0.692],[0,0]],"v":[[50.466,15.223],[30.863,2.602],[24.96,3.428],[3.624,-15.223],[-15.475,-3.633],[-28.931,-8.361],[-50.466,13.174],[-50.366,15.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.999999820485,0.999999760646,0.999999820485,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.716,15.474],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":78.0000031770051,"op":232.000009449554,"st":78.0000031770051,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"clouds 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[573.806,740.36,0],"to":[0,-103.167,0],"ti":[0,103.167,0]},{"t":86.0000035028518,"s":[573.806,121.36,0]}],"ix":2},"a":{"a":0,"k":[119.314,39.17,0],"ix":1},"s":{"a":0,"k":[350,350,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[8.714,0],[1.877,-0.534],[10.914,0],[3.592,-6.886],[5.092,0],[0,-11.892],[-0.064,-0.676]],"o":[[-3.39,-7.444],[-2.047,0],[-1.409,-10.529],[-8.304,0],[-3.687,-2.956],[-11.893,0],[0,0.693],[0,0]],"v":[[50.466,15.223],[30.863,2.602],[24.96,3.428],[3.624,-15.223],[-15.475,-3.633],[-28.931,-8.361],[-50.466,13.173],[-50.366,15.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.999999820485,0.999999760646,0.999999820485,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[187.912,62.867],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5.00000020365417,"op":159.000006476203,"st":5.00000020365417,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"clouds","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[573.806,929.36,0],"to":[0,-108.333,0],"ti":[0,108.333,0]},{"t":60.0000024438501,"s":[573.806,279.36,0]}],"ix":2},"a":{"a":0,"k":[119.314,39.17,0],"ix":1},"s":{"a":0,"k":[350,350,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[8.714,0],[1.877,-0.534],[10.914,0],[3.592,-6.886],[5.092,0],[0,-11.893],[-0.064,-0.675]],"o":[[-3.39,-7.444],[-2.047,0],[-1.41,-10.529],[-8.305,0],[-3.687,-2.955],[-11.894,0],[0,0.692],[0,0]],"v":[[50.466,15.223],[30.863,2.602],[24.96,3.428],[3.624,-15.223],[-15.475,-3.633],[-28.931,-8.361],[-50.466,13.174],[-50.366,15.223]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.999999820485,0.999999760646,0.999999820485,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[50.716,15.474],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":154.000006272549,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"bckg","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[544.166,543.606,0],"ix":2},"a":{"a":0,"k":[99.94,91.075,0],"ix":1},"s":{"a":0,"k":[627,627,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[30.475,-38.891],[25.593,20.134],[-34.579,34.578],[-25.101,-13.526]],"o":[[-30.163,38.492],[-26.42,-20.786],[34.578,-34.579],[30.097,16.219]],"v":[[58.955,50.305],[-51.846,67.373],[-56.38,-37.151],[43.042,-47.566]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.964142683441,0.946818692076,0.743500533758,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[99.94,91.075],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":154.000006272549,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"Null 1","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":0,"s":[15]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":40,"s":[-18]},{"t":75.0000030548126,"s":[15]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[540,576,0],"to":[0,-10.833,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":40,"s":[540,511,0],"to":[0,0,0],"ti":[0,-10.833,0]},{"t":75.0000030548126,"s":[540,576,0]}],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":154.000006272549,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"parachute","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[13.766,37.167,0],"ix":2},"a":{"a":0,"k":[69.317,118.345,0],"ix":1},"s":{"a":0,"k":[286,286,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[34.409,-24.811],[-34.409,24.811]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.236878204346,0.209157352821,0.105011868944,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[103.726,93.879],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[20.629,-24.823],[-20.629,24.823]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.236878204346,0.209157352821,0.105011868944,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[89.946,93.866],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-34.409,-24.949],[34.409,24.949]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.236878204346,0.209157352821,0.105011868944,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[34.909,93.741],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-20.753,-24.811],[20.753,24.811]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.236878204346,0.209157352821,0.105011868944,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[48.564,93.879],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[13.798,-24.817],[0.125,24.817],[-13.798,-24.808]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.236878204346,0.209157352821,0.105011868944,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":1,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[69.192,93.873],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[38.008,0],[0.084,0],[-0.01,-0.056],[0,0],[-7.465,-7.464],[0,0],[0,0],[0,0],[19.666,30.573],[7.082,-52.124],[0,0],[-7.465,-7.465],[0,0]],"o":[[-0.085,0],[-19.834,30.837],[0,0],[7.464,-7.464],[0,0],[0,0],[0,0],[0.107,-0.698],[0,0],[0,0],[7.465,-7.465],[0,0],[0,-38.007]],"v":[[-24.366,-34.41],[-24.619,-34.406],[-38.287,34.406],[-38.015,34.133],[-10.982,34.133],[-10.706,34.41],[-10.705,34.41],[-10.692,34.396],[-24.617,-34.403],[16.894,34.383],[17.145,34.133],[44.177,34.133],[44.453,34.41]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.985627297794,0.243347287646,0.204405391918,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[93.449,34.661],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":2,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.4,0.139],[0.149,-37.794],[-7.465,-7.465],[0,0],[0,0]],"o":[[-37.795,0.14],[7.465,-7.465],[0,0],[0,0],[-7.076,-51.931]],"v":[[34.277,-34.408],[-34.277,34.133],[-7.245,34.133],[-6.969,34.408],[-6.968,34.408]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.985627297794,0.243347287646,0.204405391918,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[34.545,34.662],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":2,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[38.008,0],[0.076,0],[0,0],[0.149,-37.793],[-7.464,-7.465],[0,0],[0,0],[0,0],[-7.465,-7.465],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-7.465,-7.464],[0,0],[0,0],[0,0],[0,0],[-7.465,-7.464],[0,0],[0,0],[0,0],[-7.465,-7.464],[0,0]],"o":[[-0.074,0],[0,0],[-37.796,0.141],[7.465,-7.465],[0,0],[0,0],[0,0],[7.464,-7.465],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[7.465,-7.464],[0,0],[0,0],[0,0],[0,0],[7.464,-7.464],[0,0],[0,0],[0,0],[7.465,-7.464],[0,0],[0,-38.008]],"v":[[-0.021,-34.41],[-0.245,-34.407],[-0.244,-34.408],[-68.799,34.132],[-41.767,34.132],[-41.49,34.408],[-41.489,34.408],[-41.212,34.132],[-14.18,34.132],[-13.936,34.376],[-13.942,34.406],[-13.924,34.387],[-13.906,34.405],[-13.905,34.404],[-13.896,34.359],[-13.67,34.133],[13.363,34.133],[13.639,34.41],[13.641,34.41],[13.654,34.396],[13.917,34.133],[40.951,34.133],[41.219,34.404],[41.24,34.383],[41.491,34.133],[68.523,34.133],[68.799,34.41]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.999999820485,0.999999760646,0.999999820485,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.43,34.66],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8","np":2,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":154.000006272549,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/css/parallax.css b/css/parallax.css index 308e1a8..9baf2c7 100644 --- a/css/parallax.css +++ b/css/parallax.css @@ -117,61 +117,43 @@ html, body { linear-gradient(180deg, transparent 50%, rgba(5, 5, 24, 0.35) 100%); } -/* ── PARACHUTE + BOUTON-NUAGE ──────────────────────────────────────────── - Le bloc tombe du haut de l'écran jusqu'au centre via translateY animé, - plus rapide que les parachutes de la vidéo (~1.6s vs 7s). Après l'atter- - rissage, le parachute Lottie continue à boucler doucement au-dessus - du nuage. Aucune parallaxe souris sur ce groupe — la chute est l'effet. */ -.cta-stack { +/* ── BOUTON-NUAGE ──────────────────────────────────────────────────────── + Le nuage tombe du haut jusqu'au centre via animation, ~3.4s avec léger + overshoot. Une fois posé, hover scale léger. */ +.cloud-btn { position: absolute; top: 50%; left: 50%; z-index: 10; - display: flex; - flex-direction: column; + display: inline-flex; align-items: center; - pointer-events: none; - transform: translate(-50%, -50%); - animation: parachute-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both; + justify-content: center; + text-decoration: none; + width: 520px; + height: 360px; + color: var(--navy); + font-family: 'Poppins', sans-serif; + font-weight: 700; + font-size: 1.4rem; + letter-spacing: 0.4px; + white-space: nowrap; + filter: drop-shadow(0 28px 38px rgba(20, 20, 50, 0.45)); + animation: cloud-drop 3.4s cubic-bezier(0.34, 0.4, 0.5, 1) 0.3s both; } -.cta-stack > * { pointer-events: auto; } -@keyframes parachute-drop { +@keyframes cloud-drop { 0% { transform: translate(-50%, -130vh); opacity: 0; } 10% { opacity: 1; } 85% { transform: translate(-50%, -42%); opacity: 1; } 100% { transform: translate(-50%, -50%); } } -.cta-parachute { - width: 170px; - height: 170px; - margin-bottom: -22px; - filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35)); - pointer-events: none; +.cloud-btn:hover { + transform: translate(-50%, -50%) scale(1.05); + /* hover désactive l'animation de chute pour que scale ne saute pas */ + animation: none; } -/* ── BOUTON-NUAGE ──────────────────────────────────────────────────────── - Image de nuage 3D en fond, débordant le texte. Le texte est devant. */ -.cloud-btn { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - text-decoration: none; - width: 360px; - height: 200px; - color: var(--navy); - font-family: 'Poppins', sans-serif; - font-weight: 700; - font-size: 1.15rem; - letter-spacing: 0.4px; - white-space: nowrap; - filter: drop-shadow(0 22px 30px rgba(20, 20, 50, 0.45)); - transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); -} -.cloud-btn:hover { transform: scale(1.05); } - .cloud-bg { position: absolute; inset: 0; @@ -183,17 +165,20 @@ html, body { user-select: none; } +/* Texte centré sur le « cœur » du nuage (légèrement plus haut que le centre + géométrique de l'image, parce que le nuage Fluent a une grosse base et un + sommet bombé). */ .cloud-content { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 14px; - padding-top: 8px; /* aligne sur le « cœur » du nuage */ - text-shadow: 0 1px 2px rgba(255,255,255,0.7); + margin-top: -10px; + text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } .cloud-content i { - font-size: 0.95rem; + font-size: 1.05rem; transition: transform 0.32s ease; } .cloud-btn:hover .cloud-content i { transform: translateX(6px); } @@ -205,10 +190,9 @@ html, body { .parallax-logo img { height: 38px; } .lang-switcher button { padding: 5px 10px; font-size: 0.74rem; } - .cta-parachute { width: 130px; height: 130px; margin-bottom: -16px; } - .cloud-btn { width: 280px; height: 160px; font-size: 1rem; } + .cloud-btn { width: 360px; height: 250px; font-size: 1.05rem; } } @media (prefers-reduced-motion: reduce) { - .cta-stack { animation: none; } + .cloud-btn { animation: none; } } diff --git a/index.html b/index.html index 4fae8fb..814d73f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@ - @@ -37,18 +36,13 @@
-
- - - - - Accéder au site - - - -
+ + + + Accéder au site + + +