<div id="posterWrap">
	<div id="poster">
		<div id="top">
				<p>includes former members<br />of mother love bone<br />live acoustic set / meet the band</p>
				<p>thursday<br />november 14 1991<br />7:30 pm</p>
				<p>menlo park mall<br />at compact disc world<br />edison, new jersey</p>
			</div>
		<h1>pearl jam</h1>
		<div id="circles">
			<div id="c1"></div>
			<div id="c2"></div>
			<div id="c3"></div>
			<div id="c4"></div>
		</div>
	</div>
</div>


<footer class="closed">
	<a class="posterImage" style="background-image: url('//cdn.shopify.com/s/files/1/0140/7312/products/pearl_jam_1024x1024.jpg?v=1451969694');" href="https://www.swissted.com/products/pearl-jam-at-compact-disc-world-1993"><span>Buy Poster</span></a>
	<h5 id="info">#SwisstedInCode :: pearl jam at compact disc world, 1991 <i class="fa fa-question-circle" aria-hidden="true"></i></h5>
	<p>The <a href="https://www.swissted.com/" target="_blank">Swissted</a> project is a collection of concert posters created in the Swiss International Style by Mike Joyce. I'm recreating Mike's beautiful print posters in code and sharing the results here.</p>
</footer>

// micro-normalize - mostly to fix some generally annoying stuff
h1, h2, h3, h4, h5, h6, p, button, ul {
	margin: 0; 
	padding: 0;
	font-weight: normal;
}

* { box-sizing: border-box; }
*:before, *:after {
  box-sizing: inherit;
}

@mixin baseType {
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
}

@mixin cleanType {
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
	font-size: 62.5%; //enable relative sizing where 1rem = 10px
	height: 100%;
}

body {
	background: #dadada;
	font-size: 1.4rem;
	@include baseType;
}

footer {
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	height: 3.5rem;
	background: #46285A;
	padding: 1rem 2rem 1rem 15rem;
	color: rgba(255,255,255,0.8);
	transition: all 0.075s ease-in-out;
	border-top: 1px solid #333;
	
	a { color: #F14E6B; transition: color 0.075s ease-in-out; }
	a:hover { color:#fff; }
	
	.posterImage {
		position: absolute;
		left:0;
		bottom: -10rem;
		width: 200px;
		height: 282px;
		background-color:#fff;
		background-size:cover;
		box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.4);
		color: #fff;
		text-decoration:none;
		transform: scale(0.25);
		transition: all 0.2s ease;
		
		span { 
			display:none;
			background: #000;
			position: absolute;
			bottom: 2rem;
			left: 50%;
			padding: 0.3rem 0.5rem;
			transform: translate(-50%, 0);
			border: 1px solid #333;
			border-radius: 2px;
			transition: all 0.2s ease;
			box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.3);
		}
	}
	
	.posterImage:hover span {
		font-size: 1.7rem;
	}
	
	h5 { font-size: 1.6rem; 
		margin-bottom: 0.5rem;
		color: #fff;
		cursor:pointer;
		i { margin-left: 2rem; opacity: 0.7; }
	}
	p { 
		transform: translatey (-4rem);
		transition: all 0.2s ease;
	}
}

footer.open {
	padding-left: 25rem;
	height: auto;
	.posterImage {
		left: 2rem;
		bottom: 1rem;
		transform: scale(1);
		span { display: block; }
	}
	p {
		transform: translatey (0);
	}
}

#posterWrap {
	margin: 4rem auto;
	padding: 2rem;
	width: 64rem;
	height: 88.4rem;
	box-shadow: 0 0 0.3rem 0 rgba(0,0,0,0.2);
	background: #fff;
}
#poster {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* ---------------------------- project specific -----------------*/
$purple: rgba(61, 16, 99, 1.0);
$orange: rgba(239, 52, 35, 1.0);
$blue: rgba(62, 194, 207, 1.0);

@mixin background-gradient {
background: linear-gradient(to bottom, $orange 0%,$orange 50%,$blue 50%,$blue 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ec2cf', endColorstr='#ef3423',GradientType=0 );
}

#poster {
	background-color: $purple;
	
	#top { 
		display:flex;
		margin: 2rem;
		color: #fff;
		p {
			font-weight: normal;
			font-size: 1.3rem;
			letter-spacing: 0.025rem;
			line-height: 1.4;
			padding-left: 2rem;
			flex: 1;
		}
		p:first-child {
			padding-left: 0;
			flex: 1.5;
		}
	}
	
	h1 {
		color: #fff;
		font-size: 8rem;
		font-weight: bold;
		letter-spacing: -0.1rem;
		padding: 0 0 0.5rem 2rem;
		border-bottom: 2px solid #fff;
	}
	
	#circles { 
		position: relative;
		width: 60rem;
		height: 60rem;
		margin-top: 4rem;
	}
	#c1, #c2, #c3, #c4 {
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		transition: all 1s ease-in-out;
	}
	#c1 {
		width: 60rem;
		height: 60rem;
		border-radius: 30rem;
		@include background-gradient;
	}
	#c2 {
		width: 40rem;
		height: 40rem;
		border-radius: 20rem;
		background-color: $purple;
	}
	#c3 {
		width: 30rem;
		height: 30rem;
		border-radius: 15rem;
		@include background-gradient;
		transform: translate(-50%, -50%) rotate(90deg);
	}
	#c4 {
		width: 8rem;
		height: 8rem;
		border-radius: 4rem;
		background-color: $purple;
	}
	
	#circles:hover {
		#c1 {
		transform: translate(-50%, -50%) rotate(180deg);
	}
	#c3 {
		transform: translate(-50%, -50%) rotate(270deg);
	}
	}
}

var clickTarg = document.getElementById('info');
var toggle = clickTarg.parentNode;
clickTarg.addEventListener('click', function () {
  if (toggle.classList.contains('closed')) {
   toggle.classList.remove('closed');
   toggle.classList.add('open');
  } else {
		toggle.classList.remove('open');
   	toggle.classList.add('closed');
	}
});