From a1c7ed1b5188f7c0ae4f1ed2902333f6f990fdc3 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 21 Jun 2023 09:48:08 +0200 Subject: [PATCH] smaller screen style --- css/sprint_4.css | 682 +++++++++++++++++++++++----------------- js/animations_custom.js | 2 +- 2 files changed, 403 insertions(+), 281 deletions(-) diff --git a/css/sprint_4.css b/css/sprint_4.css index f0a6d84..cd14de0 100644 --- a/css/sprint_4.css +++ b/css/sprint_4.css @@ -6,385 +6,385 @@ /*}*/ @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Light.eot'); - src: local('GT Walsheim Pro Light'), local('GTWalsheimPro-Light'), - url('font/GTWalsheimPro-Light.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Light.woff2') format('woff2'), - url('font/GTWalsheimPro-Light.woff') format('woff'), - url('font/GTWalsheimPro-Light.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Light.eot"); + src: local("GT Walsheim Pro Light"), local("GTWalsheimPro-Light"), + url("font/GTWalsheimPro-Light.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Light.woff2") format("woff2"), + url("font/GTWalsheimPro-Light.woff") format("woff"), + url("font/GTWalsheimPro-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Regular.eot'); - src: local('GT Walsheim Pro Regular'), local('GTWalsheimPro-Regular'), - url('font/GTWalsheimPro-Regular.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Regular.woff2') format('woff2'), - url('font/GTWalsheimPro-Regular.woff') format('woff'), - url('font/GTWalsheimPro-Regular.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Regular.eot"); + src: local("GT Walsheim Pro Regular"), local("GTWalsheimPro-Regular"), + url("font/GTWalsheimPro-Regular.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Regular.woff2") format("woff2"), + url("font/GTWalsheimPro-Regular.woff") format("woff"), + url("font/GTWalsheimPro-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-ThinOblique.eot'); - src: local('GT Walsheim Pro Thin Oblique'), local('GTWalsheimPro-ThinOblique'), - url('font/GTWalsheimPro-ThinOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-ThinOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-ThinOblique.woff') format('woff'), - url('font/GTWalsheimPro-ThinOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-ThinOblique.eot"); + src: local("GT Walsheim Pro Thin Oblique"), local("GTWalsheimPro-ThinOblique"), + url("font/GTWalsheimPro-ThinOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-ThinOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-ThinOblique.woff") format("woff"), + url("font/GTWalsheimPro-ThinOblique.ttf") format("truetype"); font-weight: 100; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Thin.eot'); - src: local('GT Walsheim Pro Thin'), local('GTWalsheimPro-Thin'), - url('font/GTWalsheimPro-Thin.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Thin.woff2') format('woff2'), - url('font/GTWalsheimPro-Thin.woff') format('woff'), - url('font/GTWalsheimPro-Thin.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Thin.eot"); + src: local("GT Walsheim Pro Thin"), local("GTWalsheimPro-Thin"), + url("font/GTWalsheimPro-Thin.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Thin.woff2") format("woff2"), + url("font/GTWalsheimPro-Thin.woff") format("woff"), + url("font/GTWalsheimPro-Thin.ttf") format("truetype"); font-weight: 100; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-BoldOblique.eot'); - src: local('GT Walsheim Pro Bold Oblique'), local('GTWalsheimPro-BoldOblique'), - url('font/GTWalsheimPro-BoldOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-BoldOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-BoldOblique.woff') format('woff'), - url('font/GTWalsheimPro-BoldOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-BoldOblique.eot"); + src: local("GT Walsheim Pro Bold Oblique"), local("GTWalsheimPro-BoldOblique"), + url("font/GTWalsheimPro-BoldOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-BoldOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-BoldOblique.woff") format("woff"), + url("font/GTWalsheimPro-BoldOblique.ttf") format("truetype"); font-weight: bold; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Ultra'; - src: url('font/GTWalsheimPro-UltraBold.eot'); - src: local('GT Walsheim Pro Ultra Bold'), local('GTWalsheimPro-UltraBold'), - url('font/GTWalsheimPro-UltraBold.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-UltraBold.woff2') format('woff2'), - url('font/GTWalsheimPro-UltraBold.woff') format('woff'), - url('font/GTWalsheimPro-UltraBold.ttf') format('truetype'); + font-family: "GT Walsheim Pro Ultra"; + src: url("font/GTWalsheimPro-UltraBold.eot"); + src: local("GT Walsheim Pro Ultra Bold"), local("GTWalsheimPro-UltraBold"), + url("font/GTWalsheimPro-UltraBold.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-UltraBold.woff2") format("woff2"), + url("font/GTWalsheimPro-UltraBold.woff") format("woff"), + url("font/GTWalsheimPro-UltraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Ultra'; - src: url('font/GTWalsheimPro-UltraBoldOblique.eot'); - src: local('GT Walsheim Pro Ultra Bold Oblique'), local('GTWalsheimPro-UltraBoldOblique'), - url('font/GTWalsheimPro-UltraBoldOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-UltraBoldOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-UltraBoldOblique.woff') format('woff'), - url('font/GTWalsheimPro-UltraBoldOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Ultra"; + src: url("font/GTWalsheimPro-UltraBoldOblique.eot"); + src: local("GT Walsheim Pro Ultra Bold Oblique"), local("GTWalsheimPro-UltraBoldOblique"), + url("font/GTWalsheimPro-UltraBoldOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-UltraBoldOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-UltraBoldOblique.woff") format("woff"), + url("font/GTWalsheimPro-UltraBoldOblique.ttf") format("truetype"); font-weight: 800; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-MediumOblique.eot'); - src: local('GT Walsheim Pro Medium Oblique'), local('GTWalsheimPro-MediumOblique'), - url('font/GTWalsheimPro-MediumOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-MediumOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-MediumOblique.woff') format('woff'), - url('font/GTWalsheimPro-MediumOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-MediumOblique.eot"); + src: local("GT Walsheim Pro Medium Oblique"), local("GTWalsheimPro-MediumOblique"), + url("font/GTWalsheimPro-MediumOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-MediumOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-MediumOblique.woff") format("woff"), + url("font/GTWalsheimPro-MediumOblique.ttf") format("truetype"); font-weight: 500; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Bold.eot'); - src: local('GT Walsheim Pro Bold'), local('GTWalsheimPro-Bold'), - url('font/GTWalsheimPro-Bold.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Bold.woff2') format('woff2'), - url('font/GTWalsheimPro-Bold.woff') format('woff'), - url('font/GTWalsheimPro-Bold.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Bold.eot"); + src: local("GT Walsheim Pro Bold"), local("GTWalsheimPro-Bold"), + url("font/GTWalsheimPro-Bold.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Bold.woff2") format("woff2"), + url("font/GTWalsheimPro-Bold.woff") format("woff"), + url("font/GTWalsheimPro-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Medium.eot'); - src: local('GT Walsheim Pro Medium'), local('GTWalsheimPro-Medium'), - url('font/GTWalsheimPro-Medium.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Medium.woff2') format('woff2'), - url('font/GTWalsheimPro-Medium.woff') format('woff'), - url('font/GTWalsheimPro-Medium.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Medium.eot"); + src: local("GT Walsheim Pro Medium"), local("GTWalsheimPro-Medium"), + url("font/GTWalsheimPro-Medium.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Medium.woff2") format("woff2"), + url("font/GTWalsheimPro-Medium.woff") format("woff"), + url("font/GTWalsheimPro-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-RegularOblique.eot'); - src: local('GT Walsheim Pro Regular Oblique'), local('GTWalsheimPro-RegularOblique'), - url('font/GTWalsheimPro-RegularOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-RegularOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-RegularOblique.woff') format('woff'), - url('font/GTWalsheimPro-RegularOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-RegularOblique.eot"); + src: local("GT Walsheim Pro Regular Oblique"), local("GTWalsheimPro-RegularOblique"), + url("font/GTWalsheimPro-RegularOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-RegularOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-RegularOblique.woff") format("woff"), + url("font/GTWalsheimPro-RegularOblique.ttf") format("truetype"); font-weight: normal; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-LightOblique.eot'); - src: local('GT Walsheim Pro Light Oblique'), local('GTWalsheimPro-LightOblique'), - url('font/GTWalsheimPro-LightOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-LightOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-LightOblique.woff') format('woff'), - url('font/GTWalsheimPro-LightOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-LightOblique.eot"); + src: local("GT Walsheim Pro Light Oblique"), local("GTWalsheimPro-LightOblique"), + url("font/GTWalsheimPro-LightOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-LightOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-LightOblique.woff") format("woff"), + url("font/GTWalsheimPro-LightOblique.ttf") format("truetype"); font-weight: 300; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Ultra'; - src: url('font/GTWalsheimPro-UltraLight.eot'); - src: local('GT Walsheim Pro Ultra Light'), local('GTWalsheimPro-UltraLight'), - url('font/GTWalsheimPro-UltraLight.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-UltraLight.woff2') format('woff2'), - url('font/GTWalsheimPro-UltraLight.woff') format('woff'), - url('font/GTWalsheimPro-UltraLight.ttf') format('truetype'); + font-family: "GT Walsheim Pro Ultra"; + src: url("font/GTWalsheimPro-UltraLight.eot"); + src: local("GT Walsheim Pro Ultra Light"), local("GTWalsheimPro-UltraLight"), + url("font/GTWalsheimPro-UltraLight.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-UltraLight.woff2") format("woff2"), + url("font/GTWalsheimPro-UltraLight.woff") format("woff"), + url("font/GTWalsheimPro-UltraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Ultra'; - src: url('font/GTWalsheimPro-UltraLightOblique.eot'); - src: local('GT Walsheim Pro Ultra Light Oblique'), local('GTWalsheimPro-UltraLightOblique'), - url('font/GTWalsheimPro-UltraLightOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-UltraLightOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-UltraLightOblique.woff') format('woff'), - url('font/GTWalsheimPro-UltraLightOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Ultra"; + src: url("font/GTWalsheimPro-UltraLightOblique.eot"); + src: local("GT Walsheim Pro Ultra Light Oblique"), local("GTWalsheimPro-UltraLightOblique"), + url("font/GTWalsheimPro-UltraLightOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-UltraLightOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-UltraLightOblique.woff") format("woff"), + url("font/GTWalsheimPro-UltraLightOblique.ttf") format("truetype"); font-weight: 200; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-BlackOblique.eot'); - src: local('GT Walsheim Pro Black Oblique'), local('GTWalsheimPro-BlackOblique'), - url('font/GTWalsheimPro-BlackOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-BlackOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-BlackOblique.woff') format('woff'), - url('font/GTWalsheimPro-BlackOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-BlackOblique.eot"); + src: local("GT Walsheim Pro Black Oblique"), local("GTWalsheimPro-BlackOblique"), + url("font/GTWalsheimPro-BlackOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-BlackOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-BlackOblique.woff") format("woff"), + url("font/GTWalsheimPro-BlackOblique.ttf") format("truetype"); font-weight: 900; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro'; - src: url('font/GTWalsheimPro-Black.eot'); - src: local('GT Walsheim Pro Black'), local('GTWalsheimPro-Black'), - url('font/GTWalsheimPro-Black.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-Black.woff2') format('woff2'), - url('font/GTWalsheimPro-Black.woff') format('woff'), - url('font/GTWalsheimPro-Black.ttf') format('truetype'); + font-family: "GT Walsheim Pro"; + src: url("font/GTWalsheimPro-Black.eot"); + src: local("GT Walsheim Pro Black"), local("GTWalsheimPro-Black"), + url("font/GTWalsheimPro-Black.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-Black.woff2") format("woff2"), + url("font/GTWalsheimPro-Black.woff") format("woff"), + url("font/GTWalsheimPro-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Cond Ultra'; - src: url('font/GTWalsheimPro-CondensedUltraBold.eot'); - src: local('GT Walsheim Pro Condensed Ultra Bold'), local('GTWalsheimPro-CondensedUltraBold'), - url('font/GTWalsheimPro-CondensedUltraBold.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedUltraBold.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedUltraBold.woff') format('woff'), - url('font/GTWalsheimPro-CondensedUltraBold.ttf') format('truetype'); + font-family: "GT Walsheim Pro Cond Ultra"; + src: url("font/GTWalsheimPro-CondensedUltraBold.eot"); + src: local("GT Walsheim Pro Condensed Ultra Bold"), local("GTWalsheimPro-CondensedUltraBold"), + url("font/GTWalsheimPro-CondensedUltraBold.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedUltraBold.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedUltraBold.woff") format("woff"), + url("font/GTWalsheimPro-CondensedUltraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedLight.eot'); - src: local('GT Walsheim Pro Condensed Light'), local('GTWalsheimPro-CondensedLight'), - url('font/GTWalsheimPro-CondensedLight.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedLight.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedLight.woff') format('woff'), - url('font/GTWalsheimPro-CondensedLight.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedLight.eot"); + src: local("GT Walsheim Pro Condensed Light"), local("GTWalsheimPro-CondensedLight"), + url("font/GTWalsheimPro-CondensedLight.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedLight.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedLight.woff") format("woff"), + url("font/GTWalsheimPro-CondensedLight.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedBoldOblique.eot'); - src: local('GT Walsheim Pro Condensed Bold Oblique'), local('GTWalsheimPro-CondensedBoldOblique'), - url('font/GTWalsheimPro-CondensedBoldOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedBoldOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedBoldOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedBoldOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedBoldOblique.eot"); + src: local("GT Walsheim Pro Condensed Bold Oblique"), local("GTWalsheimPro-CondensedBoldOblique"), + url("font/GTWalsheimPro-CondensedBoldOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedBoldOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedBoldOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedBoldOblique.ttf") format("truetype"); font-weight: bold; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedLightOblique.eot'); - src: local('GT Walsheim Pro Condensed Light Oblique'), local('GTWalsheimPro-CondensedLightOblique'), - url('font/GTWalsheimPro-CondensedLightOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedLightOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedLightOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedLightOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedLightOblique.eot"); + src: local("GT Walsheim Pro Condensed Light Oblique"), local("GTWalsheimPro-CondensedLightOblique"), + url("font/GTWalsheimPro-CondensedLightOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedLightOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedLightOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedLightOblique.ttf") format("truetype"); font-weight: 300; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedThin.eot'); - src: local('GT Walsheim Pro Condensed Thin'), local('GTWalsheimPro-CondensedThin'), - url('font/GTWalsheimPro-CondensedThin.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedThin.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedThin.woff') format('woff'), - url('font/GTWalsheimPro-CondensedThin.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedThin.eot"); + src: local("GT Walsheim Pro Condensed Thin"), local("GTWalsheimPro-CondensedThin"), + url("font/GTWalsheimPro-CondensedThin.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedThin.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedThin.woff") format("woff"), + url("font/GTWalsheimPro-CondensedThin.ttf") format("truetype"); font-weight: 100; font-style: normal; } @font-face { - font-family: 'GTWalsheimPro-CondensedULightIt'; - src: url('font/GTWalsheimPro-CondensedUltraLightOblique.eot'); - src: local('GT Walsheim Pro Condensed Ultra Light Oblique'), local('GTWalsheimPro-CondensedUltraLightOblique'), - url('font/GTWalsheimPro-CondensedUltraLightOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedUltraLightOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedUltraLightOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedUltraLightOblique.ttf') format('truetype'); + font-family: "GTWalsheimPro-CondensedULightIt"; + src: url("font/GTWalsheimPro-CondensedUltraLightOblique.eot"); + src: local("GT Walsheim Pro Condensed Ultra Light Oblique"), local("GTWalsheimPro-CondensedUltraLightOblique"), + url("font/GTWalsheimPro-CondensedUltraLightOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedUltraLightOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedUltraLightOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedUltraLightOblique.ttf") format("truetype"); font-weight: 200; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Cond'; - src: url('font/GTWalsheimPro-CondensedMedium.eot'); - src: local('GT Walsheim Pro Condensed Medium'), local('GTWalsheimPro-CondensedMedium'), - url('font/GTWalsheimPro-CondensedMedium.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedMedium.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedMedium.woff') format('woff'), - url('font/GTWalsheimPro-CondensedMedium.ttf') format('truetype'); + font-family: "GT Walsheim Pro Cond"; + src: url("font/GTWalsheimPro-CondensedMedium.eot"); + src: local("GT Walsheim Pro Condensed Medium"), local("GTWalsheimPro-CondensedMedium"), + url("font/GTWalsheimPro-CondensedMedium.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedMedium.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedMedium.woff") format("woff"), + url("font/GTWalsheimPro-CondensedMedium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedBlackOblique.eot'); - src: local('GT Walsheim Pro Condensed Black Oblique'), local('GTWalsheimPro-CondensedBlackOblique'), - url('font/GTWalsheimPro-CondensedBlackOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedBlackOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedBlackOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedBlackOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedBlackOblique.eot"); + src: local("GT Walsheim Pro Condensed Black Oblique"), local("GTWalsheimPro-CondensedBlackOblique"), + url("font/GTWalsheimPro-CondensedBlackOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedBlackOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedBlackOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedBlackOblique.ttf") format("truetype"); font-weight: 900; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedRegular.eot'); - src: local('GT Walsheim Pro Condensed Regular'), local('GTWalsheimPro-CondensedRegular'), - url('font/GTWalsheimPro-CondensedRegular.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedRegular.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedRegular.woff') format('woff'), - url('font/GTWalsheimPro-CondensedRegular.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedRegular.eot"); + src: local("GT Walsheim Pro Condensed Regular"), local("GTWalsheimPro-CondensedRegular"), + url("font/GTWalsheimPro-CondensedRegular.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedRegular.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedRegular.woff") format("woff"), + url("font/GTWalsheimPro-CondensedRegular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedThinOblique.eot'); - src: local('GT Walsheim Pro Condensed Thin Oblique'), local('GTWalsheimPro-CondensedThinOblique'), - url('font/GTWalsheimPro-CondensedThinOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedThinOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedThinOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedThinOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedThinOblique.eot"); + src: local("GT Walsheim Pro Condensed Thin Oblique"), local("GTWalsheimPro-CondensedThinOblique"), + url("font/GTWalsheimPro-CondensedThinOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedThinOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedThinOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedThinOblique.ttf") format("truetype"); font-weight: 100; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedBold.eot'); - src: local('GT Walsheim Pro Condensed Bold'), local('GTWalsheimPro-CondensedBold'), - url('font/GTWalsheimPro-CondensedBold.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedBold.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedBold.woff') format('woff'), - url('font/GTWalsheimPro-CondensedBold.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedBold.eot"); + src: local("GT Walsheim Pro Condensed Bold"), local("GTWalsheimPro-CondensedBold"), + url("font/GTWalsheimPro-CondensedBold.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedBold.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedBold.woff") format("woff"), + url("font/GTWalsheimPro-CondensedBold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedRegularOblique.eot'); - src: local('GT Walsheim Pro Condensed Regular Oblique'), local('GTWalsheimPro-CondensedRegularOblique'), - url('font/GTWalsheimPro-CondensedRegularOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedRegularOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedRegularOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedRegularOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedRegularOblique.eot"); + src: local("GT Walsheim Pro Condensed Regular Oblique"), local("GTWalsheimPro-CondensedRegularOblique"), + url("font/GTWalsheimPro-CondensedRegularOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedRegularOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedRegularOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedRegularOblique.ttf") format("truetype"); font-weight: normal; font-style: italic; } @font-face { - font-family: 'GTWalsheimPro-CondensedULight'; - src: url('font/GTWalsheimPro-CondensedUltraLight.eot'); - src: local('GT Walsheim Pro Condensed Ultra Light'), local('GTWalsheimPro-CondensedUltraLight'), - url('font/GTWalsheimPro-CondensedUltraLight.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedUltraLight.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedUltraLight.woff') format('woff'), - url('font/GTWalsheimPro-CondensedUltraLight.ttf') format('truetype'); + font-family: "GTWalsheimPro-CondensedULight"; + src: url("font/GTWalsheimPro-CondensedUltraLight.eot"); + src: local("GT Walsheim Pro Condensed Ultra Light"), local("GTWalsheimPro-CondensedUltraLight"), + url("font/GTWalsheimPro-CondensedUltraLight.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedUltraLight.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedUltraLight.woff") format("woff"), + url("font/GTWalsheimPro-CondensedUltraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; } @font-face { - font-family: 'GT Walsheim Pro Cond Ultra'; - src: url('font/GTWalsheimPro-CondensedUltraBoldOblique.eot'); - src: local('GT Walsheim Pro Condensed Ultra Bold Oblique'), local('GTWalsheimPro-CondensedUltraBoldOblique'), - url('font/GTWalsheimPro-CondensedUltraBoldOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedUltraBoldOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedUltraBoldOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedUltraBoldOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Cond Ultra"; + src: url("font/GTWalsheimPro-CondensedUltraBoldOblique.eot"); + src: local("GT Walsheim Pro Condensed Ultra Bold Oblique"), local("GTWalsheimPro-CondensedUltraBoldOblique"), + url("font/GTWalsheimPro-CondensedUltraBoldOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedUltraBoldOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedUltraBoldOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedUltraBoldOblique.ttf") format("truetype"); font-weight: 800; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Cond'; - src: url('font/GTWalsheimPro-CondensedMediumOblique.eot'); - src: local('GT Walsheim Pro Condensed Medium Oblique'), local('GTWalsheimPro-CondensedMediumOblique'), - url('font/GTWalsheimPro-CondensedMediumOblique.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedMediumOblique.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedMediumOblique.woff') format('woff'), - url('font/GTWalsheimPro-CondensedMediumOblique.ttf') format('truetype'); + font-family: "GT Walsheim Pro Cond"; + src: url("font/GTWalsheimPro-CondensedMediumOblique.eot"); + src: local("GT Walsheim Pro Condensed Medium Oblique"), local("GTWalsheimPro-CondensedMediumOblique"), + url("font/GTWalsheimPro-CondensedMediumOblique.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedMediumOblique.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedMediumOblique.woff") format("woff"), + url("font/GTWalsheimPro-CondensedMediumOblique.ttf") format("truetype"); font-weight: 500; font-style: italic; } @font-face { - font-family: 'GT Walsheim Pro Condensed'; - src: url('font/GTWalsheimPro-CondensedBlack.eot'); - src: local('GT Walsheim Pro Condensed Black'), local('GTWalsheimPro-CondensedBlack'), - url('font/GTWalsheimPro-CondensedBlack.eot?#iefix') format('embedded-opentype'), - url('font/GTWalsheimPro-CondensedBlack.woff2') format('woff2'), - url('font/GTWalsheimPro-CondensedBlack.woff') format('woff'), - url('font/GTWalsheimPro-CondensedBlack.ttf') format('truetype'); + font-family: "GT Walsheim Pro Condensed"; + src: url("font/GTWalsheimPro-CondensedBlack.eot"); + src: local("GT Walsheim Pro Condensed Black"), local("GTWalsheimPro-CondensedBlack"), + url("font/GTWalsheimPro-CondensedBlack.eot?#iefix") format("embedded-opentype"), + url("font/GTWalsheimPro-CondensedBlack.woff2") format("woff2"), + url("font/GTWalsheimPro-CondensedBlack.woff") format("woff"), + url("font/GTWalsheimPro-CondensedBlack.ttf") format("truetype"); font-weight: 900; font-style: normal; } @@ -2808,36 +2808,6 @@ fieldset[disabled] .button { top: 160px; } } -@media screen and (max-width: 768px) { - - .nav-main p{ - padding-left: 10vw; - } - #unlock, - #unlock_white img{ - height: 10rem; - } - .button.is-responsive.is-small { - font-size: 0.5625rem; - } - - .button.is-responsive, - .button.is-responsive.is-normal { - font-size: 0.65625rem; - } - - .button.is-responsive.is-medium { - font-size: 0.75rem; - } - - .button.is-responsive.is-large { - font-size: 1rem; - } - - #content_all h2, #welcome h2{ - font-size: 4em; - } -} @media screen and (min-width: 769px) and (max-width: 1023px) { .button.is-responsive.is-small { font-size: 0.65625rem; @@ -12140,19 +12110,6 @@ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current), .section { padding: 3rem 1.5rem; } -@media screen and (min-width: 1024px) { - .section { - padding: 3rem 3rem; - } - - .section.is-medium { - padding: 9rem 4.5rem; - } - - .section.is-large { - padding: 18rem 6rem; - } -} .footer { background-color: #fafafa; padding: 3rem 1.5rem 6rem; @@ -12202,7 +12159,7 @@ main nav { z-index: 30; } #hand { - background: url('/img/hand 1.png') center; + background: url("/img/hand 1.png") center; background-size: cover; height: 86vh; left: 1px; @@ -12218,7 +12175,7 @@ main nav { z-index: 2; } #cover { - background: url('/img/BG 1.png') center no-repeat; + background: url("/img/BG 1.png") center no-repeat; background-size: cover; } #cover .title-container { @@ -12233,7 +12190,7 @@ main nav { #cover h2 { color: #fffdfc; - font-family: 'GT Walsheim Pro'; + font-family: "GT Walsheim Pro"; font-style: normal; font-weight: 500; font-size: 40px; @@ -12282,7 +12239,7 @@ main nav { top: -95vh; } #main_title { - background: url('/img/sesame.png') no-repeat; + background: url("/img/sesame.png") no-repeat; background-size: contain; box-sizing: border-box; @@ -12321,7 +12278,7 @@ main nav { color: #1e33da; } #welcome .phone-container { - background: url('/img/section2_phone.png'); + background: url("/img/section2_phone.png"); background-size: cover; } /************ phones ************/ @@ -12407,7 +12364,7 @@ main nav { width: 120%; } #content_all_img { - background: url('/img/bg_content.png'); + background: url("/img/bg_content.png"); background-size: cover; /*width: 100vw;*/ height: 150vh; @@ -12600,7 +12557,7 @@ main nav { } /******** phone base *********/ #popover { - background: url('/img/bg_pink.png') no-repeat; + background: url("/img/bg_pink.png") no-repeat; background-position: center; background-size: cover; } @@ -12634,14 +12591,14 @@ main nav { width: 411px; } .phone-container .top { - background: url('/img/phone_rectangle_top.jpg') no-repeat center; + background: url("/img/phone_rectangle_top.jpg") no-repeat center; border-top-left-radius: 1rem; border-top-right-radius: 1rem; height: 60px; } .phone-container .bottom { - background: url('/img/phone_rectangle_bottom.jpg') no-repeat center; + background: url("/img/phone_rectangle_bottom.jpg") no-repeat center; border-bottom-left-radius: 2rem; border-bottom-right-radius: 2rem; height: 62px; @@ -12655,7 +12612,7 @@ main nav { width: 350px; } .slider-screen .phone-container { - background: url('/img/phone_cream.png') no-repeat; + background: url("/img/phone_cream.png") no-repeat; background-position: center; background-size: cover; height: 776px; @@ -12707,7 +12664,7 @@ main nav { cursor: pointer; } #portfolio { - background: url('/img/bg_grey.jpg') no-repeat; + background: url("/img/bg_grey.jpg") no-repeat; background-position: center; background-size: cover; color: white; @@ -12719,7 +12676,7 @@ main nav { margin-bottom: 20px; } #portfolio .phone-container { - background: url('/img/phone_shoes.png'); + background: url("/img/phone_shoes.png"); height: 776px; } #coming_soon { @@ -12728,7 +12685,7 @@ main nav { color: white; text-shadow: 0 0 1em black; height: 50vh; - margin-top: 0; + margin-top: 5vh; padding-top: 50vh; } @media screen and (max-width: 1023px) { @@ -13868,3 +13825,168 @@ main .credits { margin-left: 80px; border-radius: 80px; } + + +/** +smaller screen + */ +@media screen and (min-width: 1024px) { + .section { + padding: 3rem 3rem; + } + + .section.is-medium { + padding: 9rem 4.5rem; + } + + .section.is-large { + padding: 18rem 6rem; + } +} + +@media screen and (max-width: 500px) { + + .burger-menu span{ + display: none; + } + #content_first{ + font-size: 2rem; + } + #for_all_your{ + font-size: 2rem; + } + #content_all .columns{ + max-width: 100vw; + } + .flip-container + .flip-container { + margin-top: 37vh; + } + #transactionnal_webdesign .title { + font-size: 2rem; + } + #transactionnal_webdesign .description { + font-size: 5rem !important; + padding-top: 4rem; + } + #transactionnal_webdesign .sub-title { + font-weight: 600; + font-size: 5rem; + } + #transactionnal_webdesign { + min-height: 160vh; + } + section#carry .description { + margin-top: 3vh; + font-size: 5rem; + } + section#carry .computer-block { + margin-top: 32vh; + } + #carry .bubbles p:nth-of-type(1) { + left: -7%; + top: -93rem; + } + #carry .bubbles p:nth-of-type(2) { + + left: 36%; + top: -112rem; + } + #carry .bubbles p:nth-of-type(3) { + left: -10vw; + } + #kyc .description2{ + font-size: 3rem; + padding: 0 1rem; + } + #kyc .title { + font-size: 5rem; + line-height: 1em; + } + #kyc .bubbles .bubble span + { + margin-left: 0; + } + #kyc .bubbles .bubble:nth-of-type(2) { + margin-left: -2rem; + } + #kyc .bubbles { + margin-top: -244vw; + } + #china{ + height: 200vh; + } + + #china .top { + font-size: 3rem; + margin-bottom: 1rem; + } + #we_develop .title { + font-size: 3rem; + } + #we_develop .circle.circle-left { + left: 1vw; + } + #we_develop .circle.circle-right { + right: 1vw; + } + #we_develop .long_term { + margin-right: 5rem; + margin-top: -37rem; + } + #we_develop .quick { + left: 4rem; + top: 97rem; + } + #full_creative .title { + padding: 1rem; + font-size: 5rem; + } + #our_team { + margin-top: 50rem; + padding-bottom: 20rem; + } + #our_team .title{ + font-size: 10rem; + line-height: 7rem; + } + #our_team .sub-category { + margin-bottom: 10rem; + padding-left: 0rem; + } + #china_achievements{ + padding: 1rem; + } + #baozun_group { + margin-top: 1126vw; + } + #baozun_group .title { + padding-top: 25vh; + } +} +@media screen and (max-width: 768px) { + + #unlock, + #unlock_white img{ + height: 10rem; + } + .button.is-responsive.is-small { + font-size: 0.5625rem; + } + + .button.is-responsive, + .button.is-responsive.is-normal { + font-size: 0.65625rem; + } + + .button.is-responsive.is-medium { + font-size: 0.75rem; + } + + .button.is-responsive.is-large { + font-size: 1rem; + } + + #content_all h2, #welcome h2{ + font-size: 4em; + } +} diff --git a/js/animations_custom.js b/js/animations_custom.js index f8285ff..e9d62ab 100644 --- a/js/animations_custom.js +++ b/js/animations_custom.js @@ -115,7 +115,7 @@ if (enable_animations) { { top: 500, duration: 1, - opacity: 0.5, + opacity: 0.02, scrollTrigger: { trigger: '#cover', scrub: 1,