forked from TagesschuleElementa/www.tagesschule-elementa.ch
migrations
This commit is contained in:
1
private/animation/creativity.json
Normal file
1
private/animation/creativity.json
Normal file
File diff suppressed because one or more lines are too long
1
private/animation/curiosity.json
Normal file
1
private/animation/curiosity.json
Normal file
@@ -0,0 +1 @@
|
||||
{"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Formebene 3","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[20,20,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0]],"o":[[0,0]],"v":[[14.688,-20.562]],"c":false}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":3},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Form 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"Formebene 2","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[20,20,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[13.875,-8.125],[5.875,-3.688],[5.938,2.938],[13.938,7.438]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":1.6},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Form 1","np":3,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[19.538,15.46]},"p":{"k":[0,0]},"r":{"k":0},"nm":"Rechteckpfad: 1","mn":"ADBE Vector Shape - Rect"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":1.6},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[-3.856,-0.145],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Rechteck 1","np":3,"mn":"ADBE Vector Group"},{"ty":"rd","nm":"Runde Ecken 1","r":{"k":2},"mn":"ADBE Vector Filter - RC"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"Formebene 1","ks":{"o":{"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":9,"s":[100],"e":[0]},{"i":{"x":[0.667],"y":[0.667]},"o":{"x":[0.333],"y":[0.333]},"n":["0p667_0p667_0p333_0p333"],"t":12,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p833_1_0p333_0"],"t":20,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":25,"s":[100],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.333],"y":[0.333]},"n":["0p833_0p833_0p333_0p333"],"t":28,"s":[100],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":45,"s":[100],"e":[0]},{"i":{"x":[0.667],"y":[0.667]},"o":{"x":[0.333],"y":[0.333]},"n":["0p667_0p667_0p333_0p333"],"t":48,"s":[0],"e":[0]},{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p833_1_0p333_0"],"t":56,"s":[0],"e":[100]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":61,"s":[100],"e":[100]},{"t":64}]},"r":{"k":0},"p":{"k":[16.375,20,0]},"a":{"k":[-3.625,0,0]},"s":{"k":[80,80,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[7.043,7.043]},"p":{"k":[0,0]},"nm":"Elliptischer Pfad 1","mn":"ADBE Vector Shape - Ellipse"},{"ty":"fl","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"k":[-3.604,0.01],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Ellipse 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1}],"v":"4.5.0","ddd":0,"ip":0,"op":75,"fr":25,"w":40,"h":40}
|
||||
1
private/animation/education.json
Normal file
1
private/animation/education.json
Normal file
File diff suppressed because one or more lines are too long
1
private/animation/happiness.json
Normal file
1
private/animation/happiness.json
Normal file
@@ -0,0 +1 @@
|
||||
{"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"noun_548592 Outlines 2","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[20,20,0]},"a":{"k":[50,50,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[2.8,0],[1.7,-1.2],[2.2,0],[1.9,-1.9],[0,-2.7],[-1.9,-1.9],[0,0],[-1,0],[-0.7,0.7],[0,0],[0,2.7],[1.9,1.9]],"o":[[-2.1,0],[-1.7,-1.2],[-2.7,0],[-1.9,1.9],[0,2.7],[0,0],[0.7,0.7],[1,0],[0,0],[1.9,-1.9],[0,-2.7],[-1.9,-2]],"v":[[5.9,-14.5],[0,-12.6],[-5.9,-14.5],[-13.1,-11.5],[-16.1,-4.3],[-13.1,2.9],[-2.6,13.4],[0,14.5],[2.6,13.4],[13.1,2.9],[16.1,-4.3],[13.1,-11.5]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":6},"lc":1,"lj":1,"ml":10,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[49.999,50.814],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":0,"s":[40.506,40.506],"e":[45,45]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":24,"s":[45,45],"e":[40.506,40.506]},{"i":{"x":[0.667,0.667],"y":[0.667,0.667]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p667_0p667_0p167_0p167","0p667_0p667_0p167_0p167"],"t":43,"s":[40.506,40.506],"e":[40.506,40.506]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":50,"s":[40.506,40.506],"e":[45,45]},{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":79,"s":[45,45],"e":[40.506,40.506]},{"t":91}],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"mn":"ADBE Vector Group"},{"ty":"tm","s":{"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":54,"s":[0],"e":[100]},{"t":65}],"ix":1},"e":{"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":0,"s":[0],"e":[100]},{"t":20}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"noun_548592 Outlines","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[20,20,0]},"a":{"k":[50,50,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[4.7,-5.1],[-0.3,-0.9],[-1.5,-1.6],[2.4,1.4],[0.8,-0.5],[6.4,0],[0,15.6],[-18,0],[0,-15.6]],"o":[[-0.6,0.7],[0.8,2.2],[-3,-0.1],[-0.8,-0.5],[-5.3,3],[-18,0],[0,-15.6],[18,0],[0.1,6.4]],"v":[[25.45,17.6],[24.95,20.2],[28.45,26],[20.35,23.7],[17.85,23.7],[-0.05,28.3],[-32.65,0],[-0.05,-28.3],[32.55,0]],"c":true}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":6},"lc":1,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[50.049,50],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[47.801,47.801],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"mn":"ADBE Vector Group"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1}],"v":"4.5.0","ddd":0,"ip":0,"op":75,"fr":25,"w":40,"h":40}
|
||||
1
private/animation/learning.json
Normal file
1
private/animation/learning.json
Normal file
@@ -0,0 +1 @@
|
||||
{"assets":[],"layers":[{"ddd":0,"ind":0,"ty":4,"nm":"Shape Layer 6","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[20,21.5,0],"e":[20,18,0],"to":[0,-0.58333331346512,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":38,"s":[20,18,0],"e":[20,21.5,0],"to":[0,0,0],"ti":[0,-0.58333331346512,0]},{"t":74}]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-0.599,-9.361],[4.801,-13.414],[8.942,-8.143]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Shape 2","np":3,"mn":"ADBE Vector Group"},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[-3.195,12.249],[0,0]],"o":[[0,0],[0.75,-2.875],[0,0]],"v":[[-15.25,8.125],[3.5,-4.875],[4.812,-13.312]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":2,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Shape 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 5","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[21.062,21.125,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[15.125,-17.125],[15.125,14.875],[-17.25,14.875]],"c":false}},"nm":"Path 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.64,0.65,1]},"o":{"k":100},"w":{"k":2.5},"lc":2,"lj":2,"d":[{"n":"d","nm":"strich","v":{"k":0.4}},{"n":"g","nm":"abstand","v":{"k":6}},{"n":"o","nm":"versatz","v":{"k":0}}],"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Shape 1","np":3,"mn":"ADBE Vector Group"}],"ip":0,"op":75,"st":0,"bm":0,"sr":1}],"v":"4.5.0","ddd":0,"ip":0,"op":75,"fr":25,"w":40,"h":40}
|
||||
1
private/animation/strength.json
Normal file
1
private/animation/strength.json
Normal file
File diff suppressed because one or more lines are too long
BIN
private/fonts/Muli/muli-black.woff
Executable file
BIN
private/fonts/Muli/muli-black.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-black.woff2
Executable file
BIN
private/fonts/Muli/muli-black.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-blackitalic.woff
Executable file
BIN
private/fonts/Muli/muli-blackitalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-blackitalic.woff2
Executable file
BIN
private/fonts/Muli/muli-blackitalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-bold.woff
Executable file
BIN
private/fonts/Muli/muli-bold.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-bold.woff2
Executable file
BIN
private/fonts/Muli/muli-bold.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-bolditalic.woff
Executable file
BIN
private/fonts/Muli/muli-bolditalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-bolditalic.woff2
Executable file
BIN
private/fonts/Muli/muli-bolditalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extrabold.woff
Executable file
BIN
private/fonts/Muli/muli-extrabold.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extrabold.woff2
Executable file
BIN
private/fonts/Muli/muli-extrabold.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extrabolditalic.woff
Executable file
BIN
private/fonts/Muli/muli-extrabolditalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extrabolditalic.woff2
Executable file
BIN
private/fonts/Muli/muli-extrabolditalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extralight.woff
Executable file
BIN
private/fonts/Muli/muli-extralight.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extralight.woff2
Executable file
BIN
private/fonts/Muli/muli-extralight.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extralightitalic.woff
Executable file
BIN
private/fonts/Muli/muli-extralightitalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-extralightitalic.woff2
Executable file
BIN
private/fonts/Muli/muli-extralightitalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-light.woff
Executable file
BIN
private/fonts/Muli/muli-light.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-light.woff2
Executable file
BIN
private/fonts/Muli/muli-light.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-lightitalic.woff
Executable file
BIN
private/fonts/Muli/muli-lightitalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-lightitalic.woff2
Executable file
BIN
private/fonts/Muli/muli-lightitalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-regular.woff
Executable file
BIN
private/fonts/Muli/muli-regular.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-regular.woff2
Executable file
BIN
private/fonts/Muli/muli-regular.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-regularitalic.woff
Executable file
BIN
private/fonts/Muli/muli-regularitalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-regularitalic.woff2
Executable file
BIN
private/fonts/Muli/muli-regularitalic.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-semibold.woff
Executable file
BIN
private/fonts/Muli/muli-semibold.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-semibold.woff2
Executable file
BIN
private/fonts/Muli/muli-semibold.woff2
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-semibolditalic.woff
Executable file
BIN
private/fonts/Muli/muli-semibolditalic.woff
Executable file
Binary file not shown.
BIN
private/fonts/Muli/muli-semibolditalic.woff2
Executable file
BIN
private/fonts/Muli/muli-semibolditalic.woff2
Executable file
Binary file not shown.
BIN
private/img/favicon-16x16.png
Normal file
BIN
private/img/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
private/img/favicon-192x192.png
Normal file
BIN
private/img/favicon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
private/img/favicon-32x32.png
Normal file
BIN
private/img/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
private/img/favicon-96x96.png
Normal file
BIN
private/img/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
private/img/favicon.ico
Normal file
BIN
private/img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
private/img/marker.png
Normal file
BIN
private/img/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
13
private/img/tagesschule-elementa.svg
Normal file
13
private/img/tagesschule-elementa.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
2080
private/js/lib/03_vimeoPlayer.js
Normal file
2080
private/js/lib/03_vimeoPlayer.js
Normal file
File diff suppressed because it is too large
Load Diff
7962
private/js/lib/04_gsap.tweenMax.js
Normal file
7962
private/js/lib/04_gsap.tweenMax.js
Normal file
File diff suppressed because it is too large
Load Diff
183
private/js/lib/05_gsap.scrollToPlugin.js
Normal file
183
private/js/lib/05_gsap.scrollToPlugin.js
Normal file
@@ -0,0 +1,183 @@
|
||||
/*!
|
||||
* VERSION: 1.9.0
|
||||
* DATE: 2017-06-19
|
||||
* UPDATES AND DOCS AT: http://greensock.com
|
||||
*
|
||||
* @license Copyright (c) 2008-2017, GreenSock. All rights reserved.
|
||||
* This work is subject to the terms at http://greensock.com/standard-license or for
|
||||
* Club GreenSock members, the software agreement that was issued with your membership.
|
||||
*
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
**/
|
||||
var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node
|
||||
(_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
var _doc = (_gsScope.document || {}).documentElement,
|
||||
_window = _gsScope,
|
||||
_max = function(element, axis) {
|
||||
var dim = (axis === "x") ? "Width" : "Height",
|
||||
scroll = "scroll" + dim,
|
||||
client = "client" + dim,
|
||||
body = document.body;
|
||||
return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || _doc[client] || body[client]) : element[scroll] - element["offset" + dim];
|
||||
},
|
||||
_unwrapElement = function(value) {
|
||||
if (typeof(value) === "string") {
|
||||
value = TweenLite.selector(value);
|
||||
}
|
||||
if (value.length && value !== _window && value[0] && value[0].style && !value.nodeType) {
|
||||
value = value[0];
|
||||
}
|
||||
return (value === _window || (value.nodeType && value.style)) ? value : null;
|
||||
},
|
||||
_buildGetter = function(e, axis) { //pass in an element and an axis ("x" or "y") and it'll return a getter function for the scroll position of that element (like scrollTop or scrollLeft, although if the element is the window, it'll use the pageXOffset/pageYOffset or the documentElement's scrollTop/scrollLeft or document.body's. Basically this streamlines things and makes a very fast getter across browsers.
|
||||
var p = "scroll" + ((axis === "x") ? "Left" : "Top");
|
||||
if (e === _window) {
|
||||
if (e.pageXOffset != null) {
|
||||
p = "page" + axis.toUpperCase() + "Offset";
|
||||
} else if (_doc[p] != null) {
|
||||
e = _doc;
|
||||
} else {
|
||||
e = document.body;
|
||||
}
|
||||
}
|
||||
return function() {
|
||||
return e[p];
|
||||
};
|
||||
},
|
||||
_getOffset = function(element, container) {
|
||||
var rect = _unwrapElement(element).getBoundingClientRect(),
|
||||
isRoot = (!container || container === _window || container === document.body),
|
||||
cRect = (isRoot ? _doc : container).getBoundingClientRect(),
|
||||
offsets = {x: rect.left - cRect.left, y: rect.top - cRect.top};
|
||||
if (!isRoot && container) { //only add the current scroll position if it's not the window/body.
|
||||
offsets.x += _buildGetter(container, "x")();
|
||||
offsets.y += _buildGetter(container, "y")();
|
||||
}
|
||||
return offsets;
|
||||
},
|
||||
_parseVal = function(value, target, axis) {
|
||||
var type = typeof(value);
|
||||
return !isNaN(value) ? parseFloat(value) : (type === "number" || (type === "string" && value.charAt(1) === "=")) ? value : (value === "max") ? _max(target, axis) : Math.min(_max(target, axis), _getOffset(value, target)[axis]);
|
||||
},
|
||||
|
||||
ScrollToPlugin = _gsScope._gsDefine.plugin({
|
||||
propName: "scrollTo",
|
||||
API: 2,
|
||||
global: true,
|
||||
version:"1.9.0",
|
||||
|
||||
//called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
|
||||
init: function(target, value, tween) {
|
||||
this._wdw = (target === _window);
|
||||
this._target = target;
|
||||
this._tween = tween;
|
||||
if (typeof(value) !== "object") {
|
||||
value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y".
|
||||
if (typeof(value.y) === "string" && value.y !== "max" && value.y.charAt(1) !== "=") {
|
||||
value.x = value.y;
|
||||
}
|
||||
} else if (value.nodeType) {
|
||||
value = {y:value, x:value};
|
||||
}
|
||||
this.vars = value;
|
||||
this._autoKill = (value.autoKill !== false);
|
||||
this.getX = _buildGetter(target, "x");
|
||||
this.getY = _buildGetter(target, "y");
|
||||
this.x = this.xPrev = this.getX();
|
||||
this.y = this.yPrev = this.getY();
|
||||
if (value.x != null) {
|
||||
this._addTween(this, "x", this.x, _parseVal(value.x, target, "x") - (value.offsetX || 0), "scrollTo_x", true);
|
||||
this._overwriteProps.push("scrollTo_x");
|
||||
} else {
|
||||
this.skipX = true;
|
||||
}
|
||||
if (value.y != null) {
|
||||
this._addTween(this, "y", this.y, _parseVal(value.y, target, "y") - (value.offsetY || 0), "scrollTo_y", true);
|
||||
this._overwriteProps.push("scrollTo_y");
|
||||
} else {
|
||||
this.skipY = true;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
//called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
|
||||
set: function(v) {
|
||||
this._super.setRatio.call(this, v);
|
||||
|
||||
var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev,
|
||||
y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev,
|
||||
yDif = y - this.yPrev,
|
||||
xDif = x - this.xPrev,
|
||||
threshold = ScrollToPlugin.autoKillThreshold;
|
||||
|
||||
if (this.x < 0) { //can't scroll to a position less than 0! Might happen if someone uses a Back.easeOut or Elastic.easeOut when scrolling back to the top of the page (for example)
|
||||
this.x = 0;
|
||||
}
|
||||
if (this.y < 0) {
|
||||
this.y = 0;
|
||||
}
|
||||
if (this._autoKill) {
|
||||
//note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match.
|
||||
if (!this.skipX && (xDif > threshold || xDif < -threshold) && x < _max(this._target, "x")) {
|
||||
this.skipX = true; //if the user scrolls separately, we should stop tweening!
|
||||
}
|
||||
if (!this.skipY && (yDif > threshold || yDif < -threshold) && y < _max(this._target, "y")) {
|
||||
this.skipY = true; //if the user scrolls separately, we should stop tweening!
|
||||
}
|
||||
if (this.skipX && this.skipY) {
|
||||
this._tween.kill();
|
||||
if (this.vars.onAutoKill) {
|
||||
this.vars.onAutoKill.apply(this.vars.onAutoKillScope || this._tween, this.vars.onAutoKillParams || []);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (this._wdw) {
|
||||
_window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y);
|
||||
} else {
|
||||
if (!this.skipY) {
|
||||
this._target.scrollTop = this.y;
|
||||
}
|
||||
if (!this.skipX) {
|
||||
this._target.scrollLeft = this.x;
|
||||
}
|
||||
}
|
||||
this.xPrev = this.x;
|
||||
this.yPrev = this.y;
|
||||
}
|
||||
|
||||
}),
|
||||
p = ScrollToPlugin.prototype;
|
||||
|
||||
ScrollToPlugin.max = _max;
|
||||
ScrollToPlugin.getOffset = _getOffset;
|
||||
ScrollToPlugin.buildGetter = _buildGetter;
|
||||
ScrollToPlugin.autoKillThreshold = 7;
|
||||
|
||||
p._kill = function(lookup) {
|
||||
if (lookup.scrollTo_x) {
|
||||
this.skipX = true;
|
||||
}
|
||||
if (lookup.scrollTo_y) {
|
||||
this.skipY = true;
|
||||
}
|
||||
return this._super._kill.call(this, lookup);
|
||||
};
|
||||
|
||||
}); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }
|
||||
|
||||
//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
|
||||
(function(name) {
|
||||
"use strict";
|
||||
var getGlobal = function() {
|
||||
return (_gsScope.GreenSockGlobals || _gsScope)[name];
|
||||
};
|
||||
if (typeof(module) !== "undefined" && module.exports) { //node
|
||||
require("../TweenLite.js");
|
||||
module.exports = getGlobal();
|
||||
} else if (typeof(define) === "function" && define.amd) { //AMD
|
||||
define(["TweenLite"], getGlobal);
|
||||
}
|
||||
}("ScrollToPlugin"));
|
||||
267
private/js/lib/06_countUp.js
Normal file
267
private/js/lib/06_countUp.js
Normal file
@@ -0,0 +1,267 @@
|
||||
/*
|
||||
|
||||
countUp.js
|
||||
by @inorganik
|
||||
|
||||
*/
|
||||
|
||||
// target = id of html element or var of previously selected html element where counting occurs
|
||||
// startVal = the value you want to begin at
|
||||
// endVal = the value you want to arrive at
|
||||
// decimals = number of decimal places, default 0
|
||||
// duration = duration of animation in seconds, default 2
|
||||
// options = optional object of options (see below)
|
||||
|
||||
var CountUp = function(target, startVal, endVal, decimals, duration, options) {
|
||||
|
||||
var self = this;
|
||||
self.version = function() {
|
||||
return '1.9.3';
|
||||
};
|
||||
|
||||
// default options
|
||||
self.options = {
|
||||
useEasing: true, // toggle easing
|
||||
useGrouping: true, // 1,000,000 vs 1000000
|
||||
separator: ',', // character to use as a separator
|
||||
decimal: '.', // character to use as a decimal
|
||||
easingFn: easeOutExpo, // optional custom easing function, default is Robert Penner's easeOutExpo
|
||||
formattingFn: formatNumber, // optional custom formatting function, default is formatNumber above
|
||||
prefix: '', // optional text before the result
|
||||
suffix: '', // optional text after the result
|
||||
numerals: [] // optionally pass an array of custom numerals for 0-9
|
||||
};
|
||||
|
||||
// extend default options with passed options object
|
||||
if (options && typeof options === 'object') {
|
||||
for (var key in self.options) {
|
||||
if (options.hasOwnProperty(key) && options[key] !== null) {
|
||||
self.options[key] = options[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (self.options.separator === '') {
|
||||
self.options.useGrouping = false;
|
||||
}
|
||||
else {
|
||||
// ensure the separator is a string (formatNumber assumes this)
|
||||
self.options.separator = '' + self.options.separator;
|
||||
}
|
||||
|
||||
// make sure requestAnimationFrame and cancelAnimationFrame are defined
|
||||
// polyfill for browsers without native support
|
||||
// by Opera engineer Erik Möller
|
||||
var lastTime = 0;
|
||||
var vendors = ['webkit', 'moz', 'ms', 'o'];
|
||||
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
|
||||
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
|
||||
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
|
||||
}
|
||||
if (!window.requestAnimationFrame) {
|
||||
window.requestAnimationFrame = function(callback, element) {
|
||||
var currTime = new Date().getTime();
|
||||
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
var id = window.setTimeout(function() {
|
||||
callback(currTime + timeToCall);
|
||||
}, timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
if (!window.cancelAnimationFrame) {
|
||||
window.cancelAnimationFrame = function(id) {
|
||||
clearTimeout(id);
|
||||
};
|
||||
}
|
||||
|
||||
function formatNumber(num) {
|
||||
var neg = (num < 0),
|
||||
x, x1, x2, x3, i, len;
|
||||
num = Math.abs(num).toFixed(self.decimals);
|
||||
num += '';
|
||||
x = num.split('.');
|
||||
x1 = x[0];
|
||||
x2 = x.length > 1 ? self.options.decimal + x[1] : '';
|
||||
if (self.options.useGrouping) {
|
||||
x3 = '';
|
||||
for (i = 0, len = x1.length; i < len; ++i) {
|
||||
if (i !== 0 && ((i % 3) === 0)) {
|
||||
x3 = self.options.separator + x3;
|
||||
}
|
||||
x3 = x1[len - i - 1] + x3;
|
||||
}
|
||||
x1 = x3;
|
||||
}
|
||||
// optional numeral substitution
|
||||
if (self.options.numerals.length) {
|
||||
x1 = x1.replace(/[0-9]/g, function(w) {
|
||||
return self.options.numerals[+w];
|
||||
})
|
||||
x2 = x2.replace(/[0-9]/g, function(w) {
|
||||
return self.options.numerals[+w];
|
||||
})
|
||||
}
|
||||
return (neg ? '-' : '') + self.options.prefix + x1 + x2 + self.options.suffix;
|
||||
}
|
||||
|
||||
// Robert Penner's easeOutExpo
|
||||
function easeOutExpo(t, b, c, d) {
|
||||
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
|
||||
}
|
||||
|
||||
function ensureNumber(n) {
|
||||
return (typeof n === 'number' && !isNaN(n));
|
||||
}
|
||||
|
||||
self.initialize = function() {
|
||||
if (self.initialized) return true;
|
||||
|
||||
self.error = '';
|
||||
self.d = (typeof target === 'string') ? document.getElementById(target) : target;
|
||||
if (!self.d) {
|
||||
self.error = '[CountUp] target is null or undefined'
|
||||
return false;
|
||||
}
|
||||
self.startVal = Number(startVal);
|
||||
self.endVal = Number(endVal);
|
||||
// error checks
|
||||
if (ensureNumber(self.startVal) && ensureNumber(self.endVal)) {
|
||||
self.decimals = Math.max(0, decimals || 0);
|
||||
self.dec = Math.pow(10, self.decimals);
|
||||
self.duration = Number(duration) * 1000 || 2000;
|
||||
self.countDown = (self.startVal > self.endVal);
|
||||
self.frameVal = self.startVal;
|
||||
self.initialized = true;
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
self.error = '[CountUp] startVal (' + startVal + ') or endVal (' + endVal + ') is not a number';
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Print value to target
|
||||
self.printValue = function(value) {
|
||||
var result = self.options.formattingFn(value);
|
||||
|
||||
var hours = Math.floor(result / 60);
|
||||
var minutes = Math.floor(result % 60);
|
||||
|
||||
if (hours < 10) {
|
||||
hours = '0' + hours;
|
||||
}
|
||||
|
||||
if (minutes < 10) {
|
||||
minutes = '0' + minutes;
|
||||
}
|
||||
|
||||
result = hours + ' <span>:</span> ' + minutes;
|
||||
|
||||
if (self.d.tagName === 'INPUT') {
|
||||
this.d.value = result;
|
||||
}
|
||||
else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
|
||||
this.d.textContent = result;
|
||||
}
|
||||
else {
|
||||
this.d.innerHTML = result;
|
||||
}
|
||||
};
|
||||
|
||||
self.count = function(timestamp) {
|
||||
|
||||
if (!self.startTime) {
|
||||
self.startTime = timestamp;
|
||||
}
|
||||
|
||||
self.timestamp = timestamp;
|
||||
var progress = timestamp - self.startTime;
|
||||
self.remaining = self.duration - progress;
|
||||
|
||||
// to ease or not to ease
|
||||
if (self.options.useEasing) {
|
||||
if (self.countDown) {
|
||||
self.frameVal = self.startVal - self.options.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
|
||||
} else {
|
||||
self.frameVal = self.options.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
|
||||
}
|
||||
} else {
|
||||
if (self.countDown) {
|
||||
self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
|
||||
} else {
|
||||
self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
|
||||
}
|
||||
}
|
||||
|
||||
// don't go past endVal since progress can exceed duration in the last frame
|
||||
if (self.countDown) {
|
||||
self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
|
||||
} else {
|
||||
self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
|
||||
}
|
||||
|
||||
// decimal
|
||||
self.frameVal = Math.round(self.frameVal * self.dec) / self.dec;
|
||||
|
||||
// format and print value
|
||||
self.printValue(self.frameVal);
|
||||
|
||||
// whether to continue
|
||||
if (progress < self.duration) {
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
} else {
|
||||
if (self.callback) self.callback();
|
||||
}
|
||||
};
|
||||
// start your animation
|
||||
self.start = function(callback) {
|
||||
if (!self.initialize()) return;
|
||||
self.callback = callback;
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
};
|
||||
// toggles pause/resume animation
|
||||
self.pauseResume = function() {
|
||||
if (!self.paused) {
|
||||
self.paused = true;
|
||||
cancelAnimationFrame(self.rAF);
|
||||
} else {
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.duration = self.remaining;
|
||||
self.startVal = self.frameVal;
|
||||
requestAnimationFrame(self.count);
|
||||
}
|
||||
};
|
||||
// reset to startVal so animation can be run again
|
||||
self.reset = function() {
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.initialized = false;
|
||||
if (self.initialize()) {
|
||||
cancelAnimationFrame(self.rAF);
|
||||
self.printValue(self.startVal);
|
||||
}
|
||||
};
|
||||
// pass a new endVal and start animation
|
||||
self.update = function(newEndVal) {
|
||||
if (!self.initialize()) return;
|
||||
newEndVal = Number(newEndVal);
|
||||
if (!ensureNumber(newEndVal)) {
|
||||
self.error = '[CountUp] update() - new endVal is not a number: ' + newEndVal;
|
||||
return;
|
||||
}
|
||||
self.error = '';
|
||||
if (newEndVal === self.frameVal) return;
|
||||
cancelAnimationFrame(self.rAF);
|
||||
self.paused = false;
|
||||
delete self.startTime;
|
||||
self.startVal = self.frameVal;
|
||||
self.endVal = newEndVal;
|
||||
self.countDown = (self.startVal > self.endVal);
|
||||
self.rAF = requestAnimationFrame(self.count);
|
||||
};
|
||||
|
||||
// format startVal on initialization
|
||||
if (self.initialize()) self.printValue(self.startVal);
|
||||
};
|
||||
1
private/js/lib/07_scrollMonitor.js
Normal file
1
private/js/lib/07_scrollMonitor.js
Normal file
File diff suppressed because one or more lines are too long
9317
private/js/lib/08_bodymovin.js
Normal file
9317
private/js/lib/08_bodymovin.js
Normal file
File diff suppressed because it is too large
Load Diff
2
private/js/main.js
Normal file → Executable file
2
private/js/main.js
Normal file → Executable file
@@ -1,7 +1,7 @@
|
||||
// Boilerplate for handling CSRF, from Django's website
|
||||
/*global document*/
|
||||
function getCookie(name) {
|
||||
'use strict';
|
||||
"use strict";
|
||||
var cookieValue = null;
|
||||
if (document.cookie && document.cookie !== "") {
|
||||
var cookies = document.cookie.split(";");
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
window.transitionend = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
|
||||
43
private/js/modules/__util.js
Normal file
43
private/js/modules/__util.js
Normal file
@@ -0,0 +1,43 @@
|
||||
window.transitionend = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';
|
||||
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
window.enable_touch_swipe = function(selector, function_swipe_left, function_swipe_right) {
|
||||
var touch_position_x = 0;
|
||||
var delta = 0;
|
||||
|
||||
$body.on('touchstart', selector, function(event) {
|
||||
touch_position_x = event.originalEvent.touches[0].pageX;
|
||||
});
|
||||
|
||||
$body.on('touchmove', selector, function(event) {
|
||||
delta = event.originalEvent.touches[0].pageX - touch_position_x;
|
||||
});
|
||||
|
||||
$body.on('touchend', selector, function(event) {
|
||||
var width_trigger = 50;
|
||||
if (delta > width_trigger) {
|
||||
function_swipe_left($(this))
|
||||
} else if (delta < (width_trigger * -1)) {
|
||||
function_swipe_right($(this));
|
||||
}
|
||||
delta = 0;
|
||||
});
|
||||
};
|
||||
|
||||
window.document_height = $(document).height();
|
||||
window.window_height = $(window).height();
|
||||
window.window_width = $(window).width();
|
||||
window.scroll_top = $(window).scrollTop();
|
||||
|
||||
$(window).on('scroll', function(event) {
|
||||
window.scroll_top = $(window).scrollTop();
|
||||
});
|
||||
|
||||
$(window).on('resize', function(event) {
|
||||
window.document_height = $(document).height();
|
||||
window.window_height = $(window).height();
|
||||
window.window_width = $(window).width();
|
||||
});
|
||||
});
|
||||
59
private/js/modules/_reveal.js
Normal file
59
private/js/modules/_reveal.js
Normal file
@@ -0,0 +1,59 @@
|
||||
$(function() {
|
||||
|
||||
function create_reveal_elements($container) {
|
||||
var $reveal_containers = $container.find('.reveal_container');
|
||||
$reveal_containers.each(function() {
|
||||
var reveal_container = this;
|
||||
var elementWatcher = scrollMonitor.create(reveal_container);
|
||||
elementWatcher.enterViewport(function() {
|
||||
reveal_elements(reveal_container);
|
||||
});
|
||||
elementWatcher.fullyEnterViewport(function() {
|
||||
reveal_elements(reveal_container);
|
||||
});
|
||||
});
|
||||
|
||||
var $reveal_selfs = $container.find('.reveal_self');
|
||||
$reveal_selfs.each(function() {
|
||||
var reveal_self = this;
|
||||
var elementWatcher = scrollMonitor.create(reveal_self);
|
||||
elementWatcher.enterViewport(function() {
|
||||
reveal_element(reveal_self);
|
||||
});
|
||||
elementWatcher.fullyEnterViewport(function() {
|
||||
reveal_element(reveal_self);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
create_reveal_elements($('html'));
|
||||
|
||||
function remove_reveal_animation(event) {
|
||||
if (event.target === this) {
|
||||
$(this).removeClass('reveal_animation');
|
||||
$(this).off(window.transitionend, remove_reveal_animation);
|
||||
}
|
||||
}
|
||||
|
||||
function reveal_elements(reveal_container) {
|
||||
$(reveal_container).find('.reveal').each(function() {
|
||||
reveal_element(this);
|
||||
});
|
||||
}
|
||||
|
||||
function reveal_element(element) {
|
||||
window.requestAnimationFrame(function() {
|
||||
$(element).on(window.transitionend, remove_reveal_animation);
|
||||
$(element).removeClass('reveal');
|
||||
});
|
||||
}
|
||||
|
||||
window.create_reveal_elements = create_reveal_elements;
|
||||
|
||||
reveal_element($('.header'));
|
||||
reveal_element($('.header__logo'));
|
||||
reveal_elements($('.timetable__clock__frame'));
|
||||
reveal_element($('.timetable__next'));
|
||||
reveal_element($('.timetable__start__background'));
|
||||
|
||||
});
|
||||
15
private/js/modules/animation.js
Executable file
15
private/js/modules/animation.js
Executable file
@@ -0,0 +1,15 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
$body.find('.animated_icon').each(function() {
|
||||
$(this).html('');
|
||||
var animation_name = $(this).attr('data-icon');
|
||||
var animation = bodymovin.loadAnimation({
|
||||
container: this,
|
||||
path: '/static/animation/' + animation_name + '.json',
|
||||
renderer: 'svg',
|
||||
loop: true,
|
||||
autoplay: true
|
||||
});
|
||||
});
|
||||
});
|
||||
114
private/js/modules/contact.js
Normal file
114
private/js/modules/contact.js
Normal file
@@ -0,0 +1,114 @@
|
||||
function init_map() {
|
||||
var location = {lat: 47.20388, lng: 8.58176};
|
||||
var center;
|
||||
if ($(window).width() > 840) {
|
||||
center = {lat: location.lat, lng: location.lng + 0.06};
|
||||
} else {
|
||||
center = {lat: location.lat - 0.06, lng: location.lng};
|
||||
}
|
||||
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 12,
|
||||
center: center,
|
||||
disableDefaultUI: true,
|
||||
scrollwheel: false,
|
||||
zoomControl: true,
|
||||
zoomControlOptions: {
|
||||
position: google.maps.ControlPosition.RIGHT_TOP
|
||||
},
|
||||
styles: [
|
||||
{
|
||||
"featureType": "administrative.neighborhood",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "labels.text",
|
||||
"stylers": [
|
||||
{
|
||||
"visibility": "off"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
var image = {
|
||||
url: '/static/img/marker.png',
|
||||
size: new google.maps.Size(50, 60),
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(25, 60),
|
||||
scaledSize: new google.maps.Size(50, 60)
|
||||
};
|
||||
var marker = new google.maps.Marker({
|
||||
position: location,
|
||||
map: map,
|
||||
icon: image
|
||||
});
|
||||
|
||||
var input = document.getElementById('journey_calculator__input');
|
||||
if (input) {
|
||||
var result = input.parentNode.querySelector('.journey_calculator__result');
|
||||
var autocomplete = new google.maps.places.Autocomplete(input, {
|
||||
types: ['geocode'],
|
||||
componentRestrictions: {country: 'ch'}
|
||||
}
|
||||
);
|
||||
|
||||
var callback_timeout;
|
||||
autocomplete.addListener('place_changed', function() {
|
||||
input.parentNode.classList.remove('error');
|
||||
input.parentNode.classList.add('loaded');
|
||||
result.classList.add('loading');
|
||||
var place = autocomplete.getPlace();
|
||||
|
||||
if (!place.geometry) {
|
||||
input.blur();
|
||||
input.parentNode.classList.add('error');
|
||||
}
|
||||
|
||||
var origin = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
|
||||
var destination = new google.maps.LatLng(location);
|
||||
|
||||
var service = new google.maps.DistanceMatrixService();
|
||||
service.getDistanceMatrix(
|
||||
{
|
||||
origins: [origin],
|
||||
destinations: [destination],
|
||||
travelMode: 'DRIVING'
|
||||
}, callback);
|
||||
|
||||
function callback(response, status) {
|
||||
window.clearTimeout(callback_timeout);
|
||||
callback_timeout = window.setTimeout(function() {
|
||||
var duration = response.rows[0].elements[0].duration.value;
|
||||
var minutes = Math.round(duration / 60);
|
||||
result.setAttribute('data-duration', minutes);
|
||||
result.classList.remove('loading');
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
74
private/js/modules/content_navigation.js
Normal file
74
private/js/modules/content_navigation.js
Normal file
@@ -0,0 +1,74 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
var $content_navigation = $('.content__navigation');
|
||||
var $content = $('.content');
|
||||
var content_navigation_class = 'content__navigation__anchor';
|
||||
|
||||
if ($content_navigation.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$content.find('.section').each(function() {
|
||||
var $this = $(this);
|
||||
var id = $this.attr('id');
|
||||
var text = $this.find('h2').text();
|
||||
var content_navigation_link = '<a class="' + content_navigation_class + '" href="#' + id + '">' + text + '</a>';
|
||||
$content_navigation.find('ul').append('<li>' + content_navigation_link + '</li>');
|
||||
$this.find('.section__title__content').html(text);
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
var hash = window.location.hash;
|
||||
window.requestAnimationFrame(function() {
|
||||
window.location.hash = hash;
|
||||
});
|
||||
}
|
||||
|
||||
$body.on('click', '.' + content_navigation_class, function(event) {
|
||||
event.preventDefault();
|
||||
var $this = $(this);
|
||||
$content_navigation.find('.active').removeClass('active');
|
||||
$this.addClass('active');
|
||||
TweenLite.to(window, 0.5, {
|
||||
scrollTo: $this.attr('href')
|
||||
});
|
||||
});
|
||||
|
||||
var $navigation_watchers = $content.find('.section');
|
||||
$navigation_watchers.each(function() {
|
||||
var element = this;
|
||||
var elementWatcher = scrollMonitor.create(element);
|
||||
elementWatcher.fullyEnterViewport(function() {
|
||||
$content_navigation.find('.active').removeClass('active');
|
||||
$content_navigation.find('a[href="#' + $(element).attr('id') + '"]').addClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
var content_navigation_offset_top = $content_navigation.offset().top;
|
||||
$(window).on('resize', function() {
|
||||
content_navigation_offset_top = $content_navigation.offset().top;
|
||||
});
|
||||
|
||||
var $content_navigation_progress_fill = $('.content__navigation__progress__fill');
|
||||
|
||||
function content_navigation_scroll() {
|
||||
var progress = Math.round(100 / window.document_height * (window.scroll_top + window.window_height));
|
||||
$content_navigation_progress_fill.height(progress + '%');
|
||||
|
||||
if (content_navigation_offset_top && window.scroll_top >= content_navigation_offset_top) {
|
||||
$content_navigation.addClass('fixed');
|
||||
} else {
|
||||
$content_navigation.removeClass('fixed');
|
||||
}
|
||||
}
|
||||
|
||||
function watch_content_navigation_scroll() {
|
||||
if (!window.navigation_is_open) {
|
||||
content_navigation_scroll();
|
||||
}
|
||||
window.requestAnimationFrame(watch_content_navigation_scroll);
|
||||
}
|
||||
|
||||
watch_content_navigation_scroll();
|
||||
});
|
||||
69
private/js/modules/navigation.js
Normal file
69
private/js/modules/navigation.js
Normal file
@@ -0,0 +1,69 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
var $canvas = $('#canvas');
|
||||
var $navigation = $('#navigation');
|
||||
|
||||
window.onpageshow = function(event) {
|
||||
if (event.persisted) {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
$body.on('click', 'a', function(event) {
|
||||
var href = $(this).attr('href');
|
||||
var target = $(this).attr('target');
|
||||
if (href.indexOf('/') === 0 && !target && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey && !$('html').hasClass('cms-ready')) {
|
||||
event.preventDefault();
|
||||
$body.addClass('unload loading');
|
||||
window.setTimeout(function() {
|
||||
window.location = href;
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
$body.on('click', '.header__button--navigation', function(event) {
|
||||
event.preventDefault();
|
||||
open_navigation();
|
||||
});
|
||||
|
||||
$body.on('click', '.navigation__close', function(event) {
|
||||
event.preventDefault();
|
||||
close_navigation();
|
||||
});
|
||||
|
||||
var scroll_top = 0;
|
||||
|
||||
function open_navigation() {
|
||||
window.timetable_can_scroll = false;
|
||||
window.navigation_is_open = true;
|
||||
|
||||
$navigation.one(window.transitionend, function() {
|
||||
window.requestAnimationFrame(function() {
|
||||
$navigation.css('position', 'relative');
|
||||
$navigation.off(window.transitionend);
|
||||
});
|
||||
});
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
scroll_top = $(window).scrollTop();
|
||||
$canvas.css({
|
||||
'top': scroll_top * -1,
|
||||
'position': 'fixed'
|
||||
});
|
||||
window.requestAnimationFrame(function() {
|
||||
$body.addClass('navigation_open');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function close_navigation() {
|
||||
$navigation.removeAttr('style');
|
||||
$body.removeClass('navigation_open');
|
||||
window.requestAnimationFrame(function() {
|
||||
$canvas.removeAttr('style');
|
||||
$(window).scrollTop(scroll_top);
|
||||
window.navigation_is_open = false;
|
||||
window.timetable_can_scroll = true;
|
||||
});
|
||||
}
|
||||
});
|
||||
24
private/js/modules/plugins/form.js
Executable file
24
private/js/modules/plugins/form.js
Executable file
@@ -0,0 +1,24 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
$body.on('submit', '.form', function(event) {
|
||||
event.preventDefault();
|
||||
var $form = $(this);
|
||||
var id = $form.attr('id');
|
||||
|
||||
$form.addClass('loading');
|
||||
|
||||
$.ajax({
|
||||
type: $form.attr('method'),
|
||||
url: $form.attr('action'),
|
||||
data: $form.serialize(),
|
||||
success: function(data) {
|
||||
var $new = $(data).find('#' + id);
|
||||
$new.find('.reveal').each(function() {
|
||||
$(this).removeClass('reveal reveal_animation');
|
||||
});
|
||||
$form.replaceWith($new);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
29
private/js/modules/plugins/reference_list.js
Executable file
29
private/js/modules/plugins/reference_list.js
Executable file
@@ -0,0 +1,29 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
$body.on('click', '.reference_list__item', function(event) {
|
||||
event.preventDefault();
|
||||
var $this = $(this);
|
||||
var $reference_list = $this.parents('.reference_list');
|
||||
var active = $reference_list.attr('data-active');
|
||||
var id = $this.parents('.reference_list__item__frame').attr('data-id');
|
||||
var iframe;
|
||||
var player;
|
||||
|
||||
if (active) {
|
||||
iframe = $reference_list.find('.reference_list__video__item.data_id_' + active).find('iframe').get(0);
|
||||
player = new Vimeo.Player(iframe);
|
||||
player.pause();
|
||||
}
|
||||
|
||||
if (id === 'x') {
|
||||
$reference_list.removeAttr('data-active');
|
||||
} else {
|
||||
$reference_list.attr('data-active', id);
|
||||
|
||||
iframe = $reference_list.find('.reference_list__video__item.data_id_' + id).find('iframe').get(0);
|
||||
player = new Vimeo.Player(iframe);
|
||||
player.play();
|
||||
}
|
||||
});
|
||||
});
|
||||
40
private/js/modules/plugins/slider.js
Executable file
40
private/js/modules/plugins/slider.js
Executable file
@@ -0,0 +1,40 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
function slider_prev_item($slider) {
|
||||
var active = parseInt($slider.attr('data-active'));
|
||||
if (active > 0) {
|
||||
window.requestAnimationFrame(function() {
|
||||
$slider.attr('data-active', active - 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function slider_next_item($slider) {
|
||||
var active = parseInt($slider.attr('data-active'));
|
||||
var last = parseInt($slider.attr('data-last'));
|
||||
if (active < last) {
|
||||
window.requestAnimationFrame(function() {
|
||||
$slider.attr('data-active', active + 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$body.on('click', '.slider__navigation', function(event) {
|
||||
event.preventDefault();
|
||||
var $this = $(this);
|
||||
var $slider = $this.parents('.slider');
|
||||
if ($slider.length === 0) {
|
||||
$slider = $this.parents('.text_slider');
|
||||
}
|
||||
var prev = $this.hasClass('slider__navigation--prev');
|
||||
if (prev) {
|
||||
slider_prev_item($slider);
|
||||
} else {
|
||||
slider_next_item($slider);
|
||||
}
|
||||
});
|
||||
|
||||
window.enable_touch_swipe('.slider', slider_prev_item, slider_next_item);
|
||||
window.enable_touch_swipe('.text_slider', slider_prev_item, slider_next_item);
|
||||
});
|
||||
144
private/js/modules/plugins/timetable.js
Normal file
144
private/js/modules/plugins/timetable.js
Normal file
@@ -0,0 +1,144 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
var $timetable = $('#timetable');
|
||||
|
||||
if ($timetable.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$(window).scrollTop(0);
|
||||
|
||||
window.timetable_can_scroll = false;
|
||||
window.setTimeout(function() {
|
||||
window.timetable_can_scroll = true;
|
||||
}, 2500);
|
||||
|
||||
var activated = false;
|
||||
|
||||
function test_scroll() {
|
||||
if (activated) {
|
||||
if ($(window).scrollTop() < $(window).height() * 0.05 && window.timetable_can_scroll) {
|
||||
window.prevent_scroll_calc = true;
|
||||
$timetable.attr('data-active', 0);
|
||||
$timetable.removeClass('active');
|
||||
activated = false;
|
||||
}
|
||||
} else {
|
||||
if ($(window).scrollTop() > $(window).height() * 0.05 && window.timetable_can_scroll) {
|
||||
init_timetable_items();
|
||||
}
|
||||
}
|
||||
window.requestAnimationFrame(test_scroll);
|
||||
}
|
||||
|
||||
function init_timetable_items() {
|
||||
$timetable.attr('data-active', 1);
|
||||
|
||||
$timetable.find('.timetable__item').each(function() {
|
||||
$(this).addClass('reveal_container')
|
||||
});
|
||||
window.setTimeout(function() {
|
||||
$timetable.addClass('active');
|
||||
|
||||
window.requestAnimationFrame(function() {
|
||||
$timetable.find('.timetable__item').each(function() {
|
||||
var index = parseInt($(this).attr('data-id'));
|
||||
var elementWatcher = scrollMonitor.create(this);
|
||||
elementWatcher.enterViewport(function() {
|
||||
set_timetable_item(index);
|
||||
});
|
||||
});
|
||||
|
||||
window.create_reveal_elements($timetable);
|
||||
|
||||
window.prevent_scroll_calc = false;
|
||||
window.calc_scrolls();
|
||||
|
||||
activated = true;
|
||||
});
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(test_scroll);
|
||||
|
||||
var current_index = 0;
|
||||
var last_index = parseInt($timetable.attr('data-last'));
|
||||
var elements = document.getElementsByClassName('timetable__item');
|
||||
|
||||
var $timetable_next = $('.timetable__next');
|
||||
var $timetable_clock_digital_time = $('#timetable__clock__digital__time');
|
||||
|
||||
var $timetable_progress = $('#timetable__clock__progress');
|
||||
var timetable_clock_progress_max = parseFloat($timetable_progress.attr('stroke-dasharray'));
|
||||
|
||||
$body.on('click', '.timetable__next', function(event) {
|
||||
event.preventDefault();
|
||||
if (!activated) {
|
||||
$(window).scrollTop($(window).height());
|
||||
init_timetable_items();
|
||||
}
|
||||
});
|
||||
|
||||
// var handle_scroll = function(evt) {
|
||||
// if (!can_scroll) {
|
||||
// return false;
|
||||
// }
|
||||
// if (!evt) evt = event;
|
||||
// var delta = event.wheelDelta;
|
||||
// if (event.webkitDirectionInvertedFromDevice) delta = -delta;
|
||||
// if (Math.abs(delta) > 20) {
|
||||
// if (delta < 0) {
|
||||
// prev_timetable_item();
|
||||
// } else {
|
||||
// next_timetable_item();
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
// document.addEventListener('DOMMouseScroll', handle_scroll, false); // for Firefox
|
||||
// document.addEventListener('mousewheel', handle_scroll, false);
|
||||
|
||||
function next_timetable_item() {
|
||||
set_timetable_item(current_index + 1);
|
||||
}
|
||||
|
||||
//
|
||||
// function prev_timetable_item() {
|
||||
// set_timetable_item(current_index - 1);
|
||||
// }
|
||||
//
|
||||
function set_timetable_item(index) {
|
||||
if (index <= last_index && index >= 0) {
|
||||
current_index = index;
|
||||
|
||||
$timetable.attr('data-active', current_index);
|
||||
|
||||
if (current_index === last_index) {
|
||||
$timetable_next.addClass('hidden');
|
||||
} else {
|
||||
$timetable_next.removeClass('hidden');
|
||||
}
|
||||
|
||||
update_time_progess();
|
||||
}
|
||||
}
|
||||
|
||||
function update_time_progess() {
|
||||
var $to = $(elements[current_index - 1]);
|
||||
var to_minutes = parseInt($to.attr('data-hour')) * 60 + parseInt($to.attr('data-minute'));
|
||||
var to_minutes_with_offset = to_minutes - (6 * 60);
|
||||
var total_progress = (1 / (12 * 60)) * to_minutes_with_offset;
|
||||
|
||||
var start = $timetable_clock_digital_time.text();
|
||||
var start_time = start.split(':');
|
||||
var start_minutes = parseInt(start_time[0]) * 60 + parseInt(start_time[1]);
|
||||
var count_up = new CountUp('timetable__clock__digital__time', start_minutes, to_minutes, 0, 1.5, {
|
||||
useEasing: true,
|
||||
separator: ''
|
||||
});
|
||||
count_up.start();
|
||||
|
||||
if (to_minutes) {
|
||||
$timetable_progress.attr('stroke-dashoffset', timetable_clock_progress_max * Math.abs(total_progress - 1));
|
||||
}
|
||||
}
|
||||
});
|
||||
40
private/js/modules/plugins/video.js
Executable file
40
private/js/modules/plugins/video.js
Executable file
@@ -0,0 +1,40 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
|
||||
$body.find('.video').each(function() {
|
||||
var $video = $(this);
|
||||
var iframe = this.querySelector('iframe');
|
||||
var player = new Vimeo.Player(iframe);
|
||||
var is_playing = false;
|
||||
|
||||
$video.on('click', '.video__thumbnail', function(event) {
|
||||
event.preventDefault();
|
||||
if (is_playing) {
|
||||
player.pause();
|
||||
} else {
|
||||
player.play();
|
||||
}
|
||||
});
|
||||
|
||||
player.on('play', function() {
|
||||
is_playing = true;
|
||||
window.requestAnimationFrame(function() {
|
||||
$video.addClass('playing');
|
||||
});
|
||||
});
|
||||
|
||||
player.on('pause', function() {
|
||||
is_playing = false;
|
||||
window.requestAnimationFrame(function() {
|
||||
$video.removeClass('playing');
|
||||
});
|
||||
});
|
||||
|
||||
player.on('ended', function() {
|
||||
is_playing = false;
|
||||
window.requestAnimationFrame(function() {
|
||||
$video.removeClass('playing');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
102
private/js/modules/scroll.js
Normal file
102
private/js/modules/scroll.js
Normal file
@@ -0,0 +1,102 @@
|
||||
$(function() {
|
||||
var scrolls = [];
|
||||
|
||||
window.prevent_scroll_calc = false;
|
||||
var $timetable = $('#timetable');
|
||||
if ($timetable.length > 0) {
|
||||
window.prevent_scroll_calc = true;
|
||||
}
|
||||
|
||||
function calc_scrolls() {
|
||||
scrolls = [];
|
||||
var i;
|
||||
var scroll_elements = document.querySelectorAll('.scroll');
|
||||
for (i = 0; i < scroll_elements.length; i++) {
|
||||
var element = scroll_elements[i];
|
||||
var height = element.offsetHeight;
|
||||
var offset_top = $(element).offset().top;
|
||||
var center_offset = offset_top + (height / 2);
|
||||
|
||||
var ease_multiplier = parseFloat(element.getAttribute('data-ease-multiplier'));
|
||||
if (!ease_multiplier) {
|
||||
ease_multiplier = 1;
|
||||
}
|
||||
|
||||
scrolls.push({
|
||||
offset: center_offset,
|
||||
element: element,
|
||||
mod: element.getAttribute('data-scroll-mod'),
|
||||
ease_multiplier: ease_multiplier
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (!window.prevent_scroll_calc) {
|
||||
calc_scrolls();
|
||||
}
|
||||
window.calc_scrolls = calc_scrolls;
|
||||
|
||||
var scroll_top = 0;
|
||||
|
||||
function change_scrolls() {
|
||||
// if (window.is_scroll_animating) {
|
||||
// return false;
|
||||
// }
|
||||
var window_height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
|
||||
var half_window_height = window_height / 2;
|
||||
var window_scroll_top = document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;
|
||||
scroll_top = window_scroll_top + half_window_height;
|
||||
for (var i = 0; i < scrolls.length; i++) {
|
||||
var item = scrolls[i];
|
||||
var relative_offset = item.offset - scroll_top;
|
||||
relative_offset = relative_offset * 0.05;
|
||||
|
||||
var css_value = 'translateY';
|
||||
var css_unit = 'px';
|
||||
var appling_offset = relative_offset * item.ease_multiplier;
|
||||
|
||||
if (item.mod === 'rotate') {
|
||||
css_value = 'rotate';
|
||||
css_unit = 'deg';
|
||||
}
|
||||
if (item.mod === 'horizontal') {
|
||||
css_value = 'translateX';
|
||||
}
|
||||
|
||||
item.element.style.transform = "" +
|
||||
css_value + "(" + appling_offset + css_unit + ")";
|
||||
item.element.style.webkitTransform = "" +
|
||||
css_value + "(" + appling_offset + css_unit + ")";
|
||||
item.element.style.MozTransform = "" +
|
||||
css_value + "(" + appling_offset + css_unit + ")";
|
||||
item.element.style.msTransform = "" +
|
||||
css_value + "(" + appling_offset + css_unit + ")";
|
||||
item.element.style.OTransform = "" +
|
||||
css_value + "(" + appling_offset + css_unit + ")";
|
||||
}
|
||||
}
|
||||
|
||||
function watch_scrolls() {
|
||||
if (!window.navigation_is_open) {
|
||||
change_scrolls();
|
||||
}
|
||||
window.requestAnimationFrame(watch_scrolls);
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(watch_scrolls);
|
||||
|
||||
var resize_window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
window.addEventListener('resize', function(event) {
|
||||
var window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
|
||||
if (document.querySelector('html').classList.contains('touchevents') && resize_window_width === window_width) {
|
||||
return false;
|
||||
}
|
||||
resize_window_width = window_width;
|
||||
if (!window.prevent_scroll_calc) {
|
||||
calc_scrolls();
|
||||
}
|
||||
window.requestAnimationFrame(function() {
|
||||
change_scrolls();
|
||||
});
|
||||
}, false);
|
||||
});
|
||||
83
private/js/modules/search.js
Normal file
83
private/js/modules/search.js
Normal file
@@ -0,0 +1,83 @@
|
||||
$(function() {
|
||||
var $body = $('body');
|
||||
var $canvas = $('#canvas');
|
||||
|
||||
$body.on('click', '.header__button--search', function(event) {
|
||||
event.preventDefault();
|
||||
open_search();
|
||||
});
|
||||
|
||||
$body.on('click', '.search__close', function(event) {
|
||||
if (!$body.hasClass('_search') && !$body.hasClass('search_results')) {
|
||||
event.preventDefault();
|
||||
close_search();
|
||||
}
|
||||
});
|
||||
|
||||
var scroll_top = 0;
|
||||
var search_input_timeout;
|
||||
|
||||
function open_search() {
|
||||
window.timetable_can_scroll = false;
|
||||
window.navigation_is_open = true;
|
||||
window.requestAnimationFrame(function() {
|
||||
scroll_top = $(window).scrollTop();
|
||||
$canvas.css({
|
||||
'top': scroll_top * -1,
|
||||
'position': 'fixed'
|
||||
});
|
||||
window.requestAnimationFrame(function() {
|
||||
$body.addClass('search_open');
|
||||
window.clearTimeout(search_input_timeout);
|
||||
search_input_timeout = window.setTimeout(function() {
|
||||
$body.find('#search__query').focus();
|
||||
}, 800);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function close_search() {
|
||||
window.clearTimeout(search_input_timeout);
|
||||
$body.find('#search__query').blur();
|
||||
window.requestAnimationFrame(function() {
|
||||
$body.removeClass('search_open');
|
||||
$canvas.removeAttr('style');
|
||||
$(window).scrollTop(scroll_top);
|
||||
window.navigation_is_open = false;
|
||||
window.timetable_can_scroll = true;
|
||||
});
|
||||
}
|
||||
|
||||
$body.on('submit', '.search__form', function(event) {
|
||||
event.preventDefault();
|
||||
var $form = $(this);
|
||||
|
||||
$body.find('#search__query').blur();
|
||||
|
||||
var form_url = $form.attr('action');
|
||||
var serialized_form = $form.serialize();
|
||||
history.pushState({}, 'search', form_url + '?' + serialized_form);
|
||||
|
||||
if (serialized_form !== 'q=') {
|
||||
if ($body.hasClass('search_results')) {
|
||||
$body.find('.search__results').addClass('loading');
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: $form.attr('method'),
|
||||
url: form_url,
|
||||
data: serialized_form,
|
||||
success: function(data) {
|
||||
$body.find('#canvas').remove();
|
||||
$body.addClass('_search');
|
||||
$body.find('.search__results').replaceWith($(data).find('.search__results'));
|
||||
window.requestAnimationFrame(function() {
|
||||
$body.addClass('search_results');
|
||||
})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$body.removeClass('search_results');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,35 @@
|
||||
$white: #FFFFFF;
|
||||
$light_gray: #F4F4F4;
|
||||
$medium_light_gray: #E6E6E6;
|
||||
$gray: #ADADAD;
|
||||
$dark_gray: #8f8f8f;
|
||||
$near_black: #444444;
|
||||
$black: #000000;
|
||||
|
||||
$default_font_family: sans-serif;
|
||||
$green: #98C53A;
|
||||
|
||||
$red: rgba(200, 0, 0, 0.66);
|
||||
|
||||
$default_font_family: 'Muli', sans-serif;
|
||||
$default_font_size: 16px;
|
||||
|
||||
$max_breakpoint: 1600px;
|
||||
@function em($pixels, $context: $default_font_size) {
|
||||
@if (unitless($pixels)) {
|
||||
$pixels: $pixels * 1px;
|
||||
}
|
||||
|
||||
@if (unitless($context)) {
|
||||
$context: $context * 1px;
|
||||
}
|
||||
|
||||
@return $pixels / $context * 1rem;
|
||||
}
|
||||
|
||||
$huge_breakpoint: 1700px;
|
||||
$large_breakpoint: 1200px;
|
||||
$medium_breakpoint: 840px;
|
||||
$small_breakpoint: 600px;
|
||||
$tiny_breakpoint: 350px;
|
||||
|
||||
$reveal_duration: 1.5s;
|
||||
$reveal_timing_function: $easeOutQuart;
|
||||
@@ -1,38 +1,24 @@
|
||||
// Follows Google Fonts Naming Convention with Font Squirrel generation
|
||||
// Font Specification: Weight, Code, Italic
|
||||
$fonts: ('extralight', 200, 1),
|
||||
('light', 300, 1),
|
||||
('regular', 400, 1),
|
||||
('semibold', 500, 1),
|
||||
('bold', 700, 1),
|
||||
('extrabold', 800, 1),
|
||||
('black', 900, 1);
|
||||
|
||||
$typefaces: (
|
||||
'Example': (
|
||||
('thin', 100, true),
|
||||
('extralight', 200, true),
|
||||
('light', 300, true),
|
||||
('regular', 400, true),
|
||||
('medium', 500, true),
|
||||
('semibold', 600, true),
|
||||
('bold', 700, true),
|
||||
('extrabold', 800, true),
|
||||
('black', 900, true),
|
||||
),
|
||||
);
|
||||
|
||||
@each $name, $typeface in $typefaces {
|
||||
@each $font in $typeface {
|
||||
$path_prefix: '../fonts/#{$name}/#{to-lower-case($name)}';
|
||||
@font-face {
|
||||
font-family: $name;
|
||||
src: url('#{$path_prefix}-#{nth($font, 1)}.woff2') format('woff2'),
|
||||
url('#{$path_prefix}-#{nth($font, 1)}.woff') format('woff');
|
||||
font-weight: nth($font, 2);
|
||||
font-style: normal;
|
||||
}
|
||||
@if (nth($font, 3)) {
|
||||
@font-face {
|
||||
font-family: $name;
|
||||
src: url('#{$path_prefix}-#{nth($font, 1)}italic.woff2') format('woff2'),
|
||||
url('#{$path_prefix}-#{nth($font, 1)}italic.woff') format('woff');
|
||||
font-weight: nth($font, 2);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@each $font in $fonts {
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
src: url('../fonts/Muli/muli-#{nth($font, 1)}.woff2') format('woff2'),
|
||||
url('../fonts/Muli/muli-#{nth($font, 1)}.woff') format('woff');
|
||||
font-weight: nth($font, 2);
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Muli';
|
||||
src: url('../fonts/Muli/muli-#{nth($font, 1)}italic.woff2') format('woff2'),
|
||||
url('../fonts/Muli/muli-#{nth($font, 1)}italic.woff') format('woff');
|
||||
font-weight: nth($font, 2);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,73 @@
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
&.r {
|
||||
font-size: 20px !important;
|
||||
@media screen and (max-width: $huge_breakpoint) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
&.unload {
|
||||
> * {
|
||||
will-change: opacity;
|
||||
transition: opacity 0.3s $easeOutQuart !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
&:before {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: em(50px);
|
||||
position: relative;
|
||||
.search_results & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@mixin reveal_transition() {
|
||||
transition: opacity $reveal_duration $reveal_timing_function,
|
||||
transform $reveal_duration $reveal_timing_function !important;
|
||||
}
|
||||
|
||||
.reveal_animation {
|
||||
@include reveal_transition();
|
||||
@for $i from 0 through 30 {
|
||||
&.data_delay_#{$i} {
|
||||
transition-delay: $i * 0.1s !important;
|
||||
}
|
||||
}
|
||||
&.reveal {
|
||||
transform: translateX(100px);
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cms-toolbar-expanded {
|
||||
*.reveal {
|
||||
transform: none;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@@ -16,39 +16,33 @@ article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
@@ -1,5 +1,42 @@
|
||||
html {
|
||||
font-family: $default_font_family;
|
||||
font-size: $default_font_size;
|
||||
@include font_smoothing();
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: em(60px);
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
text-align: center;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.h1 {
|
||||
text-transform: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: em(40px);
|
||||
color: $green;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
& + * {
|
||||
margin-top: em(30px) !important;
|
||||
}
|
||||
& + .text_slider {
|
||||
margin-top: em(70px) !important;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: em(30px);
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
$transform_ems: false;
|
||||
|
||||
@function em($pixels, $context: $default_font_size) {
|
||||
@if ($transform_ems) {
|
||||
@if (unitless($pixels)) {
|
||||
$pixels: $pixels * 1px;
|
||||
}
|
||||
|
||||
@if (unitless($context)) {
|
||||
$context: $context * 1px;
|
||||
}
|
||||
|
||||
@return $pixels / $context * 1rem;
|
||||
} @else {
|
||||
@return $pixels;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin font_smoothing {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
@mixin absolute_properties() {
|
||||
@content;
|
||||
@media screen and (min-width: $max_breakpoint) {
|
||||
$transform_ems: true !global;
|
||||
@content;
|
||||
$transform_ems: false !global;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,30 @@
|
||||
@import "_reset.scss";
|
||||
@import "_animation.scss";
|
||||
@import "_util.scss";
|
||||
@import "_config.scss";
|
||||
@import "_fonts.scss";
|
||||
@import "_typography.scss";
|
||||
@import "_layout.scss";
|
||||
@import "_layout.scss";
|
||||
@import "modules/_header.scss";
|
||||
@import "modules/_search.scss";
|
||||
@import "modules/_navigation.scss";
|
||||
@import "modules/_pages.scss";
|
||||
@import "modules/_contact.scss";
|
||||
@import "modules/_content.scss";
|
||||
@import "modules/_admin_editor.scss";
|
||||
@import "modules/plugins/_quote.scss";
|
||||
@import "modules/plugins/_slider.scss";
|
||||
@import "modules/plugins/_section.scss";
|
||||
@import "modules/plugins/_title_list.scss";
|
||||
@import "modules/plugins/_section_title.scss";
|
||||
@import "modules/plugins/_section_text.scss";
|
||||
@import "modules/plugins/_video.scss";
|
||||
@import "modules/plugins/_partner.scss";
|
||||
@import "modules/plugins/_picture.scss";
|
||||
@import "modules/plugins/_social_media.scss";
|
||||
@import "modules/plugins/_journey_calculator.scss";
|
||||
@import "modules/plugins/_download_section.scss";
|
||||
@import "modules/plugins/_text_slider.scss";
|
||||
@import "modules/plugins/_highlight_list.scss";
|
||||
@import "modules/plugins/_timetable.scss";
|
||||
@import "modules/plugins/_reference_list.scss";
|
||||
@import "modules/plugins/_form.scss";
|
||||
5
private/scss/modules/_admin_editor.scss
Normal file
5
private/scss/modules/_admin_editor.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
#admin_editor {
|
||||
padding: 30px;
|
||||
margin: 0 !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
79
private/scss/modules/_contact.scss
Normal file
79
private/scss/modules/_contact.scss
Normal file
@@ -0,0 +1,79 @@
|
||||
.contact {
|
||||
display: table;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact__frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: table-cell;
|
||||
padding-bottom: em(50px);
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding-top: em(300px);
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding-top: em(200px);
|
||||
}
|
||||
}
|
||||
|
||||
.contact__map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
background: $light_gray;
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.contact__content {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: em(420px);
|
||||
margin-top: em(40px);
|
||||
text-align: left;
|
||||
color: $white;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.contact__content__main {
|
||||
overflow: hidden;
|
||||
background: $green;
|
||||
padding: em(40px);
|
||||
width: 100%;
|
||||
h1 {
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
font-size: em(30px);
|
||||
font-weight: 800;
|
||||
text-transform: none;
|
||||
}
|
||||
.section__text {
|
||||
color: inherit;
|
||||
margin: em(20px) 0;
|
||||
a {
|
||||
color: $white;
|
||||
border-bottom: em(1px) solid rgba($white, 0.6);
|
||||
&:hover {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact__content__backdrop {
|
||||
position: absolute;
|
||||
top: em(50px);
|
||||
left: em(-50px);
|
||||
right: 0;
|
||||
bottom: em(-50px);
|
||||
background: $white;
|
||||
z-index: -1;
|
||||
}
|
||||
185
private/scss/modules/_content.scss
Normal file
185
private/scss/modules/_content.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
$max-width: 100%;
|
||||
|
||||
.content__frame {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: em(-50px);
|
||||
padding-top: em(50px);
|
||||
}
|
||||
|
||||
.content__intro {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
min-height: em(400px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: em(-50px);
|
||||
padding: em(50px) 10% 0;
|
||||
background: $light_gray;
|
||||
transition: background 0.5s $easeOutQuart;
|
||||
h1 {
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) translateY(em(40px));
|
||||
}
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
&.image {
|
||||
h1 {
|
||||
color: $white;
|
||||
text-shadow: 0 0 em(50px) rgba($black, 0.3);
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $black;
|
||||
opacity: 0.2;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
height: 50vh;
|
||||
h1 {
|
||||
transform: translateY(-50%) translateY(em(25px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content__intro__image {
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
will-change: transform;
|
||||
top: -5%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 110%;
|
||||
z-index: 1;
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content__container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content__main {
|
||||
width: 100%;
|
||||
padding: 0 15%;
|
||||
max-width: $max-width;
|
||||
margin: 0 auto;
|
||||
@media screen and (max-width: $huge_breakpoint) {
|
||||
padding: 0 em(70px);
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding: 0 10%;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: 0 em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.content__navigation {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding-top: em(100px);
|
||||
margin-top: em(-100px);
|
||||
&.fixed {
|
||||
margin-top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.content__navigation__frame {
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
padding: em(100px) 15%;
|
||||
margin: 0 auto;
|
||||
@media screen and (max-width: $huge_breakpoint) {
|
||||
padding: em(100px) em(70px);
|
||||
}
|
||||
}
|
||||
|
||||
.content__navigation__main {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content__navigation__progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: em(3px);
|
||||
height: 100%;
|
||||
background: $light_gray;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content__navigation__progress__fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background: $green;
|
||||
display: block;
|
||||
transition: height 0.1s $easeOutQuart;
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
.content__navigation__anchor {
|
||||
font-size: em(16px);
|
||||
color: $gray;
|
||||
letter-spacing: 0.02em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.35;
|
||||
padding: em(8px) 0 em(8px) em(30px);
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transform: none;
|
||||
transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
&:hover {
|
||||
transform: translateX(em(10px));
|
||||
}
|
||||
&.active {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
|
||||
.content__wrap {
|
||||
width: 100%;
|
||||
padding-left: 25%;
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: em(800px);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-bottom: em(200px);
|
||||
}
|
||||
180
private/scss/modules/_header.scss
Normal file
180
private/scss/modules/_header.scss
Normal file
@@ -0,0 +1,180 @@
|
||||
.header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: em(50px);
|
||||
background: $white;
|
||||
border-bottom: em(1px) solid $light_gray;
|
||||
text-align: right;
|
||||
font-size: 0;
|
||||
z-index: 506;
|
||||
box-shadow: 0 -1px 0 0 $light_gray, 0 em(-50px) 0 0 $white;
|
||||
transition: top 1s $easeInOutQuart;
|
||||
will-change: transform, top;
|
||||
.search_open & {
|
||||
top: 100%;
|
||||
}
|
||||
&.reveal {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
.cms-toolbar-expanded & {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__logo {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
background: $green;
|
||||
padding: em(12px) em(15px) em(15px) em(15px);
|
||||
z-index: 510;
|
||||
transition: z-index 0s 1s;
|
||||
img {
|
||||
width: em(100px);
|
||||
height: em(100px);
|
||||
display: block;
|
||||
}
|
||||
.search_open & {
|
||||
z-index: 910;
|
||||
transition: z-index 0s;
|
||||
}
|
||||
&.reveal {
|
||||
transform: translateY(-100%);
|
||||
opacity: 1;
|
||||
}
|
||||
.cms-toolbar-expanded & {
|
||||
top: 46px;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
img {
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__slogan {
|
||||
font-size: em(18px);
|
||||
line-height: em(48px);
|
||||
height: em(50px);
|
||||
color: $gray;
|
||||
font-weight: 300;
|
||||
position: absolute;
|
||||
margin-left: em(150px);
|
||||
top: 0;
|
||||
display: block;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header__logo, .header__slogan {
|
||||
left: 15%;
|
||||
.timetable_body & {
|
||||
left: em(100px);
|
||||
}
|
||||
@media screen and (max-width: $huge_breakpoint) {
|
||||
left: em(70px) !important;
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
left: em(30px) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button {
|
||||
height: em(50px);
|
||||
line-height: em(48px);
|
||||
display: inline-block;
|
||||
border-left: em(1px) solid $light_gray;
|
||||
border-bottom: em(1px) solid $light_gray;
|
||||
font-size: em(18px);
|
||||
font-weight: 800;
|
||||
color: $green;
|
||||
text-decoration: none;
|
||||
padding: 0 em(64px) 0 em(18px);
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: background 0.3s ease-in-out;
|
||||
vertical-align: middle;
|
||||
&:hover {
|
||||
background: darken($white, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--navigation {
|
||||
rect {
|
||||
transform: none;
|
||||
transform-origin: 100% 50%;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
&.line-middle {
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.line-top {
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
.line-bottom {
|
||||
transform: scaleX(0.6);
|
||||
}
|
||||
.line-middle {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background: none;
|
||||
border: none;
|
||||
path {
|
||||
transform: none;
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
}
|
||||
&:hover {
|
||||
background: none;
|
||||
path {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
.cms-toolbar-expanded & {
|
||||
top: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.header__button--search {
|
||||
font-size: 0;
|
||||
padding-left: 0;
|
||||
.circle {
|
||||
transform: none;
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
}
|
||||
&:hover {
|
||||
.circle {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__button__icon {
|
||||
width: em(32px);
|
||||
height: em(32px);
|
||||
position: absolute;
|
||||
top: em(9px);
|
||||
right: em(16px);
|
||||
svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
201
private/scss/modules/_navigation.scss
Normal file
201
private/scss/modules/_navigation.scss
Normal file
@@ -0,0 +1,201 @@
|
||||
.navigation__close {
|
||||
font-size: 0;
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
background: rgba($green, 0.9);
|
||||
opacity: 0;
|
||||
transition: height 0s 1s, opacity 1s;
|
||||
overflow: hidden;
|
||||
z-index: 940;
|
||||
.header__button {
|
||||
transform: translateX(100%);
|
||||
transition: transform 1s $easeInOutQuart;
|
||||
color: $white;
|
||||
svg {
|
||||
fill: $white;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: 0;
|
||||
padding-left: 0;
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translateX(em(640px));
|
||||
}
|
||||
}
|
||||
body.navigation_open & {
|
||||
opacity: 1;
|
||||
height: 100vh;
|
||||
transition: height 0s, opacity 1s;
|
||||
.header__button {
|
||||
transform: translateX(em(-640px));
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: fixed;
|
||||
z-index: 950;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: em(640px);
|
||||
height: 100%;
|
||||
transform: none;
|
||||
transition: transform 1s $easeInOutQuart;
|
||||
body.navigation_open & {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: calc(100% - #{em(64px)});
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: $white;
|
||||
padding: em(80px);
|
||||
.social_media {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: auto;
|
||||
}
|
||||
.social_media__item {
|
||||
background: $green;
|
||||
color: $white;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: em(60px);
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__lists {
|
||||
padding: em(80px) 0;
|
||||
margin-bottom: em(70px);
|
||||
position: relative;
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: 0;
|
||||
margin: em(10px) 0 em(50px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__list__main {
|
||||
> li {
|
||||
margin-top: em(30px);
|
||||
> a {
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: em(40px);
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 500;
|
||||
color: $green;
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
font-size: em(30px);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
margin-top: em(8px);
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: em(5px) 0;
|
||||
color: $dark_gray;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: em(20px);
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
font-weight: 300;
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
font-size: em(18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__list__meta {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
li {
|
||||
margin-left: em(20px);
|
||||
display: inline-block;
|
||||
a {
|
||||
color: $dark_gray;
|
||||
text-decoration: none;
|
||||
font-size: em(15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
position: relative;
|
||||
margin-top: em(50px);
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: em(5px) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__list__meta--top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navigation__list__meta--bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.navigation__languages {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
margin-right: em(30px);
|
||||
margin-bottom: em(20px);
|
||||
li {
|
||||
display: inline-block;
|
||||
height: em(34px);
|
||||
margin-left: em(9px);
|
||||
padding: em(6px) 0;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
a {
|
||||
border-left: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $dark_gray;
|
||||
text-decoration: none;
|
||||
font-size: em(15px);
|
||||
text-transform: uppercase;
|
||||
display: block;
|
||||
border-left: 1px solid $light_gray;
|
||||
padding-left: em(10px);
|
||||
line-height: em(20px);
|
||||
}
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
94
private/scss/modules/_pages.scss
Normal file
94
private/scss/modules/_pages.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
.page_item__frame {
|
||||
margin-bottom: em(50px);
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.page_item {
|
||||
border: em(2px) solid $light_gray;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding-left: 50%;
|
||||
position: relative;
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
&:hover {
|
||||
border-color: $green;
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page_item__image {
|
||||
width: 50%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
background: $light_gray;
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
width: 100%;
|
||||
height: em(220px);
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.page_item__image__title {
|
||||
width: 100%;
|
||||
padding: 0 em(50px);
|
||||
color: darken($light_gray, 5);
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
font-size: em(50px);
|
||||
text-transform: uppercase;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.subpage & {
|
||||
font-size: em(30px);
|
||||
}
|
||||
}
|
||||
|
||||
.page_item__image__main {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10%;
|
||||
& + .page_item__image__title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page_item__content {
|
||||
width: 100%;
|
||||
padding: em(35px);
|
||||
p {
|
||||
line-height: 1.4;
|
||||
color: $dark_gray;
|
||||
margin-bottom: em(30px);
|
||||
.highlighted {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.subpage & {
|
||||
h3 {
|
||||
font-size: em(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page_item__button {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.page_list {
|
||||
padding: em(100px) 0;
|
||||
}
|
||||
138
private/scss/modules/_search.scss
Normal file
138
private/scss/modules/_search.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
#search {
|
||||
background: $white;
|
||||
position: fixed;
|
||||
z-index: 905;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 1s $easeInOutQuart;
|
||||
.content__frame {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.content__frame, .content__container, .content__main {
|
||||
height: 100%;
|
||||
}
|
||||
.search_open & {
|
||||
transform: none;
|
||||
}
|
||||
.search_results & {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.search__close {
|
||||
top: em(50px);
|
||||
}
|
||||
|
||||
.search__content {
|
||||
padding: em(200px) 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search__content__main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search__form {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: top 1s $easeInOutQuart, transform 1s $easeInOutQuart;
|
||||
will-change: top;
|
||||
.search_results & {
|
||||
top: 0;
|
||||
transform: none;
|
||||
}
|
||||
input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: em(90px);
|
||||
font-weight: 300;
|
||||
font-size: em(35px);
|
||||
text-indent: em(25px);
|
||||
padding: 0 em(100px) em(4px) 0;
|
||||
}
|
||||
button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: em(90px);
|
||||
height: em(90px);
|
||||
font-size: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
transform: none;
|
||||
padding: 0;
|
||||
svg {
|
||||
fill: $green;
|
||||
display: inline-block;
|
||||
height: em(60px);
|
||||
width: em(60px);
|
||||
.circle {
|
||||
transform: none;
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 0.3s $easeOutQuart;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
svg {
|
||||
.circle {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
input {
|
||||
height: em(60px);
|
||||
font-size: em(23px);
|
||||
text-indent: em(17px);
|
||||
padding: 0 em(66px) em(2px) 0;
|
||||
}
|
||||
button {
|
||||
width: em(60px);
|
||||
height: em(60px);
|
||||
svg {
|
||||
height: em(40px);
|
||||
width: em(40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search__results__amount {
|
||||
margin: em(35px) 0 em(25px);
|
||||
}
|
||||
|
||||
.search__results {
|
||||
width: 100%;
|
||||
transform: translateY(50vh);
|
||||
transition: transform 1s $easeInOutQuart, opacity 1s $easeInOutQuart;
|
||||
opacity: 0;
|
||||
padding-bottom: em(100px);
|
||||
position: relative;
|
||||
.search_results & {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
&.loading {
|
||||
opacity: 0.2;
|
||||
&:before {
|
||||
top: em(180px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
125
private/scss/modules/plugins/_download_section.scss
Normal file
125
private/scss/modules/plugins/_download_section.scss
Normal file
@@ -0,0 +1,125 @@
|
||||
.downloads {
|
||||
margin: em(50px) em(-10px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
li {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
padding: em(10px);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
display: block;
|
||||
li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download__item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: em(2px) solid $light_gray;
|
||||
padding: em(40px) em(60px) em(40px) em(120px);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: $dark_gray;
|
||||
position: relative;
|
||||
background: $white;
|
||||
min-height: em(124px);
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
&:hover {
|
||||
border-color: $green;
|
||||
.download__item__icon {
|
||||
background: $green;
|
||||
}
|
||||
.download__item__icon__arrow {
|
||||
transform: translateY(2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.download__item__file {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: em(25px);
|
||||
left: em(25px);
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
border-radius: 50%;
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.download__item__file__icon {
|
||||
width: em(30px);
|
||||
height: em(40px);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: em(-15px);
|
||||
margin-top: em(-20px);
|
||||
text-align: center;
|
||||
border: em(2px) solid $white;
|
||||
border-radius: em(2px);
|
||||
line-height: em(34px);
|
||||
font-size: em(11px);
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
&:before, &:after {
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: em(-2px);
|
||||
right: em(-2px);
|
||||
}
|
||||
&:before {
|
||||
width: em(8px);
|
||||
height: em(8px);
|
||||
background: $white;
|
||||
border-radius: em(2px);
|
||||
}
|
||||
&:after {
|
||||
top: em(-2.5px);
|
||||
right: em(-2.5px);
|
||||
border: em(4px) solid;
|
||||
border-color: $green $green transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.download__item__title {
|
||||
display: block;
|
||||
font-size: em(16px);
|
||||
font-weight: 800;
|
||||
line-height: 1.3;
|
||||
margin-bottom: em(3px);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.download__item__description {
|
||||
display: block;
|
||||
font-size: em(16px);
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.download__item__icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: em(-2px);
|
||||
right: em(-2px);
|
||||
width: em(40px);
|
||||
height: em(40px);
|
||||
text-align: center;
|
||||
line-height: em(40px);
|
||||
background: $light_gray;
|
||||
transition: background 0.2s ease-in-out;
|
||||
svg {
|
||||
fill: $white;
|
||||
display: inline-block;
|
||||
width: em(30px);
|
||||
height: em(30px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
179
private/scss/modules/plugins/_form.scss
Normal file
179
private/scss/modules/plugins/_form.scss
Normal file
@@ -0,0 +1,179 @@
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
margin: em(50px) 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.section__text {
|
||||
margin: 0;
|
||||
}
|
||||
& + .section__title {
|
||||
margin-top: em(-75px);
|
||||
}
|
||||
}
|
||||
|
||||
*.loading {
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
margin-top: em(-35px);
|
||||
margin-left: em(-35px);
|
||||
border: em(3px) solid;
|
||||
border-color: $green transparent transparent transparent;
|
||||
border-radius: 50%;
|
||||
animation: rotate 1s infinite;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.form__submit {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
height: em(45px);
|
||||
line-height: em(44px);
|
||||
border: none;
|
||||
-webkit-appearance: none;
|
||||
text-align: center;
|
||||
font-size: em(16px);
|
||||
text-transform: uppercase;
|
||||
background: $green;
|
||||
border-radius: 0;
|
||||
color: $white;
|
||||
font-weight: 900;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.02em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
span {
|
||||
transition: transform 0.4s $easeOutQuart;
|
||||
}
|
||||
&:hover {
|
||||
.button__icon {
|
||||
transform: none;
|
||||
}
|
||||
.button__text {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button__icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(-100%);
|
||||
svg {
|
||||
display: inline-block;
|
||||
height: em(21px);
|
||||
width: em(36px);
|
||||
fill: $white;
|
||||
margin: em(12px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button__text {
|
||||
display: inline-block;
|
||||
transform: none;
|
||||
padding: 0 em(30px);
|
||||
min-width: em(200px);
|
||||
}
|
||||
|
||||
.form__field {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: em(15px);
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
height: em(45px);
|
||||
font-size: em(16px);
|
||||
font-weight: 900;
|
||||
font-family: $default_font_family;
|
||||
color: darken($dark_gray, 20);
|
||||
background: lighten($light_gray, 2);
|
||||
text-indent: em(14px);
|
||||
border: none;
|
||||
transition: background 0.2s ease-in-out;
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
padding-right: em(5px);
|
||||
&::placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
color: $gray;
|
||||
}
|
||||
&:focus {
|
||||
background: $light_gray;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: em(150px);
|
||||
text-indent: 0;
|
||||
padding: em(12px) em(14px);
|
||||
resize: vertical;
|
||||
min-height: em(100px);
|
||||
}
|
||||
|
||||
.form__field__help_text {
|
||||
margin-top: em(5px);
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: em(16px);
|
||||
font-weight: 300;
|
||||
color: $dark_gray;
|
||||
}
|
||||
|
||||
.form__success, .form__errors, .form__field__errors {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: em(16px);
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form__errors, .form__field__errors {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
.form__errors {
|
||||
margin-bottom: em(30px);
|
||||
}
|
||||
|
||||
.form__field__errors {
|
||||
margin-top: em(7px);
|
||||
}
|
||||
124
private/scss/modules/plugins/_highlight_list.scss
Normal file
124
private/scss/modules/plugins/_highlight_list.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
.highlight_list {
|
||||
margin: em(50px) em(-10px);
|
||||
position: relative;
|
||||
&.full {
|
||||
margin: em(50px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__content {
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
.section__title {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item__frame {
|
||||
display: inline-block;
|
||||
width: 33.333%;
|
||||
padding: em(35px) em(10px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: top;
|
||||
.full & {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: em(50px) 0;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item {
|
||||
font-size: $default_font_size;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.full & {
|
||||
text-align: left;
|
||||
min-height: em(160px);
|
||||
padding-left: em(200px);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding-left: em(115px);
|
||||
min-height: em(80px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
text-align: left;
|
||||
padding-left: em(115px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item__icon {
|
||||
height: em(160px);
|
||||
width: em(160px);
|
||||
border-radius: 50%;
|
||||
background: $green;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
display: block;
|
||||
margin: 0 auto 30px;
|
||||
i {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: em(70px);
|
||||
line-height: 1;
|
||||
}
|
||||
.full & {
|
||||
position: absolute;
|
||||
top: em(-10px);
|
||||
left: 0;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: em(80px);
|
||||
width: em(80px);
|
||||
i {
|
||||
font-size: em(35px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item__icon__animated {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: em(35px);
|
||||
height: em(35px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item__title {
|
||||
font-size: em(16px);
|
||||
font-weight: 800;
|
||||
color: $dark_gray;
|
||||
line-height: 1.3;
|
||||
margin-bottom: em(10px);
|
||||
.full & {
|
||||
font-size: em(18px);
|
||||
}
|
||||
}
|
||||
|
||||
.highlight_list__item__text {
|
||||
font-size: em(16px);
|
||||
font-weight: 300;
|
||||
color: $dark_gray;
|
||||
line-height: 1.3;
|
||||
.full & {
|
||||
font-size: em(18px);
|
||||
}
|
||||
}
|
||||
104
private/scss/modules/plugins/_journey_calculator.scss
Normal file
104
private/scss/modules/plugins/_journey_calculator.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
.pac-container {
|
||||
box-shadow: none;
|
||||
font-family: $default_font_family;
|
||||
border-radius: 0;
|
||||
border-top: 0;
|
||||
margin-top: em(-45px);
|
||||
transform: translateY(-100%);
|
||||
.pac-icon {
|
||||
display: none;
|
||||
}
|
||||
.pac-item {
|
||||
line-height: em(40px);
|
||||
padding: 0 em(5px) 0 em(20px);
|
||||
border-top: em(1px) solid $light_gray;
|
||||
&:last-child {
|
||||
border-bottom: em(1px) solid $light_gray;
|
||||
}
|
||||
}
|
||||
.pac-item, .pac-item-query {
|
||||
font-size: em(16px);
|
||||
}
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.journey_calculator {
|
||||
margin: em(30px) 0;
|
||||
.section__text {
|
||||
margin: 0 0 em(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.journey_calculator__input {
|
||||
position: relative;
|
||||
padding-right: em(105px);
|
||||
transition: padding 0.3s ease-in-out;
|
||||
will-change: padding;
|
||||
input {
|
||||
border: none;
|
||||
background: $white;
|
||||
height: em(45px);
|
||||
}
|
||||
&.loaded {
|
||||
.journey_calculator__result {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.error {
|
||||
.journey_calculator__result {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.error + .journey_calculator__message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.journey_calculator__result {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: em(95px);
|
||||
opacity: 0;
|
||||
line-height: em(45px);
|
||||
height: em(45px);
|
||||
background: $white;
|
||||
font-size: em(16px);
|
||||
font-weight: 900;
|
||||
font-family: $default_font_family;
|
||||
color: darken($dark_gray, 20);
|
||||
text-align: center;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
text-transform: uppercase;
|
||||
&:after {
|
||||
content: attr(data-duration) ' ' attr(data-label);
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
&.loading {
|
||||
opacity: 1;
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
&:before {
|
||||
top: 50%;
|
||||
width: em(24px);
|
||||
height: em(24px);
|
||||
margin-top: em(-12px);
|
||||
margin-left: em(-12px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.journey_calculator__message {
|
||||
width: 100%;
|
||||
margin-top: em(10px);
|
||||
font-weight: 500;
|
||||
font-size: em(16px);
|
||||
line-height: 1.3;
|
||||
display: none;
|
||||
color: $red;
|
||||
}
|
||||
42
private/scss/modules/plugins/_partner.scss
Normal file
42
private/scss/modules/plugins/_partner.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.partner {
|
||||
width: 100%;
|
||||
margin: em(50px) 0;
|
||||
padding-left: em(280px);
|
||||
position: relative;
|
||||
min-height: em(200px);
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 800;
|
||||
}
|
||||
p {
|
||||
margin: em(10px) 0 0 0;
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
padding: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.partner__logo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: em(260px);
|
||||
height: em(200px);
|
||||
background: $light_gray;
|
||||
padding: em(50px) em(30px);
|
||||
text-align: center;
|
||||
line-height: em(100px);
|
||||
img {
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
@media screen and (max-width: $small_breakpoint) {
|
||||
position: relative;
|
||||
margin-bottom: em(20px);
|
||||
}
|
||||
}
|
||||
29
private/scss/modules/plugins/_picture.scss
Normal file
29
private/scss/modules/plugins/_picture.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
.picture {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
figcaption {
|
||||
font-size: em(18px);
|
||||
color: $dark_gray;
|
||||
line-height: 1.5;
|
||||
margin-top: em(10px);
|
||||
}
|
||||
&.full {
|
||||
img {
|
||||
margin-top: -3%;
|
||||
margin-bottom: -3%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picture__main {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
&.reveal_animation {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
74
private/scss/modules/plugins/_quote.scss
Normal file
74
private/scss/modules/plugins/_quote.scss
Normal file
@@ -0,0 +1,74 @@
|
||||
.quote {
|
||||
margin: em(50px) 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: $dark_gray;
|
||||
&.image {
|
||||
padding-right: em(250px);
|
||||
min-height: em(300px);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
&.image {
|
||||
min-height: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quote__image__frame {
|
||||
position: absolute;
|
||||
top: em(-10px);
|
||||
right: 0;
|
||||
width: em(230px);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: em(140px);
|
||||
margin: em(30px) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quote__image__main {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
& + .quote__source {
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.quote__image {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.quote__content {
|
||||
font-size: em(35px);
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-bottom: em(10px);
|
||||
&:before {
|
||||
content: '«';
|
||||
display: inline;
|
||||
}
|
||||
&:after {
|
||||
content: '»';
|
||||
display: inline;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: em(25px);
|
||||
}
|
||||
}
|
||||
|
||||
.quote__source {
|
||||
font-weight: 800;
|
||||
}
|
||||
215
private/scss/modules/plugins/_reference_list.scss
Normal file
215
private/scss/modules/plugins/_reference_list.scss
Normal file
@@ -0,0 +1,215 @@
|
||||
.reference_list {
|
||||
margin: em(50px) 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 0;
|
||||
padding-bottom: 34.6%;
|
||||
will-change: padding;
|
||||
transition: padding 0.5s $easeInOutCubic;
|
||||
& + .section__title {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: em(-50px);
|
||||
}
|
||||
& + .section__title + * {
|
||||
margin-top: 0;
|
||||
}
|
||||
&[data-active] {
|
||||
padding-bottom: 75%;
|
||||
.reference_list__video__item {
|
||||
transform: translateY(-30%);
|
||||
}
|
||||
.reference_list__frame {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
.reference_list__item__frame--close {
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding-bottom: 88.2%;
|
||||
.reference_list__frame {
|
||||
transform: scale(0.74);
|
||||
}
|
||||
}
|
||||
}
|
||||
@for $i from 0 through 2 {
|
||||
&[data-active="#{$i}"] {
|
||||
.reference_list__video__item.data_id_#{$i} {
|
||||
transform: none;
|
||||
pointer-events: all;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
iframe {
|
||||
opacity: 1 !important;
|
||||
z-index: 5;
|
||||
transition: opacity 0.4s ease-in-out 0.3s;
|
||||
}
|
||||
& ~ .reference_list__video__item {
|
||||
transform: translateY(30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reference_list__frame {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
transition: transform 0.5s $easeInOutCubic;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.reference_list__item__frame--close {
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
.reference_list__item__image__main {
|
||||
background: $green;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transform: none;
|
||||
&:before, &:after {
|
||||
content: '';
|
||||
width: em(80px);
|
||||
height: em(10px);
|
||||
background: $white;
|
||||
display: block;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: em(-40px);
|
||||
margin-top: em(-5px);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
&:before, &:after {
|
||||
width: em(40px);
|
||||
height: em(6px);
|
||||
margin-left: em(-20px);
|
||||
margin-top: em(-3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.reference_list__item:hover {
|
||||
.reference_list__item__image__main {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reference_list__content {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reference_list__item__frame {
|
||||
display: inline-block;
|
||||
margin: em(15px) 3.5% em(15px) 0;
|
||||
font-size: $default_font_size;
|
||||
width: 31%;
|
||||
}
|
||||
|
||||
.reference_list__item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.video__play {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
.video__play {
|
||||
width: em(50px);
|
||||
height: em(50px);
|
||||
line-height: em(51px);
|
||||
svg {
|
||||
width: em(20px);
|
||||
height: em(20px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reference_list__item__image__main {
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
clip-path: circle(50% at 50% 50%);
|
||||
}
|
||||
|
||||
.reference_list__item__image {
|
||||
position: absolute;
|
||||
top: -15%;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
transform: initial !important;
|
||||
transition: none !important;
|
||||
will-change: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
.reference_list__video__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reference_list__video__item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.5s $easeInOutCubic;
|
||||
pointer-events: none;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
.reference_list__videos {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 15%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.video {
|
||||
margin: 0;
|
||||
iframe {
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0 !important;
|
||||
transition: opacity 0.2s ease-in-out 0s;
|
||||
}
|
||||
.video__thumbnail {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding-top: 32%;
|
||||
}
|
||||
}
|
||||
9
private/scss/modules/plugins/_section.scss
Normal file
9
private/scss/modules/plugins/_section.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
.section {
|
||||
padding-top: em(100px);
|
||||
}
|
||||
|
||||
.spacer {
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 1px;
|
||||
}
|
||||
36
private/scss/modules/plugins/_section_text.scss
Normal file
36
private/scss/modules/plugins/_section_text.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
.section__text {
|
||||
font-size: em(18px);
|
||||
color: $dark_gray;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: em(50px) 0;
|
||||
&.columns {
|
||||
column-count: 2;
|
||||
column-gap: em(30px);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
strong, b {
|
||||
font-weight: 500;
|
||||
}
|
||||
em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
u {
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
border-bottom: em(1px) solid rgba($dark_gray, 0.4);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
line-height: 1.3;
|
||||
color: $green;
|
||||
border-bottom: em(1px) solid rgba($green, 0.4);
|
||||
transition: border-color 0.2s ease-in-out;
|
||||
&:hover {
|
||||
border-color: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
21
private/scss/modules/plugins/_section_title.scss
Normal file
21
private/scss/modules/plugins/_section_title.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
.section__title {
|
||||
height: 0;
|
||||
width: 100%;
|
||||
margin: em(50px) 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.section__title__main {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
transform: translateY(-50%);
|
||||
font-size: $default_font_size;
|
||||
}
|
||||
|
||||
.section__title__content {
|
||||
font-size: em(300px);
|
||||
font-weight: 900;
|
||||
color: $light_gray;
|
||||
}
|
||||
290
private/scss/modules/plugins/_slider.scss
Normal file
290
private/scss/modules/plugins/_slider.scss
Normal file
@@ -0,0 +1,290 @@
|
||||
@mixin disable_slider_navigation() {
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
transform: none;
|
||||
&:before, &:after {
|
||||
background: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: em(50px) 0;
|
||||
}
|
||||
|
||||
.slider, .text_slider {
|
||||
@for $i from 0 through 10 {
|
||||
&[data-active="#{$i}"] {
|
||||
.slider__image__item {
|
||||
transform: translateX(-20%);
|
||||
}
|
||||
.slider__image__item.data_id_#{$i} {
|
||||
transform: none;
|
||||
}
|
||||
.slider__image__item.data_id_#{$i} ~ .slider__image__item {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slider__texts__content, .text_slider__content {
|
||||
transform: translateX(-100% * $i);
|
||||
}
|
||||
.slider__text__item.data_id_#{$i}, .text_slider__item.data_id_#{$i} {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[data-last="#{$i}"] {
|
||||
.slider__navigation--next {
|
||||
@include disable_slider_navigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-last="#{$i}"] {
|
||||
.text_slider__container {
|
||||
width: ($i + 1) * 100%;
|
||||
}
|
||||
.text_slider__item {
|
||||
width: 100% / ($i + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-active="0"] {
|
||||
.slider__navigation--prev {
|
||||
@include disable_slider_navigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider__content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
min-height: em(400px);
|
||||
padding: em(90px) 0 em(80px);
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: em(300px) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__navigation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: em(90px);
|
||||
height: em(90px);
|
||||
line-height: em(75px);
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
text-indent: em(15px);
|
||||
direction: rtl;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
svg {
|
||||
fill: $green;
|
||||
transition: fill 0.2s ease-in-out, transform 0.2s ease-in-out;
|
||||
display: inline-block;
|
||||
width: em(35px);
|
||||
height: em(35px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
html.no-touchevents &:hover {
|
||||
svg {
|
||||
fill: darken($green, 10);
|
||||
transform: translateX(em(5px));
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: em(65px);
|
||||
height: em(65px);
|
||||
background: $white;
|
||||
line-height: em(65px);
|
||||
text-indent: 0;
|
||||
top: em(300px);
|
||||
margin-top: em(-65px);
|
||||
svg {
|
||||
width: em(25px);
|
||||
height: em(25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider__navigation--prev {
|
||||
right: em(90px);
|
||||
direction: ltr;
|
||||
&:hover {
|
||||
svg {
|
||||
transform: translateX(em(-5px));
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
right: em(65px);
|
||||
}
|
||||
}
|
||||
|
||||
.slider__images__frame {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: em(180px);
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
right: 10%;
|
||||
bottom: em(200px);
|
||||
}
|
||||
}
|
||||
|
||||
.slider__images {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10%;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.slider__image__item {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
transform: none;
|
||||
transition: transform 1s $easeInOutQuad;
|
||||
}
|
||||
|
||||
.slider__texts {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
height: auto;
|
||||
width: 42%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: left;
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding-bottom: em(40px);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.slider__texts__frame {
|
||||
width: 100%;
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.slider__texts__content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: none;
|
||||
transition: transform 0.8s $easeInOutQuad;
|
||||
}
|
||||
|
||||
.slider__text__item {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: $default_font_size;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s $easeInOutQuad;
|
||||
}
|
||||
|
||||
.slider__text__item__content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: em(30px) em(35px);
|
||||
white-space: normal;
|
||||
color: $white;
|
||||
&.email {
|
||||
padding-bottom: em(50px);
|
||||
}
|
||||
}
|
||||
|
||||
.slider__text__item__title {
|
||||
font-size: em(18px);
|
||||
font-weight: 700;
|
||||
margin-bottom: em(5px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.slider__text__item__subline {
|
||||
font-size: em(14px);
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.slider__text__item__text {
|
||||
font-size: em(16px);
|
||||
font-weight: 300;
|
||||
margin-top: em(20px);
|
||||
margin-bottom: em(5px);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.slider__text__item__qualifications__title {
|
||||
margin-top: em(20px);
|
||||
font-size: em(12px);
|
||||
text-transform: uppercase;
|
||||
font-weight: 900;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
.slider__text__item__qualifications {
|
||||
margin: em(10px) em(-15px) 0 0;
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: em(8px);
|
||||
margin-bottom: em(8px);
|
||||
background: $white;
|
||||
padding: em(5px) em(8px);
|
||||
font-size: em(14px);
|
||||
font-weight: 700;
|
||||
color: darken($green, 10);
|
||||
line-height: 1.3;
|
||||
}
|
||||
.email & {
|
||||
margin-bottom: em(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.slider__text__item__email {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
background: $white;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: em(-30px);
|
||||
left: 20%;
|
||||
transform: none;
|
||||
transition: transform 0.2s ease-in-out, box-shadow 0.2s;
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0);
|
||||
text-align: center;
|
||||
line-height: em(69px);
|
||||
svg {
|
||||
display: inline-block;
|
||||
fill: $green;
|
||||
width: em(30px);
|
||||
height: em(30px);
|
||||
vertical-align: middle;
|
||||
margin-top: -2px;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0.1);
|
||||
}
|
||||
}
|
||||
39
private/scss/modules/plugins/_social_media.scss
Normal file
39
private/scss/modules/plugins/_social_media.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
.social_media {
|
||||
width: 100%;
|
||||
display: block;
|
||||
li {
|
||||
margin-right: em(5px);
|
||||
display: inline-block;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social_media__item {
|
||||
display: block;
|
||||
width: em(34px);
|
||||
height: em(34px);
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
line-height: em(34px);
|
||||
text-align: center;
|
||||
color: $green;
|
||||
font-size: em(13px);
|
||||
transform: none;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
will-change: transform;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.social_media {
|
||||
margin: em(50px) 0;
|
||||
}
|
||||
.social_media__item {
|
||||
background: $green;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
64
private/scss/modules/plugins/_text_slider.scss
Normal file
64
private/scss/modules/plugins/_text_slider.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
.text_slider {
|
||||
margin: em(50px) 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.slider__navigation {
|
||||
top: 50%;
|
||||
margin-top: em(-45px);
|
||||
right: em(-40px);
|
||||
z-index: 5;
|
||||
}
|
||||
.slider__navigation--prev {
|
||||
left: em(-40px);
|
||||
right: auto;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
.slider__navigation {
|
||||
background: none;
|
||||
right: em(-40px);
|
||||
}
|
||||
.slider__navigation--prev {
|
||||
left: em(-40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text_slider__frame {
|
||||
overflow: hidden;
|
||||
padding: 0 em(60px);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
mask-image: linear-gradient(to right, rgba($black, 0) 0%, $black 10%, $black 90%, rgba($black, 0) 100%);
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: 0 em(40px);
|
||||
}
|
||||
}
|
||||
|
||||
.text_slider__content {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
transform: none;
|
||||
transition: transform 0.8s $easeInOutQuad;
|
||||
}
|
||||
|
||||
.text_slider__item {
|
||||
display: inline-block;
|
||||
font-size: $default_font_size;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.text_slider__text {
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
font-size: em(35px);
|
||||
color: $dark_gray;
|
||||
text-align: center;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: em(20px);
|
||||
}
|
||||
}
|
||||
488
private/scss/modules/plugins/_timetable.scss
Normal file
488
private/scss/modules/plugins/_timetable.scss
Normal file
@@ -0,0 +1,488 @@
|
||||
$timetable_count: 15;
|
||||
|
||||
#timetable {
|
||||
width: 100%;
|
||||
height: 110vh;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&.active {
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__frame {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 34%;
|
||||
left: 33%;
|
||||
z-index: 560;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
top: em(80px);
|
||||
width: 300%;
|
||||
left: 50%;
|
||||
max-width: 40vh;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__main {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timetable__clock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.reveal {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__start {
|
||||
position: absolute;
|
||||
left: 7%;
|
||||
width: 86%;
|
||||
border-radius: 50%;
|
||||
z-index: -1;
|
||||
background: $green;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
height: 0;
|
||||
transform: scale(5);
|
||||
opacity: 1;
|
||||
transition: transform 1s $easeInOutQuart, opacity 1s $easeInOutQuart, top 0s 1s, height 0s 1s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition-delay: 0.9s;
|
||||
top: 7%;
|
||||
height: 86%;
|
||||
opacity: 0.95;
|
||||
transform: none;
|
||||
&.reveal {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__progress {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(90deg);
|
||||
opacity: 1;
|
||||
transition: opacity 0s 1s;
|
||||
circle {
|
||||
transition: stroke-dashoffset 1.5s $easeOutExpo;
|
||||
}
|
||||
#timetable[data-active="0"] & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__design {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4.5%;
|
||||
left: 4.5%;
|
||||
width: 91%;
|
||||
height: 91%;
|
||||
z-index: 5;
|
||||
.border {
|
||||
fill: $light_gray;
|
||||
}
|
||||
.line {
|
||||
fill: $gray;
|
||||
opacity: 0.25;
|
||||
transition: fill 0.5s 1s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition-delay: 0.5s;
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
.dot {
|
||||
fill: $medium_light_gray;
|
||||
transition: fill 0.5s 1s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition-delay: 0.5s;
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__digital {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -3.5vw;
|
||||
color: $near_black;
|
||||
width: 100%;
|
||||
font-size: 5.5vw;
|
||||
line-height: 7vw;
|
||||
text-align: center;
|
||||
transform: none;
|
||||
transition: color 1s 1s, transform 1s 1s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition-delay: 0s;
|
||||
color: $white;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
margin-top: -1vh;
|
||||
font-size: 5.5vh;
|
||||
line-height: 8vh;
|
||||
transform: translateY(-3vh);
|
||||
#timetable[data-active="0"] & {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__clock__digital__intro {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 20%;
|
||||
width: 60%;
|
||||
font-size: 1.25vw;
|
||||
line-height: 1.3;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s 1s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition-delay: 0.5s;
|
||||
opacity: 1;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
font-size: 2.2vh;
|
||||
}
|
||||
}
|
||||
|
||||
#timetable__clock__digital__time span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.5vw;
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
top: -0.5vh;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__start__background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: 6;
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
transition: opacity 0s 1s, height 0s 1s;
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.3));
|
||||
}
|
||||
#timetable[data-active="0"] & {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__start__door {
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
background: $green;
|
||||
z-index: 551;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
transform: translateX(-100%);
|
||||
will-change: transform;
|
||||
transition: opacity 0s 1s, transform 1s $easeInOutQuart 1s, height 0s 2s;
|
||||
#timetable[data-active="0"] & {
|
||||
transition: opacity 0s 1s, transform 1s $easeInOutQuart, height 0s;
|
||||
transform: none;
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__start__door--right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
@keyframes point {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, em(20px));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__next {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
color: $green;
|
||||
text-align: center;
|
||||
height: em(60px);
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: opacity 4s $reveal_timing_function, color 0s 1s !important;
|
||||
span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: em(40px);
|
||||
margin-left: em(-15px);
|
||||
width: em(30px);
|
||||
height: em(50px);
|
||||
border: em(2.5px) solid $green;
|
||||
border-radius: em(50px);
|
||||
transition: border 0s 1s;
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: em(10px);
|
||||
left: 50%;
|
||||
width: em(6px);
|
||||
height: em(6px);
|
||||
margin-left: em(-3px);
|
||||
background: $green;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
animation: point 2s infinite;
|
||||
transition: background 0s 1s;
|
||||
}
|
||||
#timetable[data-active="0"] & {
|
||||
border-color: $white;
|
||||
&:before {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#timetable[data-active="0"] & {
|
||||
color: $black;
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__intro__placeholder {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.timetable__item {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
opacity: 1;
|
||||
&.even {
|
||||
.timetable__item__main {
|
||||
&.reveal {
|
||||
.timetable__item__image {
|
||||
transform: translateY(em(150px));
|
||||
}
|
||||
.timetable__item__content {
|
||||
transform: translateY(em(300px));
|
||||
}
|
||||
}
|
||||
}
|
||||
.timetable__item__image {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
.timetable__item__image__main {
|
||||
transform: translateY(em(-150px));
|
||||
}
|
||||
.timetable__item__content {
|
||||
transition-delay: 0.2s;
|
||||
}
|
||||
.timetable__item__content__frame {
|
||||
padding-left: 40%;
|
||||
}
|
||||
}
|
||||
&.odd {
|
||||
.timetable__item__main {
|
||||
direction: rtl;
|
||||
}
|
||||
.timetable__item__content__frame {
|
||||
padding-right: 40%;
|
||||
}
|
||||
}
|
||||
#timetable[data-active="0"] & {
|
||||
opacity: 0;
|
||||
transition: opacity 0s 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__after {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
&.last {
|
||||
height: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
&.reveal {
|
||||
transform: none;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: 0 em(30px);
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__image {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
vertical-align: top;
|
||||
transition: transform 1.5s $easeOutQuart 0.2s, opacity 1.5s $easeOutQuart 0.2s;
|
||||
.reveal & {
|
||||
opacity: 0;
|
||||
transform: translateY(em(300px));
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: 100%;
|
||||
transition-delay: 0s !important;
|
||||
margin-bottom: em(40px);
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__image__frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 65%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timetable__item__image__main {
|
||||
background-position: top center;
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -5%;
|
||||
transform: translateY(em(-300px));
|
||||
}
|
||||
|
||||
.timetable__item__content {
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
transform: none;
|
||||
vertical-align: top;
|
||||
opacity: 1;
|
||||
direction: ltr;
|
||||
white-space: normal;
|
||||
transition: transform 1.5s $easeOutQuart, opacity 1.5s $easeOutQuart;
|
||||
.reveal & {
|
||||
transform: translateY(em(150px));
|
||||
opacity: 0;
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
width: 100%;
|
||||
transition-delay: 0.2s !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__content__frame {
|
||||
padding: 0 em(100px);
|
||||
hyphens: auto;
|
||||
@media screen and (max-width: $huge_breakpoint) {
|
||||
padding: 0 em(70px);
|
||||
}
|
||||
@media screen and (max-width: $large_breakpoint) {
|
||||
padding: 0 em(30px);
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable__item__title {
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.timetable__item__text {
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timetable__titles {
|
||||
.section__title {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
left: -10%;
|
||||
width: auto;
|
||||
right: -10%;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
transform: translateX(200%);
|
||||
mask-image: linear-gradient(to right, rgba($black, 0) 0%, $black 10%, $black 90%, rgba($black, 0) 100%);
|
||||
opacity: 0;
|
||||
transition: transform 1.5s $easeInOutQuart, opacity 1.5s $easeInOutQuart;
|
||||
@for $i from 1 through $timetable_count {
|
||||
#timetable[data-active="#{$i}"] & {
|
||||
transform: translateX(-200%);
|
||||
&.data_id_#{$i} {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
&.data_id_#{$i} ~ .section__title {
|
||||
transform: translateX(200%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section__title__main {
|
||||
transform: translateY(40%);
|
||||
}
|
||||
}
|
||||
26
private/scss/modules/plugins/_title_list.scss
Normal file
26
private/scss/modules/plugins/_title_list.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
.title_list {
|
||||
width: 100%;
|
||||
li {
|
||||
margin-bottom: em(10px);
|
||||
padding-left: em(260px);
|
||||
position: relative;
|
||||
b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: em(240px);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: $medium_breakpoint) {
|
||||
li {
|
||||
margin-bottom: em(20px);
|
||||
padding-left: 0;
|
||||
b {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
94
private/scss/modules/plugins/_video.scss
Normal file
94
private/scss/modules/plugins/_video.scss
Normal file
@@ -0,0 +1,94 @@
|
||||
$video_transition_duration: 0.5s;
|
||||
|
||||
.video {
|
||||
margin: em(50px) 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
&.playing {
|
||||
.video__thumbnail {
|
||||
height: 0;
|
||||
transition: height 0s $video_transition_duration;
|
||||
}
|
||||
.video__frame {
|
||||
opacity: 1;
|
||||
}
|
||||
.video__play {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video__frame {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity $video_transition_duration $easeOutQuad;
|
||||
}
|
||||
|
||||
.video__thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: height 0s 0s;
|
||||
&.reveal_animation {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.video__play {
|
||||
font-size: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: em(70px);
|
||||
height: em(70px);
|
||||
margin-top: em(-35px);
|
||||
margin-left: em(-35px);
|
||||
background: $green;
|
||||
border-radius: 50%;
|
||||
z-index: 2;
|
||||
transform: none;
|
||||
will-change: transform;
|
||||
opacity: 1;
|
||||
transition: opacity $video_transition_duration $easeOutQuad, transform 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s;
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0);
|
||||
line-height: em(72.5px);
|
||||
text-indent: em(2px);
|
||||
text-align: center;
|
||||
svg {
|
||||
display: inline-block;
|
||||
fill: $white;
|
||||
transition: fill 0.2s ease-in-out;
|
||||
width: em(25px);
|
||||
height: em(25px);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.video__thumbnail:hover &, .reference_list__item:hover & {
|
||||
background: $white;
|
||||
transform: scale(1.2);
|
||||
box-shadow: 0 0 em(30px) rgba($black, 0.2);
|
||||
svg {
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video__thumbnail__image {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
z-index: -1;
|
||||
}
|
||||
Reference in New Issue
Block a user