workadventure/website/src/sass/styles.scss

471 lines
11 KiB
SCSS

@import "custom";
@import "~bootstrap/scss/bootstrap";
@import "_choose-map";
@font-face {
font-family: OpenSans;
src: url('../fonts/OpenSans-Regular.ttf');
}
@font-face {
font-family: '04b03';
font-style: normal;
font-weight: normal;
src: local('04b03'), url('../fonts/04B_03.woff') format('woff');
}
@font-face {
font-family: 'Karmatic Arcade';
src: url('../fonts/ka1.ttf') format('truetype');
}
@font-face {
font-family: 'VCR OSD Mono';
src: url('../fonts/VCR_OSD.ttf') format('truetype');
}
header {
background: #28A7FC url("../images/sky.jpg") no-repeat bottom;
background-size: 100%;
height: 37rem;
position: relative;
.section{
position: relative;
}
.over-image {
bottom: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 33rem;
width: calc(100% - 15px);
.logo{
margin: 1rem 0;
@include media-breakpoint-down(sm) {
padding-left: 1rem;
}
}
.social-links {
text-align: right;
padding-top: 2.25rem;
a {
margin-left: 1.25rem;
}
}
@include media-breakpoint-down(sm) {
.social-links {
padding-top: 0.5rem;
padding-right: 0.5rem;
.share-title {
display: none;
}
a {
display: block;
margin-left: 0rem;
margin-top: 1rem;
}
}
}
.title {
z-index: 3;
position: relative;
padding: 5rem 0;
color: black;
h1 {
font-family: 'Karmatic Arcade';
font-size: 2.75rem;
margin-bottom: 1.25rem;
}
h3 {
min-height: 200px;
padding: 1rem;
}
@include media-breakpoint-down(xs) {
h3 {
font-size: 1rem;
}
}
}
}
.clouds {
content: "";
position: absolute;
bottom: 0;
right: 0;
height: 162px;
overflow: hidden;
width: 100%;
z-index: 1;
&.clouds-2 {
bottom: 25px;
.cloud {
transform: translateX(50px);
-webkit-animation-duration: 80s;
opacity: .6;
}
}
.cloud {
background: url('../images/cloud.png') repeat-x;
height: 162px;
width: 4000px;
-webkit-animation-name: prop-600;
-webkit-animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction:alternate;
}
}
}
@-webkit-keyframes prop-600 {
0% {
-webkit-transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-400px);
}
}
.custom-link{
cursor: pointer;
font-family: "VCR OSD Mono";
font-size: 1.125rem;
letter-spacing: 5px;
color: white;
display: block;
margin: 0 auto;
width: 250px;
height: 64px;
background-image: url('../images/btn-bg.png');
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 7px;
padding: 1.125rem;
text-align: center;
z-index: 2;
transition: all .1s cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
//transition-timing-function: cubic-bezier(0.000, -0.600, 1.000, 1.650); /* custom */
@include media-breakpoint-down(sm) {
display: none;
}
&:hover {
color: white;
transform: translateY(-6px);
text-decoration: none;
}
&.contribute {
background-image: url('../images/btn-bg-2.png');
}
&.play {
background-image: url('../images/btn-bg-3.png');
}
&.start {
/*padding-left: 55px;*/
&:before {
/*content: "";
position: absolute;
background: url('../images/playicon.png') no-repeat;
height: 20px;
width: 21px;
left: 36px;
top: 23px;*/
}
}
&.light{
background-image: url('../images/btn-bg-light.png');
}
/*&::after{
content: "";
position: absolute;
background-size: 60%;
width: 100%;
height: 100%;
}*/
}
img{
max-width: 100%;
}
.bg-white{
color: #000000;
}
.bg-gray{
background-color: #3b3b3b !important;
}
.credits {
text-align: center;
h2{
padding: 1rem 0;
margin: 0;
min-height: 6rem;
font-family: 'Karmatic Arcade';
font-size: 34px;
margin-bottom: 20px;
}
p {
}
}
.story-wrapper {
background: white;
position: relative;
min-height: calc(672px + 75px);
padding-top: 75px;
width: 100%;
overflow: hidden;
@include media-breakpoint-down(sm) {
display: none;
}
img {
max-width: none;
}
.sky {
z-index: 1;
position: absolute;
top: 0;
width: 100%;
height: 242px;
background: url(../images/story/sky.jpg) repeat-x top left;
}
.mountains {
z-index: 5;
position: absolute;
bottom: 200px;
width: calc(100% + 200px);
height: 242px;
background: url(../images/story/mountains.png) repeat-x top center;
}
.story-1 {
position: absolute;
z-index: 10;
left: 0;
overflow: hidden;
}
.character {
position: absolute;
z-index: 15;
bottom: 75px;
left: 0;
right: 0;
margin: auto;
}
.birds {
position: absolute;
z-index: 20;
right: -200px;
$birds: 8;
@for $i from 1 through $birds {
@keyframes fly-#{$i} {
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
50% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
75% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
100% {
transform: translate(#{25+random(50)}px, #{10+random(35)}px);
}
}
.bird-#{$i} {
margin: 0 #{random(7)}vw;
transition-timing-function: cubic-bezier(0.150, -0.600, 0.155, 1.650);
animation-duration: 15s;
animation-name: fly-#{$i};
animation-iteration-count: infinite;
animation-direction: alternate;
}
}
}
.bubble {
color: black;
position: absolute;
z-index: 25;
bottom: 160px;
left: 263px;
right: -50px;
margin: auto;
opacity: 0;
height: 151px;
width: 289px;
line-height: 22px;
padding: 5px;
background: black;
transform: translateY(25px);
& > div {
padding: 15px 15px 30px;
position: relative;
width: 100%;
height: 100%;
background: white;
&:before {
content: "";
position: absolute;
background: url(../images/story/bubble-border-bottom-left.png) no-repeat bottom left;
left: -4px;
width: 28px;
height: 25px;
bottom: -20px;
}
p {
&.bubble-legend {
font-size: 12px;
color: grey;
margin: 0;
}
&.bubble-action {
cursor: pointer;
text-decoration: underline
}
}
}
&.b-revert {
left: -363px;
& > div:before {
left: auto;
right: -4px;
background: url(../images/story/bubble-border-bottom-right.png) no-repeat bottom left;
}
}
}
}
.pin-spacer {
background: white;
}
.section{
padding-top: 2rem;
padding-bottom: 5rem;
&.used-by{
img{
padding: 0 1rem;
}
}
&.how-to{
padding: 6.25rem 0;
background: url('../images/bg-briques.jpg') repeat-x bottom;
.desktop-only {
padding: 0 1.25rem 4rem;
}
.image-item{
height: 100%;
margin: 0 auto;
padding: 1.25rem;
/*transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
&:hover {
transform: scale(1.1);
.step-image {
&:after {
bottom: -10px;
left: 10px;
}
}
}
.step-image {
position: relative;
&:after {
transition: all .25s cubic-bezier(0.000, -0.600, 1.000, 1.650);
content:"";
height: 100%;
width: 100%;
background: #dcdcdc;
position: absolute;
bottom: -25px;
left: 25px;
background: url('../images/bg-step.png') no-repeat bottom right;
}
img {
width: 100%;
z-index: 2;
position: relative;
}
}*/
h2{
padding: 1rem 0;
margin: 0;
min-height: 6rem;
font-family: 'Karmatic Arcade';
font-size: 22px;
margin-bottom: 1.25rem;
}
}
}
@include media-breakpoint-down(sm) {
&.how-to{
padding: 2rem 0;
}
}
&.used-by{
img{
}
}
&.quotes{
h2{
font-family: 'Karmatic Arcade';
font-size: 1.75rem;
margin: 2.5rem 0;
}
.quote-item{
padding: 1rem 0;
text-align: center;
.quote{
font-size: 1.5rem;
margin-bottom: 0.5rem;
letter-spacing: 2px;
}
.author{
font-size: 1rem;
letter-spacing: 0px;
}
}
}
}
.footer {
padding: 2rem;
.floppy {
text-align: right;
img {
float: right;
margin-left: 1.25rem;
}
div {
float: right;
margin-left: 1rem;
font-size: 1rem;
line-height: 1rem;
padding-top: 0.625rem;
span {
color: grey;
font-size: 0.8125rem;
}
}
}
@include media-breakpoint-down(xs) {
.floppy {
text-align: center;
img, div {
float: none;
}
}
}
}
.pixel-title{
font-family: "Karmatic Arcade" !important;
}
h3 {
font-weight: 800;
}