@charset "utf-8"; /* Compass */ @import "compass/compass"; /* Custom mixins */ @import "modules/mixins"; /* Base */ @import "variables"; *, *::after, *::before { box-sizing: border-box; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } body { font-family: 'Montserrat'; overflow-x: hidden; background: url('/lib/music-landing/img/logo.png'), url('/lib/music-landing/img/guitar-background.jpg'); background-repeat: no-repeat; background-size: 440px auto, cover; background-attachment: scroll; color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { padding: 0; margin: 0; } footer { position: fixed; bottom: 0; width: 100%; left: 0; text-align: center; padding: .5em; background: #173759; box-shadow: 0 -1px 10px rgba(0,0,0,0.7); z-index: 99; height: auto; } footer svg { height: 30px; } @media (min-width: 1420px) { body { -webkit-background-size: 25% auto, cover; background-size: 25% auto, cover; } footer svg { height: 60px; } } a { text-decoration: none; color: #fff; outline: none; } a:hover, a:focus { color: #fff; } /* Icons */ .icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor; } .icon--hidden { display: none; } /* scroll control */ html.js, .js body { overflow: hidden; height: 100%; } /* Views */ .view--player { display: none; } .js { .view { pointer-events: none; } .view--grid { overflow: hidden; overflow-y: scroll; position: relative; height: 100vh; padding-bottom: 200px; opacity: 0; -webkit-overflow-scrolling: touch; } .view--single, .view--player { position: fixed; top: 50%; left: 50%; width: 80vmin; height: 80vmin; padding-bottom: 60px; margin: -65vmin 0 0 -40vmin; @media screen and (min-width: 514px) { width: 60vmin; height: 60vmin; margin: -40vmin 0 0 -30vmin; } } .view--player { display: block; } .view--current { pointer-events: auto; opacity: 1; } } /* Header */ .page-header { position: relative; margin: 0 auto; padding: 1vmin 4em; pointer-events: none; border: none; a { pointer-events: auto; } } .page-header__title { font-family: 'Montserrat', sans-serif; font-size: 7vmin; line-height: 1.25; margin: 0; padding: 0 0 0 1.65em; background: url(/lib/music-landing/img/vinyls.svg) no-repeat 0 50%; background-size: auto 100%; } .page-header__subtitle { display: block; max-width: calc(50vw - 5em); margin: 1em 0 0 5px; color: #fff; } @media screen and (max-width: 55em) { .page-header { padding: 2em; } .page-header__title { font-size: 8vmin; } .page-header__subtitle { max-width: none; } } /* grid */ .grid { position: relative; min-height: 100vh; margin: 0 auto; padding: 0; list-style: none; display: -webkit-flex; display: -ms-flex; display: flex; } .js .grid::after { content: ''; position: absolute; top: 150px; left: 50%; width: 80px; height: 80px; margin: 0 0 0 -40px; border: 10px solid rgba(255, 255, 255, 0.8); border-bottom-color: #474283; border-radius: 50%; -webkit-animation: spinLoader 1s linear infinite forwards; animation: spinLoader 1s linear infinite forwards; } .js .grid--loaded::after { display: none; } @-webkit-keyframes spinLoader { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinLoader { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .page-header, .grid { max-width: 1200px; } .grid__item { position: relative; width: 50%; min-width: 280px; margin: 0 0 2em; padding: 1em 4em 0; } .js .grid__item { position: absolute; opacity: 0; transition: opacity 0.3s; } .js .grid--loaded .grid__item { opacity: 1; } .no-js .grid__item { display: inline-block; width: calc(33.33% - 0.4em); margin: 2em 0; } @media screen and (min-width: 52.5em) { .grid__item { width: 33.33%; margin: 0 0 9em; } .js .grid__item:first-child { margin-top: 5em; } .js .grid__item:nth-child(2) { margin-top: 14em; } } @media screen and (max-width: 36em) { .grid__item { width: 100%; margin: 2em 0; padding: 1em 2em 0; } } /* grid decoration */ .grid__item--deco::before { font-family: 'Montserrat', sans-serif; font-size: 15em; position: absolute; z-index: -1; top: -1em; left: -0.15em; opacity: 0.1; } /* grid link */ .grid__link { position: relative; display: block; color: #fff; perspective: 1200px; } .grid__link:hover { color: #fff; outline: none; } /* image wrap and deco lp */ .img-wrap { position: relative; } .lp { position: absolute; } .lp--grid { left: 0; width: 100%; height: 100%; transform: translate3d(5%, 0, 0); transition: transform 0.3s; } .grid__item:hover .lp--grid { transform: translate3d(10%, 0, 0); } .grid__link:hover .lp { transform: translate3d(20%, 0, 0); } .img { display: block; } .img--grid { position: relative; max-width: 100%; box-shadow: 2px 16px 26px 0px rgba(36, 33, 69, 0.3); transform: translate3d(0,0,0); } .artist { font-size: 1.3em; margin: -1.5em 0 0.5em -1em; position: relative; text-transform: uppercase; text-shadow: 1px 1px 3px #000; z-index: 2; } .title { font-size: 1em; font-weight: bold; text-align: center; margin: 1em 0; font-weight: 300; } .title--single, .title--player { @media screen and (min-width: 514px) { position: relative; text-align: left; left: -5vmin; } } .year { font-size: 0.85em; position: absolute; z-index: 10; right: 0; margin: -1em -1em 0 0; padding: 0.3em 0.5em; color: #fff; border: 2px solid; transform: translate3d(0,0,0); } .year--contrast { color: inherit; } /* Decorative expander for the grid to single transition */ .deco-expander { position: fixed; top: 50%; left: 50%; width: calc(100vmax * 1.4142); height: calc(100vmax * 1.4142); margin: calc(-100vmax * 1.4142 / 2) 0 0 calc(-100vmax * 1.4142 / 2); pointer-events: none; opacity: 0; border-radius: 50%; transform: scale(0.001); } /* Single LP view */ .single { position: relative; min-height: 100vh; } .no-js .single { text-align: center; } .js .single, .lp--single { width: 100%; height: 100%; } .no-js .lp--single { display: none; } .js .single { position: absolute; min-height: 0; pointer-events: none; opacity: 0; } .js .single--current { pointer-events: auto; opacity: 1; } .js .img-wrap--single { position: absolute; width: 100%; height: 100%; } .js .img-wrap--single::after { content: ''; position: absolute; top: 0; width: 100%; height: 100%; background: radial-gradient(50% 50%, transparent, rgba(0, 0, 0, 0.4)); } .img--single { max-width: 100%; height: 100%; box-shadow: 0px 20px 20px -10px rgba(0, 0, 0, 0.3); } .no-js .img--single { height: 50vmin; margin: 10vmin auto 3em; } .number, .artist--single, .title--single { color: #fff; } .number, .artist--single { font-family: 'Montserrat', sans-serif; } .number { font-size: 13vmin; top: -5vmin; left: -6vmin; white-space: nowrap; } .number__total { font-size: 7vmin; vertical-align: top; } .number__total::before { content: ' / '; vertical-align: top; } .artist--single, .artist--player { line-height: 1.3; bottom: 0; left: -5vmin; margin: 0 0 0.25em 0; letter-spacing: .1rem; } .title--single { font-size: 1em; font-weight: $font-normal-weight; margin: 0.75em 0 0; } .year--single { font-size: 3vmin; margin: 0; color: #fff; border-width: 0.5vmin; } .js .year--single { top: -1em; right: -5vmin; } .no-js .year--single { position: relative; right: auto; display: inline-block; margin: 1em auto; } .controls { width: 100%; height: 100%; } .control-button { padding: 0; border: 0; background: none; } .control-button--next, .control-button--prev { font-size: 3.5vmin; color: #fff; background-color: rgba($fucsiaLight, .4); border-radius: 50%; padding: .35em; position: absolute; top: 75%; &:hover { background-color: $fucsiaLight; color: #fff; } @media screen and (min-width: 55em) { top: 60%; } } // @import "modules/modalReact"; // ReactModals moved // @import "modules/formReact"; // ReactForms moved // @import "modules/buttonReact"; // ReactButtons moved .modal { color: $darkGrey; font-size: $font-size-base-mobile-vw; @media (min-width: $tablet - 1) { font-size: $font-size-base-tablet; } &:focus { outline: none; } .modal-content { padding: 5.948vw 0 6.441vw; @media (min-width: $tablet + 1) { padding: 2.666em 0 2.889em; } } .modal-header { border: none; margin-bottom: 1em; margin-left: -6%; margin-right: -6%; h4 { color: $blue; font-size: $font-size-titulos-mobile-vw; font-weight: 700; @media (min-width: $tablet - 1) { font-size: $font-size-titulos-tablet; } } } .modal-body, .modal-header { padding: 0 12.560%; padding-left: 12.560%; padding-right: 12.560%; } .form-group { margin-bottom: 1.33333333em; &.col-xs-3 + .col-xs-1.offset-0 { line-height: 1.3333333; padding: 0.611111em 1em; } } .form-control { background-color: $lighterGrey; // Formerly $lightgrey; border-radius: 0; box-shadow: none; color: $blue; // Formerly $middleGrey; font-size: 1em; height: auto; line-height: 1.3333333; padding: 0.611111em 1em; margin: 0; // padding: 0.8em 1em 0.8em 3em; @include placeholder { color: $grey; // Formerly $middleGrey; } &:focus { border: 1px solid $lightGrey; // Formerly $gray-border; box-shadow: none; background-color: $lightGrey; // Formerly $gray-border; color: $darkBlue; // Formerly $darkerGrey; @include placeholder { color: $darkBlue!important; // Formerly $darkerGrey; } } & + .input-group-addon { background-color: #ccc; border: 0; border-radius: 0; font-size: 1em; } } label { color: $darkGrey; font-weight: $font-normal-weight; } .album-payment-errors, label { font-size: $font-size-secundarios-mobile-vw; @media (min-width: $tablet - 1) { font-size: $font-size-secundarios-tablet; } } button.btn-orange { border-radius: 0; cursor: pointer; display: inline-block; font-size: 5.072vw; font-weight: 700; letter-spacing: .5px; margin: 0; margin-left: -8%; margin-right: -8%; padding: .3em .9em; text-align: center; text-transform: uppercase; vertical-align: middle; width: 116%; @media(min-width: $tablet - 1) { font-size: $font-size-titulos-tablet; } &:not([disabled]):hover, &:not([disabled]):focus { background-color: $turquoise; box-shadow: none; color: $white; } } } .control-button--next { right: -9vmin; } .control-button--prev { left: -9vmin; } .no-js .control-button { display: none; } .control-button:focus { outline: none; } .control-button--play { font-size: 5vmin; position: absolute; margin: 0 0 0 -42px; top: 55vmin; left: 50%; width: 84px; height: 84px; padding: 0; color: #fff; @media screen and (min-width: 55em) { top: 55%; } } .control-button--play:hover, .control-button--play:focus { color: #fff; } .control-button--play .icon { position: absolute; } .control-button--play .icon--play { transform: scale(0.5); width: 100%; height: 100%; top: 0; left: 0; transition: opacity 0.3s; } .control-button--active .icon--play { opacity: 0; } .icon--progress { top: -5.5%; width: 111%; height: 111%; margin: 0; left: -4.5%; } .icon--progress path { fill: none; stroke: darken($fucsiaLight, 10%); stroke-width: 8px; } .icon--progress circle { fill: rgba($fucsiaLight ,0.5); -webkit-transition: fill 0.3s; transition: fill 0.3s; } .control-button--play:hover .icon--progress circle, .control-button--play:focus .icon--progress circle { fill: $fucsiaLight; } .control-button--back { font-size: 1.5vmin; position: absolute; top: 0; right: -5vmin; color: #fff; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } /* Initial hidden state of single view elements */ .lp--single, .js .img-wrap--single, .js .number, .js .year--single, .js .artist--single, .js .title--single, .control-button--back, .controls .control-button { opacity: 0; } .control-button--back, .controls .control-button--next, .controls .control-button--prev { transition: opacity 0.3s; } .view--current .control-button--back, .view--current .controls .control-button--next, .view--current .controls .control-button--prev { opacity: 1; } /* Player */ .view--player { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .view--player.view--current .control-button--back { transition-delay: 0.5s; } .player-stand { width: 100%; text-align: center; padding: 0 1em; pointer-events: none; } .song { font-size: 1em; text-align: center; margin: 5px 0; } .player-info { z-index: 100; max-width: 40vw; padding: 0 0 1em; margin: 0 auto; pointer-events: none; a { pointer-events: auto; } } .year--player, .artist--player, .title--player { color: #fff; } .artist--player { font-family: 'Montserrat', sans-serif; } .title--player { font-size: 1em; font-weight: $font-normal-weight; margin: 0.75em 0 1em; } .year--player { font-size: 2vmin; position: relative; display: inline-block; margin: 1em 0; border-width: 0.25vmin; } .player { position: relative; width: 100%; height: 100%; pointer-events: none; } .player__element { position: absolute; width: 100%; height: 100%; margin: 0; } .player__element--tonearm { margin: -13vmin 0 0 37vmin; @media screen and (min-width: 514px) { margin: -13vmin 0 0 30vmin; } } .player__element svg, .player__element-inner { width: 100%; height: 100%; } .player__element--lp { opacity: 0; transform: perspective(2000px); transition: transform 0s 1s; } .view--current .player__element--lp { -webkit-transition: -webkit-transform 1s; transition: transform 1s; } .player__element--lp-flip { transform: perspective(2000px) rotate3d(1,1,0,180deg); } .player__element--lp svg { animation: spinAroundA 10s linear infinite forwards; animation-play-state: paused; } @-webkit-keyframes spinAroundA { to { transform: rotate(360deg); } } @keyframes spinAroundA { to { transform: rotate(360deg); } } .player__element--lp-spin:not(.player__element--lp-flip) .player__svg-lp { animation-play-state: running; } .player__element--lp .player__element-inner { animation: spinAroundB 10s linear infinite forwards; animation-play-state: paused; } .player__element--lp-spin.player__element--lp-flip .player__element-inner { animation-play-state: running; } @-webkit-keyframes spinAroundB { to { transform: rotate(-360deg); } } @keyframes spinAroundB { to { transform: rotate(-360deg); } } .lp-side-label { transition: visibility 0s 0.35s; } .player__element--lp-flip .lp-side-label--a, .lp-side-label--b { visibility: hidden; } .player__element--lp-flip .lp-side-label--b { visibility: visible; } /* The label is 32.4358% of the total width of the vinyl disc; this means that we can push the tonearm a maximum of half of that (16%); we use margins because transforms will be applied dynamically */ .view--current .player__element--tonearm svg * { pointer-events: auto; } .grabbable { cursor: move; cursor: grab; cursor: -webkit-grab; } .grabbable:active { cursor: grabbing; cursor: -webkit-grabbing; } .player__controls { text-align: center; width: 100%; } .view--current .player__controls { pointer-events: auto; } .player-button { position: relative; margin: 0 0.25em; padding: 1em; color: #fff; border: 0; border-radius: 50%; background: #474283; } .player-button:hover { color: #474283; background: rgba(255, 255, 255, 0.9); } .player-button:focus { outline: none; } .player-button--prev, .player-button--next { background: none; } .icon--touchthrough { pointer-events: none; } /* Initially hidden elements of the player */ .player-info, .player__element--tonearm, .player-stand, .effects { opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .view--current .player-info, .view--current .player-stand, .view--current .player__element--tonearm, .view--current .effects { opacity: 1; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } /* Media queries */ @media screen and (max-aspect-ratio: 100/75) { .player-stand { transform: none; background: none; } .control-button--back { // font-size: 5vmin; } .player-info { max-width: none; width: 100%; padding: 0 0 1em; } } .artist--single, .artist--player { font-size: 1.4em; font-weight: 700; text-shadow: none; text-transform: none; a { color: $fucsiaLight; margin-left: 1em; } } .title--single { font-size: 1em; margin-bottom: 1em; text-shadow: none; } .text-center { text-align: center; } .js_getAlbum { background: $fucsiaLight; text-transform: uppercase; padding: .25em .5em; border-radius: 5px; display: inline-block; margin: 0 auto 1em; @media screen and (min-width: 514px) { position: absolute; top: 1.75em; right: -5vmin; } }