/*** General o> */
@import "compass/css3";
* {
@include box-sizing(border-box);
}
body {
background: radial-gradient(ellipse farthest-corner at 45px 45px , #dedede 0%, rgba(0, 0, 255, 0) 50%, #f0f0f0 95%);
font-family: "Helvetica Neue", Helvetica, sans-serif;
position: relative;
}
/*** Header */
h1 {
background-color: #fff;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.05);
color: #231f20;
font-size: 2.5rem;
font-weight: 200;
margin-bottom: 3rem;
padding: 3rem 0;
text-align: center;
text-transform: uppercase;
strong {
font-weight: 700;
margin-right: 1rem;
position: relative;
sup {
font-size: 1rem;
position: absolute;
}
}
}
/*** Container */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
/*** Card */
.card {
@include perspective(500);
cursor: pointer;
display: inline-block;
margin: 1rem;
&:hover .inner {
@include rotateY(180deg);
}
.inner {
@include transition(.6s);
@include transform-style(preserve-3d);
position: relative;
}
}
/*** Card common */
.card,
.front,
.back {
height: 250px;
width: 180px;
}
.front,
.back {
@include backface-visibility(hidden);
@include box-shadow(0 2px 0 rgba(0, 0, 0, .06));
left: 0;
position: absolute;
top: 0;
}
.pantone-tm {
color: #231f20;
font-size: 1rem;
font-weight: 700;
margin: 0.5rem 0;
position: relative;
text-transform: uppercase;
sup {
font-size: 0.7rem;
position: absolute;
}
}
.color-info {
font-size: 0.8rem;
margin: 0.5rem 0;
}
/*** Card front */
.front {
z-index: 2;
}
.details {
background-color: #fff;
bottom: 0;
height: 90px;
padding: 10px;
position: absolute;
width: 100%;
}
.year {
color: #fff;
font-size: 2rem;
font-weight: 700;
position: absolute;
right: 0;
top: -28px;
}
/*** Card back */
.back {
@include rotateY(180deg);
background-color: #fff;
padding: 1.5rem 1.5rem 0;
text-align: center;
ul {
margin-top: 1rem;
}
li {
@include transition(color .3s);
color: #888;
font-weight: 700;
font-size: 0.8rem;
padding: 10px 5px;
text-align: left;
&:hover {
color: #231f20;
}
&:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
span {
font-weight: normal;
float: right;
}
}
}
/*** Card colors */
.pt-2019 .front {
background-color: #ff6f61;
}
.pt-2018 .front {
background-color: #5f4b8b;
}
.pt-2017 .front {
background-color: #88b04b;
}
.pt-2016-a .front {
background-color: #f7cac9;
}
.pt-2016-b .front {
background-color: #8ca4cf;
}
.pt-2015 .front {
background-color: #955251;
}
.pt-2014 .front {
background-color: #b565a7;
}
.pt-2013 .front {
background-color: #169c78;
}
.pt-2012 .front {
background-color: #f05442;
}
.pt-2011 .front {
background-color: #da4f70;
}
.pt-2010 .front {
background-color: #41b6ab;
}
.pt-2009 .front {
background-color: #f0bf59;
}
.pt-2008 .front {
background-color: #595ca1;
}
.pt-2007 .front {
background-color: #9c1b31;
}
.pt-2006 .front {
background-color: #decdbf;
}
.pt-2005 .front {
background-color: #4fb0ae;
}
.pt-2004 .front {
background-color: #e4583e;
}
.pt-2003 .front {
background-color: #7ac5c5;
}
.pt-2002 .front {
background-color: #c02034;
}
.pt-2001 .front {
background-color: #c94476;
}
.pt-2000 .front {
background-color: #9bb7d6;
}
!
