Team:Cornell NY/sidebarCSS

/* --------------------------------

Primary style

---

*/

• , *::after, *::before {

 box-sizing: border-box;

}

/* html {

 font-size: 62.5%;

} */

/* a {

 color: #47b475;
 text-decoration: none;

} */

.cd-image-replace {

 /* replace text with image */
 display: inline-block;
 overflow: hidden;
 text-indent: 100%;
 white-space: nowrap;
 color: transparent;

}

/* --------------------------------

Navigation trigger - visible on small devices only

---

*/

.cd-nav-trigger {

 display: block;
 position: fixed;
 z-index: 2;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: #47b475;
 /* reset button style */
 cursor: pointer;
 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 -o-appearance: none;
 appearance: none;
 border: none;
 outline: none;

} .cd-nav-trigger span {

 /* central dot */
 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3a2c41;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .cd-nav-trigger span::before, .cd-nav-trigger span::after {

 /* bottom and top dots */
 content: ;
 position: absolute;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: #3a2c41;
 border-radius: inherit;

} .cd-nav-trigger span::before {

 top: -9px;

} .cd-nav-trigger span::after {

 bottom: -9px;

} @media only screen and (min-width: 800px) {

 .cd-nav-trigger {
   display: none;
 }

}

/* --------------------------------

Vertical navigation

---

*/

.cd-vertical-nav {

 position: fixed;
 z-index: 1;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: auto;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 -ms-transform-origin: right bottom;
 -o-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transition: -webkit-transform 0.2s;
 -moz-transition: -moz-transform 0.2s;
 transition: transform 0.2s;
 border-radius: 0.25em;
 background-color: #47b475;

} .cd-vertical-nav a {

 display: block;
 padding: 1em;
 color: #3a2c41;
 font-weight: bold;
 border-bottom: 1px solid rgba(58, 44, 65, 0.1);

} .cd-vertical-nav a.active {

 color: #47b475;

} .cd-vertical-nav.open {

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 -webkit-overflow-scrolling: touch;

} .cd-vertical-nav.open + .cd-nav-trigger {

 background-color: transparent;

} .cd-vertical-nav.open + .cd-nav-trigger span {

 background-color: rgba(58, 44, 65, 0);

} .cd-vertical-nav.open + .cd-nav-trigger span::before, .cd-vertical-nav.open + .cd-nav-trigger span::after {

 /* transform dots in 'X' icon */
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .cd-vertical-nav.open + .cd-nav-trigger span::before {

 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 1px;

} .cd-vertical-nav.open + .cd-nav-trigger span::after {

 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 bottom: 0;

} @media only screen and (min-width: 800px) {

 .cd-vertical-nav {
   /* reset style */
   right: 0;
   top: 0;
   bottom: auto;
   height: 100vh;
   width: 90px;
   max-width: none;
   max-height: none;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -ms-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   background-color: transparent;
   /* vertically align its content*/
   display: table;
 }
 .cd-vertical-nav::before {
   /* this is the navigation background */
   content: ;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   -webkit-transform: translateX(100%);
   -moz-transform: translateX(100%);
   -ms-transform: translateX(100%);
   -o-transform: translateX(100%);
   transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.4s;
   -moz-transition: -moz-transform 0.4s;
   transition: transform 0.4s;
 }
 .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before {
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
   transform: translateX(0);
 }
 .cd-vertical-nav ul {

/* vertically align

inside <nav>*/ display: table-cell; vertical-align: middle; text-align: center; } .cd-vertical-nav a { position: relative; padding: 3em 0 0; margin: 1.4em auto; border-bottom: none; font-size: 1.2rem; color: #eaf2e3; } .cd-vertical-nav a.active { color: #eaf2e3; } .cd-vertical-nav a::before, .cd-vertical-nav a::after { /* used to create the filled circle and the background icon */ content: ; position: absolute; left: 50%; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .cd-vertical-nav a::before { /* filled circle */ top: 0; height: 32px; width: 32px; border-radius: 50%; background: #eaf2e3; -webkit-transform: translateX(-50%) scale(0.25); -moz-transform: translateX(-50%) scale(0.25); -ms-transform: translateX(-50%) scale(0.25); -o-transform: translateX(-50%) scale(0.25); transform: translateX(-50%) scale(0.25); -webkit-transition: -webkit-transform 0.4s, background-color 0.2s; -moz-transition: -moz-transform 0.4s, background-color 0.2s; transition: transform 0.4s, background-color 0.2s; } .cd-vertical-nav a::after { /* icon */ opacity: 0; top: 8px; height: 16px; width: 16px; background: url(../img/cd-nav-icons.svg) no-repeat; -webkit-transform: translateX(-50%) scale(0); -moz-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); -o-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.4s 0s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s 0s, opacity 0.1s 0.3s; transition: transform 0.4s 0s, opacity 0.1s 0.3s; } .cd-vertical-nav a.active::before, .no-touch .cd-vertical-nav a:hover::before { background-color: #47b475; } .cd-vertical-nav li:first-of-type a::after { /* change icon using image sprites */ background-position: 0px -48px; /* fix bug with transitions - set scale(0.01) rather than scale(0) */ -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(4.5em) scale(0.01); transform: translateX(-50%) translateY(4.5em) scale(0.01); } .cd-vertical-nav li:first-of-type a::before { -webkit-transform: translateX(-50%) translateY(4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(4.5em) scale(0.25); transform: translateX(-50%) translateY(4.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(2) a::after { background-position: 0px -32px; -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(1.5em) scale(0.01); transform: translateX(-50%) translateY(1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(2) a::before { -webkit-transform: translateX(-50%) translateY(1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(1.5em) scale(0.25); transform: translateX(-50%) translateY(1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(3) a::after { background-position: 0px -16px; -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.01); transform: translateX(-50%) translateY(-1.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(3) a::before { -webkit-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-1.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-1.5em) scale(0.25); transform: translateX(-50%) translateY(-1.5em) scale(0.25); } .cd-vertical-nav li:nth-of-type(4) a::after { background-position: 0px 0px; -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.01); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.01); transform: translateX(-50%) translateY(-4.5em) scale(0.01); } .cd-vertical-nav li:nth-of-type(4) a::before { -webkit-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -moz-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -ms-transform: translateX(-50%) translateY(-4.5em) scale(0.25); -o-transform: translateX(-50%) translateY(-4.5em) scale(0.25); transform: translateX(-50%) translateY(-4.5em) scale(0.25); } .cd-vertical-nav .label { display: block; /* Force Hardware Acceleration */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after { -webkit-transform: translateX(-50%) scale(1); -moz-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); -o-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); /* set a rotation to fix bug on Firefox - http://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/ */ -moz-transform: translateX(-50%) scale(1) rotate(0.02deg); } .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav a::after { opacity: 1; -webkit-transition: -webkit-transform 0.4s, opacity 0s; -moz-transition: -moz-transform 0.4s, opacity 0s; transition: transform 0.4s, opacity 0s; } .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } /* -------------------------------- Content Sections - basic style

---

*/

.cd-section {

 /* vertically align its content*/
 display: table;
 width: 100%;
 height: 100vh;
 background: #3a2c41;

} .cd-section:nth-of-type(even) {

 background-color: #70557e;

} .cd-section > div {

/* vertically align
inside <section> */
 display: table-cell;
 vertical-align: middle;
 text-align: center;
} .cd-section h1, .cd-section h2 {
 width: 90%;
 margin: 0 auto;
 text-transform: uppercase;
 font-size: 2.4rem;
 line-height: 1.4;
} .cd-section h1 b, .cd-section h2 b {
 color: #584c5e;
}
@media only screen and (min-width: 800px) {
 .cd-section h1, .cd-section h2 {
   font-size: 3rem;
 }
}
.cd-scroll-down {
 position: absolute;
 left: 50%;
 right: auto;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
 bottom: 20px;
 width: 44px;
 height: 44px;
 background: url(../img/cd-arrow-bottom.svg) no-repeat center center;
}
/* --------------------------------
no-js
---
*/
.no-js .cd-nav-trigger {
 display: none;
}
.no-js .cd-vertical-nav {
 position: static;
 height: auto;
 width: 100%;
 max-width: none;
 background-color: rgba(0, 0, 0, 0.8);
 border-radius: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
} .no-js .cd-vertical-nav::before {
 display: none;
} .no-js .cd-vertical-nav ul::after {
 clear: both;
 content: "";
 display: table;
} .no-js .cd-vertical-nav li {
 display: inline-block;
 float: left;
} .no-js .cd-vertical-nav a {
 padding: 0 1em;
 margin: 1.5em 1em;
 color: #eaf2e3;
} .no-js .cd-vertical-nav a.active {
 color: #47b475;
} .no-js .cd-vertical-nav a::after, .no-js .cd-vertical-nav a::before {
 display: none;
} .no-js .cd-vertical-nav .label {
 -webkit-transform: translateX(0);
 -moz-transform: translateX(0);
 -ms-transform: translateX(0);
 -o-transform: translateX(0);
 transform: translateX(0);
}