/* Specific variables */ // $font-size-base-mobile: 14px; //Reescritura de variable. $font-set-Sacra1: 'Handlee', cursive; $font-set-Sacra2: 'Henny Penny', cursive; $sacraViolet: #2d1e5b; $layoutPaddingSidesMobile: 15px; $layoutPaddingTopBottomMobile: 2em; $layoutWidth: '(100vw - (#{$layoutPaddingSidesMobile} * 2))'; $layoutWidthCalc: calc(100vw - (#{$layoutPaddingSidesMobile} * 2)); $headerPhotosWidthDesktop: '(50vw - #{$layoutPaddingSidesMobile})'; $headerPhotosWidthDesktopCalc: calc(50vw - #{$layoutPaddingSidesMobile}); $headerPhotosWidthDesktopPlus: '(600px - #{$layoutPaddingSidesMobile})'; $headerPhotosWidthDesktopPlusCalc: calc(600px - #{$layoutPaddingSidesMobile}); $headerDescriptPaddingSidesDesktop: 40px; $verticalSpacerMobile: 24px; /* base styles */ body { background-color: $white; } main { // font-size: $font-size-base-mobile-vw; font-size: $font-size-base-alt-mobile; @media(min-width: $tablet) { font-size: $font-size-base-tablet; } h1, h2, h3, h4, h5, h6 { font-size: $font-size-titulos-mobile-vw; @media (min-width: $tablet) { font-size: $font-size-titulos-tablet; } } [class^="icon-"], .fa { font-size: 1em; // @media(min-width: $tablet) { // font-size: $font-size-base-tablet; // } } } // Alternate without main bar bg .mainNav { // background-color: transparent; // background-color: #F6865E; } // body.no-bar-bg { // @media (min-width: $tablet) { // .mainNav { // background-color: transparent; // } // main { // padding-top: 0; // } // section.buskingZoneHead.buskingZoneHead__bg { // padding-top: 60px; // } // } // } #react__buskingZone { // height: 70vh; // Header section { max-width: none; min-height: calc(100vh - 53px); @media (min-width: $mobile) { min-height: calc(100vh - 56px); } @media (min-width: $tablet) { min-height: calc(100vh - 60px); } } h1 { font-weight: 700; margin-bottom: $verticalSpacerMobile; margin-top: 0; } h2 { color: $orange; margin: 0; // min-height: calc(#{$font-size-base-tablet} * 4); padding: calc(#{$font-size-base-tablet} * 2) 0 $font-size-base-tablet; position: relative; text-align: center; text-transform: uppercase; @media (min-width: $desktop-s) { // min-height: calc(#{$font-size-titulos-tablet} * 5); // padding: calc(#{$font-size-titulos-tablet} * 2) 0 $font-size-titulos-tablet; padding: calc(#{$font-size-titulos-tablet} * 1.5) 0 $font-size-titulos-tablet; // Cambios lily } &.avoidMenuBar { @media (max-width: $desktop-s - 1) { padding-top: 60px; } } .font-set-alt { color: $sacraViolet; } .schedule-date { color: $darkGrey; font-size: $font-size-base-mobile-vw; line-height: 2.3; text-transform: none; @media (min-width: $tablet) { font-size: 20px; // Cambios lily } } .discrete { font-size: 0.4em; position: absolute; top: 1em; right: 1em; } } .font-set-alt { font-family: $font-set-Sacra2; text-transform: none; @at-root .font2#{&} { font-family: $font-set-Sacra1; } } } .buskingZoneSection { &__container { // @include flexboxPrefix(); // @include flexDirectionPrefix(column); // @include flexJustify(center); padding: $layoutPaddingTopBottomMobile $layoutPaddingSidesMobile; @media (min-width: $desktop-s) { //Fix to center vertically usingFlexbox min-height: calc(100vh - 60px); position: relative; @include flexAlign(flex-start); @include flexboxPrefix(); @include flexDirectionPrefix(column); @include flexJustify(center); &:after { clear: both; content: ''; display: table; } } @media (min-width: $desktop + 30) { margin-left: auto; margin-right: auto; max-width: $desktop; padding: $layoutPaddingTopBottomMobile 0; } h2 + & { padding-top: 0; } } } .buskingZoneHead { color: $white; h1 { font-size: 7.85vw; text-align: center; @media (min-width: $tablet) { font-size: 48px; } @media(min-width: $desktop-s) { float:left; text-align: left; position: relative; width: calc(50% - #{$layoutPaddingSidesMobile}); z-index: 2; } @media(min-width: desktop-l) { font-size: 64px; } > span { color: $sacraViolet; display: block; } .zone__name { display: inline-block; position: relative; text-transform: uppercase; .zone__location { font-size: 0.461em; font-weight: $font-normal-weight; left: calc(100% + 2.3em); position: absolute; bottom: 2px; &:before { border-top:1px solid $white; content: ''; left: -1.8em; position: absolute; top: 50%; width: 1.5em; } @media (max-width: $desktop-s - 1) { left: auto; margin-left: 2.3em; position: relative; &:before { top: 0.5em; } } } } } &__bg { background: transparent no-repeat center; background-size: cover; } &__container { } &__photos { // height: calc(#{$layoutWidth} * 0.724); height: calc(#{$layoutWidth} * 0.775); // min-height: 40vh; margin-bottom: $verticalSpacerMobile; position: relative; @media(min-width: $desktop-s) { float:right; height: calc(100vh - ((#{$layoutPaddingTopBottomMobile} * 2) + 60px)); margin-bottom: 0; top: calc(50% - ((100vh - ((#{$layoutPaddingTopBottomMobile} * 2) + 60px)) / 2)); width: calc(50% - #{$layoutPaddingSidesMobile}); //Fix to center vertically usingFlexbox position: absolute; right: $layoutPaddingSidesMobile; } @media (min-width: $desktop + 30) { right: 0; } @media (min-height: 890px) { height: 700px; top: calc(50% - 350px); } .zone__photo { border-radius: 50%; height: auto; overflow: hidden; position: absolute; width: 70%; @include flexboxPrefix(); @include flexAlign(center); @include flexJustify(center); &--main { // height: calc(#{$layoutWidth} * 0.479); //47.9%; height: calc(#{$layoutWidth} * 0.482); //48.2%; left: 1%; top: 0; // width: calc(#{$layoutWidth} * 0.479); //47.9%; width: calc(#{$layoutWidth} * 0.482); //48.2%; @media(min-width: $desktop-s) { // height: calc(#{$headerPhotosWidthDesktop} * 0.709); //70.9%; height: 342px; left: calc(42% - 170px); // width: calc(#{$headerPhotosWidthDesktop} * 0.709); //70.9%; width: 342px; } } &--two { // height: calc(#{$layoutWidth} * 0.385); //38.5%; height: calc(#{$layoutWidth} * 0.394); //39.4%; right: 0; // top: calc(((#{$layoutWidth} * 0.479) - (#{$layoutWidth} * 0.385)) / 2); top: calc(((#{$layoutWidth} * 0.482) - (#{$layoutWidth} * 0.394)) / 2); // width: calc(#{$layoutWidth} * 0.385); //38.5%; width: calc(#{$layoutWidth} * 0.394); //39.4%; @media(min-width: $desktop-s) { bottom: 0; // height: calc(#{$headerPhotosWidthDesktop} * 0.483); //48.3%; height: 232px; left: 0; right: auto; top: auto; // width: calc(#{$headerPhotosWidthDesktop} * 0.483); //48.3%; width: 232px; } } &--three { bottom: 0; // height: calc(#{$layoutWidth} * 0.328); //32.8%; height: calc(#{$layoutWidth} * 0.394); //32.8%; // left: 40.2%; left: 36.3%; // width: calc(#{$layoutWidth} * 0.328); //32.8%; width: calc(#{$layoutWidth} * 0.394); //32.8%; @media(min-width: $desktop-s) { bottom: auto; // height: calc(#{$headerPhotosWidthDesktop} * 0.426); //42.6%; height: 205px; left: auto; right: 0; top: 53%; // width: calc(#{$headerPhotosWidthDesktop} * 0.426); //42.6%; width: 205px; } } img { // height: auto; height: 100%; // width: 100%; width: auto; &.vert { height: auto; width: 100%; } } } } &__descript { // height: 40%; line-height: 1.3; // overflow: auto; @media(min-width: $desktop-s) { float:left; padding: 0 $headerDescriptPaddingSidesDesktop; width: calc(50% - #{$layoutPaddingSidesMobile}); } .zone__hashtag { color: $orange; // font-size: $font-size-secundarios-mobile; font-size: $font-size-titulos-mobile-vw; margin-top: 1em; text-align: right; text-transform: uppercase; @media(min-width: $tablet) { font-size: $font-size-titulos-tablet; } @media(min-width: $desktop-s) { // font-size: $font-size-titulos-tablet; margin-left: calc(#{$headerDescriptPaddingSidesDesktop} * -1); text-align: left; &:before { border-top: 1px solid currentColor; content: ''; display: inline-block; height: 0.35em; margin-right: 0.2em; width: calc((#{$headerDescriptPaddingSidesDesktop} / 2) - 0.2em); } } } } } .buskingZoneBuskers { .buskers-list { padding: 0; &:after { clear: both; content: ''; display: table; } &__item { // display: inline-block; display: block; float: left; height: calc((#{$layoutWidth} * 0.3333333333333) * 1.3); // margin: 0; // margin: 1em 0.5em; margin: 1em; padding: 0; position: relative; text-align: center; width: calc(33.33333333333% - 2em); // @media (min-width: $desktop-s) { @media (min-width: $tablet + 1) { height: calc((#{$layoutWidth} * 0.25) * 1.3); width: calc(25% - 2em); } @media (min-width: $desktop-s) { margin: 1em 2em; width: calc(25% - 4em); } @media (min-width: $desktop + 30) { height: calc((#{$desktop} * 0.25) * 1.3); } .busker { &__img { border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1px $orange; height: calc((#{$layoutWidth} * 0.3333333333333) - 2em); overflow: hidden; // max-height: 220px; // max-width: 220px; width: calc((#{$layoutWidth} * 0.3333333333333) - 2em); // @include transition(all, 0.5s); @media (min-width: $tablet + 1) { height: calc((#{$layoutWidth} * 0.25) - 2em); width: calc((#{$layoutWidth} * 0.25) - 2em); } @media (min-width: $desktop-s) { height: calc((#{$layoutWidth} * 0.25) - 4em); width: calc((#{$layoutWidth} * 0.25) - 4em); } @media (min-width: $desktop + 30) { height: calc((#{$desktop} * 0.25) - 4em); width: calc((#{$desktop} * 0.25) - 4em); } img { height: 100%; // max-height: 220px; width: auto; &.vert { height: auto; // max-width: 220px; width: 100%; } } } &__info { margin-top: 0.5em; h5 { color: $sacraViolet; font-size: $font-size-base-alt-mobile; margin: 0; @media (min-width: $tablet) { font-size: $font-size-base-tablet; } } p { font-size: $font-size-secundarios-mobile; margin: 0; @media (min-width: $tablet) { font-size: $font-size-secundarios-tablet; } } } } span { background-color: $orange; border-radius: 50%; color: $white; left: 65%; padding: 0.4em; position: absolute; top: calc((((#{$layoutWidth} * 0.3333333333333) - 2em) * 0.9) - 0.75em); z-index: 1; @include transition(all, 0.5s); @media (min-width: $mobile-l) { font-size: $font-size-titulos-mobile; } @media (min-width: $tablet + 1) { font-size: $font-size-titulos-tablet; top: calc((((#{$layoutWidth} * 0.25) - 2em) * 0.9) - 0.5em); } @media (min-width: $desktop-s) { padding: 0.5em; top: calc((((#{$layoutWidth} * 0.25) - 4em) * 0.9) - 0.5em); } @media (min-width: $desktop + 30) { top: calc((((#{$desktop} * 0.25) - 4em) * 0.9) - 0.5em); } } a { color: $grey; @include transition(all, 0.5s); &:hover, &:focus { color: $sacraViolet; .busker__img { box-shadow: 0 0 0 1px currentColor; } span { background-color: $sacraViolet; } } } } } &__loadBtn { color: $orange; font-size: $font-size-secundarios-mobile; margin-bottom: 0; text-decoration: underline; &:hover, &:focus { color: $sacraViolet; } @media (min-width: $tablet) { font-size: $font-size-secundarios-tablet; } } .scrollLoadingHelper { height: 15vh; width: 100%; } .loaderAnim-white, .loaderAnim-orange { height: 15vh; width: 15vh; } } .buskingZoneContent { background-color: $sacraViolet; color: $white; @at-root #react__buskingZone section#{&} { min-height: auto; @media (min-width: $desktop-s) { min-height: auto; } } .buskingZoneSection__container { @media (min-width: $desktop-s) { min-height: auto; } } &__body { text-align: center; @media (min-width: $desktop-s) { margin: 0 auto; max-width: $tablet; } } &__bottom { margin: 2em auto; text-align: center; } a.buttonComponent.outline.button__link { border-color: currentColor; border-radius: 0; color: $orange; // display: inline-block; font-size: $font-size-titulos-mobile; padding: 0.5em 1.5em; text-align: center; &:hover, &:focus { color: $white; } @media (min-width: $tablet) { font-size: $font-size-titulos-tablet; } } } .buskingZoneComments { .buskingZoneSection__container { @media (min-width: $desktop-s) { display: block; } } #react__buskingZone & h2 { color: $sacraViolet; } } // .cityMap { .buskingZoneMap { h2 { box-shadow: 0 0.1em 0.25em 0 rgba($sacraViolet, 0.15); z-index: 2; } } .mapArea { // height: 300px; // height: 70vh; height: calc(100vh - 53px - (#{$font-size-base-tablet} * 4)); overflow: hidden; position: relative; @media (min-width: $mobile) { height: calc(100vh - 56px - (#{$font-size-base-tablet} * 4)); } @media (min-width: $tablet) { height: calc(100vh - 60px - (#{$font-size-base-tablet} * 4)); } @media (min-width: $desktop-s) { height: calc(100vh - 60px - (#{$font-size-titulos-tablet} * 5)); } > div { // max-height: 90%; } .gm-style .mapPin { font-size: $font-size-titulos-mobile-vw; @media(min-width: $tablet) { font-size: $font-size-titulos-tablet; font-size: 20px; // Cambios lily } // &.place { // font-size: $font-size-titulos-mobile-vw; // @media(min-width: $tablet) { // font-size: $font-size-titulos-tablet; // } // } } .mapPin { // background-color: rgba($orange, 0.5); background-color: $orange; border-radius: 50%; // box-shadow: 0 0 0 color: $white; cursor: pointer; height: 1.6em; margin: -0.8em 0 0 -0.8em; // overflow: hidden; padding-top: 0.3em; position: relative; width: 1.6em; // test Lily height: 27px; width: 27px; &:not(.busker) { @include transition(all, 0.3s); } span { display: block; // margin: 0.3em 0 0; position: relative; text-align: center; z-index: 2; @media (min-width: $tablet) { bottom: 3px; // Cambios lily } } &.pitch { // box-shadow: 0 0 0 2px $white; box-shadow: 0 0 0 11px rgba($orange, .5); // Cambios lily &.scheduled { background-color: $turquoiseDark; box-shadow: 0 0 0 11px rgba($turquoiseDark, .5); // Cambios lily } &.livePitch { background-color: $fucsia; box-shadow: 0 0 0 11px rgba($fucsia, .5); // Cambios lily } } &.place, &.busker { position: absolute; bottom: 0; } &.place { background-color: transparent; color: $orange; overflow: visible; text-shadow: -2px -2px 0 $white, 2px -2px 0 $white, -2px 2px 0 $white, 2px 2px 0 $white, 0 3px 0 $white; &:hover, &:focus, &.active { color: $sacraViolet; text-shadow: -3px -3px 0 $white, 3px -3px 0 $white, -3px 3px 0 $white, 3px 3px 0 $white, 0 4px 0 $white; } } &.busker { box-shadow: 0 0 0 2px white; &:before, &:after { content: ''; display: block; position: absolute; } &:before { background-color: white; height: 0.6em; left: calc(50% - 0.3em); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 0.95em; width: 0.6em; z-index: -1; @media (max-width: $tablet - 1) { top: 1.15em; } } &:after { border-bottom: none; border-left: 0.4em solid transparent; border-right: 0.4em solid transparent; border-top: 0.4em solid $orange; left: calc(50% - 0.4em); top: 1.1em; // z-index: -1 @media (max-width: $tablet - 1) { top: 1.35em; } } .mapPin__waves { // left: -52%; left: -60%; // Cambios lily position: absolute; // top: 19%; top: 24%; // Cambios lily // width: 204%; width: 226%; // Cambios lily .wave__l , .wave__r { color: $orange; display: block; float: right; // position: absolute; text-align: right; width: 50%; text-shadow: -2px -2px 0 $white, 2px -2px 0 $white, -2px 2px 0 $white, 2px 2px 0 $white; @include transition(all, 0.5s); } .wave__l { float: left; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } } // .radius { // left: -70%; // position: absolute; // top: 0; // width: 240%; // &:before, &:after { // color: #f2592a; // content: '((('; // display: block; // float: left; // line-height: 1.7; // text-shadow: 0 0 3px white; // width: 50%; // } // &:after { // float: right; // transform: rotate(180deg); // } // } } &:not(.place):hover, &:not(.place):focus, &:not(.place).active { background-color: $sacraViolet; &.busker { &:after { border-top-color: $sacraViolet; } .wave__l , .wave__r { color: $sacraViolet; } } } .mapPin__tip { display: none; } } .mapInfoPanel { background-color: $white; // to Match new design border-bottom: 1px solid $lightGrey; height: 70%; min-height: 200px; // max-height: calc((70vh * 0.9) - 2em); max-height: 58vh; // padding: 0.5em $layoutPaddingSidesMobile; padding: 0 $layoutPaddingSidesMobile 0.5em ; // to Match new design position: absolute; // bottom: -60vh; bottom: -100%; width: 100vw; // @include gradientBGangleCustom(rgba(255,255,255,0), $white, 180deg, 0%, 2em); @include transition(all, 0.5s); &.open { bottom: 0; } @media (min-width: $desktop-s) { background-color: $white; border-bottom: none; box-shadow: 0 0.7em 0.5em 0 rgba($blue, 0.04); height: auto; max-height: 70vh; // padding: $layoutPaddingSidesMobile; padding: 0 $layoutPaddingSidesMobile $layoutPaddingSidesMobile; // to Match new design // right: 1em; right: -50vw; top: 1em; width: 400px; &.open { bottom: auto; right: 1em; } } @media (min-width: $desktop-l) { &.open { right: 5%; } } &.scheduled { // bottom: -60vh; height: calc(100vh - 53px - (#{$font-size-base-tablet} * 4)); max-height: none; @media (min-width: $desktop-s) { height: calc((100vh - 60px - (#{$font-size-titulos-tablet} * 5)) - 1em); top: 0.5em; } .mapInfoPanel__img { max-height: 20%; } } h4 { color: $sacraViolet; font-size: $font-size-titulos-mobile-vw; // font-weight: 700; // margin-bottom: 0.2em; background-color: $sacraViolet; color: $white; margin: 0; margin-left: calc(#{$layoutPaddingSidesMobile} * -1); margin-right: calc(#{$layoutPaddingSidesMobile} * -1); padding: 0.5em $layoutPaddingSidesMobile; text-transform: uppercase; @media (min-width: $tablet) { font-size: $font-size-titulos-tablet; margin-top: 0; } } > h5 { color: $grey; // margin: $font-size-titulos-tablet-relative; margin: 0 0 0.5em; text-transform: uppercase; @media (min-width: $desktop-s) { margin-bottom: 15px; } } &.busker > h5 { // margin-bottom: 0; } h5, p { // font-size: $font-size-secundarios-mobile-vw; font-size: $font-size-secundarios-mobile; @media (min-width: $tablet) { font-size: $font-size-secundarios-tablet; } } button { // background-color: $lightGrey; background-color: transparent; border: none; border-radius: 50%; color: $white; line-height: 1; margin-bottom: 0; // padding: 0 0.25em; padding: 0 0.24em 1px 0.25em; position: absolute; right: $font-size-titulos-tablet-relative; // top: 1em; top: 0.5em; width: auto; @include transition(all, 0.3s); &:after { content: '\00D7' } &:hover, &:focus { // background-color: $sacraViolet; color: $turquoise; } @media (min-width: $desktop-s) { padding: 0 0.25em; right: 15px; top: 15px; } } &__img { margin-left: calc(#{$layoutPaddingSidesMobile} * -1); margin-right: calc(#{$layoutPaddingSidesMobile} * -1); // max-height: 200px; max-height: 40%; overflow: hidden; @include flexAlign(center); @include flexboxPrefix(); @media (min-width: $desktop-s) { max-height: 24vh; } @at-root .mapArea .busker .mapInfoPanel__img { display: block; overflow: visible; max-height: none; } img { height: auto; width: 100%; } > div { height: 100%; position: relative; width: 100%; } &__frame { border: 4px solid transparent; border-radius: 50%; box-shadow: 0 0 0 1px $orange; height: 20vh; margin: 2px auto; overflow: hidden; width: 20vh; @include transition(all, 0.3s); @media (min-width: $desktop-s) { margin-bottom: 10px; } img { height: 100%; width: auto; &.vert { height: auto; width: 100%; } } } &__icon { // left: calc(50% - 10vh); right: calc(50% - 10vh); position: absolute; // top: 80%; top: 15vh; z-index: 2; span { background-color: $orange; border-radius: 50%; color: $white; font-size: $font-size-titulos-mobile; padding: 0.4em; @include transition(all, 0.3s); @media (min-width: $desktop-s) { font-size: $font-size-titulos-tablet; padding:0.5em; } } } } &__link { color: $orange; display: block; text-align: center; text-decoration: underline; text-transform: uppercase; @include transition(all, 0.3s); &:hover, &:focus { color: $sacraViolet; .mapInfoPanel__img__frame { box-shadow: 0 0 0 1px $sacraViolet; } .mapInfoPanel__img__icon { span { background-color: $sacraViolet; } } } } &__content { margin: 1em 0 0.5em; // max-height: calc(40% - 1.5em); overflow: auto; text-align: center; @media (min-width: $desktop-s) { margin: 15px 0 0; } p { margin-bottom: 0; } } .schedule-container { max-height: calc((100vh - 53px - (#{$font-size-base-tablet} * 4)) * 0.5); overflow-x: visible; overflow-y: auto; @media (min-width: $desktop-s) { height: calc((100vh - 60px - (#{$font-size-titulos-tablet} * 5)) * 0.5); } } .pitch-schedule { margin-left: 0.5em; @media (min-width: $desktop-s) { margin-left: 1.2em; } } } }