pyc-website

index.less

(7044B)

 
 #intro-content-bg {
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	min-height: 100%;
 	display: table;
 	z-index: -200;
 	padding-top: @navbar-height;
 	
 	
 	.overlay {
       	width: 100%;
       	height: 100%;
       	background: rgba(0,0,0,0.3);
       	display: table-cell;
       	position: absolute;
       	top: 5px;
       	left: 0;
       	z-index: 0;
   
       	#fake-bar {
         	position: absolute;
         	left: 0;
 	    	top: -5px;
 	    	width: 100%;
 	    	height: @navbar-height + 5;
 	    	background-color: @body-bg;
       	}
     }
 }
 
 
 #intro-content {
 	
 	.inner {
         position: absolute;
         top: 50%;
         left: 0;
         margin-top: -175px + (@navbar-height + 5);
         height: 350px;
         width: 100%;
         z-index: 0;
         
         #view-locations-btn {
         	border-radius: 25px;
         }
         
         .jumbotron {
 			background: transparent;
 			padding-bottom: 0;
 			
 			h1 {
 				text-shadow: .025em .025em #000;
 			}
 			
 			@media(max-width: @screen-sm-max) {
 				margin-bottom: @jumbotron-padding - (@jumbotron-padding / 3);
 			}
 			
 			@media(max-width: @screen-xxs-max) {
 				margin-bottom: @jumbotron-padding / 3;
 			}
 			
 			*.heavy {
 			  font-weight: 600;
 			}
 			
 			*.text-shadow {
 			  text-shadow: 2px 2px #000;
 			}
 		}
    }
 
 }
 
 
 #intro-content-bg {
 	margin: 0;
 	padding: 0;
 	background: url('https://s3.amazonaws.com/assets-pyc/lamassu_how_to.jpg') 50% 50% fixed no-repeat;
 	-moz-background-size: cover;
 	-webkit-background-size: cover;
 	background-size: cover;
 }
 
 .no-backgroundsize #intro-content-bg {
 	background: none;
 }
 
 div#locations {
 		min-height: 15px !important; 
 		width: 100% !important;
 		background: url('https://s3.amazonaws.com/assets-pyc/bitcoin-network-strip.jpg');
 		box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.8) inset;
 }
 
 
 
 @intro-div-height:     300px;
 	@intro-div-height-sm:  300px;
 	@intro-div-height-xs:  222px;
 	@intro-div-height-xxs: 190px;
 	
 @atm-map-height: 600px;
 	@atm-map-height-xs: 360px;
 	@atm-map-height-sm: 400px;
 	
 	// nonfound
 	@atm-map-height-nonfound-sm: @atm-map-height; // + 250; 
 	@atm-map-height-nonfound-xs: @atm-map-height; // + 450;
 	
 	
 	@atm-map-margin   : @atm-map-height / 20;
 	@atm-map-margin-xs: @atm-map-height-xs / 20;
 	@atm-map-margin-sm: @atm-map-height-sm / 20;
 	
 	@atm-search-box-min-height:      72px;
 	@atm-search-box-min-height-xxs:  @atm-search-box-min-height - 20;
 
 	
 	
 	@z-layer-info: @gmap-text-overlay-zindex + 10;
 	@z-map-panel-box: @z-layer-info + 10;
 	@z-index-cols: @z-map-panel-box + 50;
 	
 	
 	@map-open-margin:    @intro-div-height     + @atm-map-height;
 	@map-open-margin-sm: @intro-div-height-sm  + @atm-map-height-sm;
 	@map-open-margin-xs: @intro-div-height-xs  + @atm-map-height-xs;
 	
 	@map-open-margin-nonfound-sm: @intro-div-height     + @atm-map-height-nonfound-sm;
 	@map-open-margin-nonfound-xs: @intro-div-height-xs  + @atm-map-height-nonfound-xs;
 	
 	@map-closed-margin:      @intro-div-height      + @atm-search-box-min-height     + (@atm-map-margin * 2);
 	@map-closed-margin-xs:   @intro-div-height-xs   + @atm-search-box-min-height     + (@atm-map-margin * 2);
 	@map-closed-margin-xxs:  @intro-div-height-xxs  + @atm-search-box-min-height-xxs + (@atm-map-margin * 2);
 	
 	
 	
 #atm-map {
 		.angular-google-map-container, .layer-overlay, layer-info { 
 			width: 100%;
 			height: @atm-map-height; 
 			
 			@media(max-width: @screen-xs-max) {
 				height: @atm-map-height-xs;
 			}
 			
 			@media(max-width: @screen-sm-max) {
 				height: @atm-map-height-sm;
 			}
 		}
 
 		&.nonfound {
 			.angular-google-map-container, .layer-overlay, layer-info {
 			
 				@media(max-width: @screen-sm-max) {
 					height: @atm-map-height-nonfound-sm + 80;
 				}
 			
 				@media(max-width: 600px) {
 					height: @atm-map-height-nonfound-xs + 100;
 				}
 			}
 		}
 
 		.layer-overlay {
 			position: absolute;
 		
 			.layer-inner {
 				#gradient > .horizontal-three-colors(rgba(0,0,0,0.6), rgba(0,0,0,0.3), 50%, rgba(0,0,0,0.6));
     			position: absolute;
     			top: 0;
     			left: 0;
     			width: 100%;
     			height: 100%;
     			z-index: @gmap-overlay-zindex;
 			}
 		}
 	
 		.layer-info {
 			position: absolute;
 			z-index: @z-layer-info;
 			margin: @atm-map-margin;
 			
 			.alert {
 			  margin-top: 10px !important;
 			}
 			
 			@media(min-width: @screen-md-min) {
 				width: 100%;
 			}
 			
 			#coming-soon-msg {
 				@title-font-size: 50px;
 				@message-font-size: 20px;
 			
 				@media (max-width: @screen-sm-max) {
 					.text-center();
 					padding: 50px;
 				}
 				
 				padding-top: 50px;
 			
 				h1 {
 					@media (max-width: @screen-xxs-max) {
 						font-size: @title-font-size * 0.75;
 						padding: 5px;
 					}
 		
 					@media (min-width: @screen-xs) {
 						font-size: @title-font-size;
 						padding: 45px @atm-map-margin 0px;
 					}
 				}
 	
 				p.message {
 					@media (max-width: @screen-xxs-max){
 						font-size: @message-font-size * 0.85;
 						padding: 5px;
 					}
 				
 					@media (min-width: @screen-xs) {
 						font-size: @message-font-size;
 						padding: 0 @atm-map-margin;
 					}
 					
 					@media (min-width: @screen-sm) {
 						padding-bottom: 20px;
 					}
 				}
 			}
 		}
 		
 		#zoom-buttons {
 			position: absolute;
 			top: @atm-map-margin;
 			right: @atm-map-margin;
 			z-index: @gmap-overlay-zindex + 5;
 			
 			button {
 				border-radius: 5px;
 				font-weight: 400;
 			}
 		}
 		
 		.map-panel {
 			position: absolute;
 			bottom: @atm-map-margin;
 			left: @atm-map-margin;
 			
 			@media(max-width: @screen-sm-max) {
 				left: 50%; // center search-box
 			}
 			
 			.search-box {
 				margin-bottom: 0px;
 			}
 			
 			.search-box, .preview-box {
 				border-radius: 5px;
 				z-index: @z-map-panel-box;
 				.box-shadow(-2px -2px 8px 0px rgba(50, 50, 50, 0.75));
 				
 				@media(max-width: @screen-sm-max) {
 					width: 450px;
 					position: relative; 
 					left: -50%; // center search-box
 					margin-left: 0;
 				}
 				
 				@media(max-width: @screen-xxs-max) {
 					width: 300px;
 					margin-left: 15px;
 				}
 				
 				@media(min-width: @screen-md-min) {
 					width: 450px;
 					min-height: @atm-search-box-min-height;
 				}
 				
 				@media(min-width: @screen-lg-min) {
 					width: 500px;
 				}
 			}
 			
 			.preview-box {
 				@media(min-width: @screen-xs-min) {
 					img.atm-profile { width: 100px; }
 					.business-times { padding-left: 20px; }
 				}
 				
 				@media(max-width: @screen-xs-max) {
 					padding: 10px 40px;
 				}
 				
 				@media(max-width: @screen-sm-max) {
 					display: none;
 				}
 			
 				@media(min-width: @screen-md-min) {
 					width: 70%;
 					margin-top: 10px;
 					img.atm-profile { width: 75px; }
 					.business-times { 
 						margin-top: 10px;
 						padding-left: 0; 
 					}
 				}
 				
 				@media(min-width: @screen-lg-min) {
 					img.atm-profile { width: 100px; }
 					.business-times { 
 						margin-top: 0;
 						padding-left: 20px; 
 					}
 				}
 				
 				.atm-profile-name {
 					vertical-align: middle;
 				}
 				
 				table tr.today {
 					font-weight: bold;
 				}
 			}
 		}
 		
 		.gm-style {
 			.gm-style-iw {
 				.store-status {
 					font-weight: 600;
 				}
 			}
 		}
 		
 	}