Template:Tartu TUIT/style
<style> html, body {
font-family: 'Roboto'; margin: 0; padding: 0; }
header, footer, nav {
display: block; }
div, a, ul, li, header, footer, nav, section {
box-sizing: border-box; }
a {
cursor: pointer; }
.cols::after, .header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after {
content: ; display: table; clear: both; }
.cols, .header .menu, .header .menu .submenu {
list-style-type: none; padding: 0; margin: 0; }
.cols > li {
float: left; }
.content {
margin: 0 auto; }
.narrow .content {
width: 768px; }
.cols {
margin: 0 -2%; }
.cols.inset {
margin: 0 2%; }
.cols .col {
float: left;
margin: 0 2%; }
.cols .col img {
max-width: 100%; }
.cols .col.half {
width: 46%; }
.cols .col.third {
width: 29.3%; }
.cols .col.two-thirds {
width: 62.6%; }
.cols .col.quarter {
width: 21%; }
.cols .col.five-twelfth {
width: 37.6%; }
html, body {
font-family: 'Roboto'; font-size: 16px; background-color: #181e33; min-height: 100%; }
h2 {
text-align: center; font-weight: 100; font-size: 36px; }
.banner {
padding: 20px 0 0; }
.banner .title {
padding: 30px;
font-size: 100px;
font-weight: 100;
color: #dde5ee;
text-align: center; }
@media (max-width: 1024px) {
.banner {
padding-top: 50px; }
.banner .title {
font-size: 60px; } }
.article {
color: #dde5ee;
padding-bottom: 60px;
font-size: 18px; }
.article p, .article li {
text-align: justify; }
.article h2, .article p {
margin: 0; }
.article h2, .article p, .article ol, .article ul {
margin-top: 0;
margin-bottom: 0;
padding: 0 0 30px; }
.article h2 {
padding-top: 20px; }
.article h3 {
text-align: center; }
.article a {
color: #50b1be;
text-decoration: none; }
.article a.reference {
font-size: 12px;
vertical-align: super;
padding: 0px 0px; }
.article ol.fancy {
list-style-type: none;
counter-reset: ol-counter; }
.article ol.fancy li {
counter-increment: ol-counter; }
.article ol.fancy li::before {
box-shadow: 0 0 5px #50b1be;
content: counter(ol-counter);
background-color: #75c2cc;
border-radius: 100%;
color: #181e33;
font-weight: 900;
padding: 3px 8px 2px;
line-height: 20px;
margin: 4px 10px 4px 0;
float: left; }
.article ol.fancy li::after {
content: ;
clear: both;
display: table; }
.article .references {
padding-left: 18px; }
.article .references li {
padding-left: 10px; }
.hr {
width: 100%; height: 1px; background-color: #dde5ee; margin: 30px 0; }
.figure {
width: 100%;
padding-bottom: 30px; }
.figure img {
width: 100%; }
.figure .caption {
padding: 3px 0;
font-size: 14px;
text-align: center; }
.col .figure {
padding-bottom: 0; }
.text-glow-red {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ea2d30, 0 0 35px #ea2d30, 0 0 40px #ea2d30, 0 0 50px #ea2d30, 0 0 75px #ea2d30; }
.text-glow-blue {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be; }
.card {
background-color: #181e33; color: #dde5ee; }
.header {
background-color: #181e33;
display: block;
height: 80px;
color: #dde5ee;
width: 100%;
position: relative;
z-index: 200; }
.header .logo {
background-color: #181e33;
display: block;
position: absolute;
transform: translate(-50%, 0);
left: 50%;
text-decoration: none;
padding: 7px;
height: 80px; }
.header .logo img {
height: 100%;
width: auto; }
.header .menu li {
cursor: default;
white-space: nowrap; }
.header .menu > li {
position: relative; }
.header .menu .submenu {
display: none; }
.header .menu .submenu a {
display: block; }
.header .nav-button {
display: none;
height: 80px;
left: 0;
padding: 10px;
position: absolute;
top: 0;
width: 80px; }
.header .nav-button i {
background-color: #dde5ee;
height: 2px;
left: 50%;
margin-left: -15px;
margin-top: -1px;
position: absolute;
top: 50%;
transition: background-color 0.3s 0s;
width: 30px; }
.header .nav-button i::before, .header .nav-button i::after {
background-color: #dde5ee;
backface-visibility: hidden;
content: ;
height: 100%;
position: absolute;
transform: translateZ(0);
transition: transform 0.3s 0s;
width: 100%; }
.header .nav-button i::before {
transform: translateY(-8px); }
.header .nav-button i::after {
transform: translateY(8px); }
.header.sticky {
position: fixed;
top: 0;
z-index: 500;
width: 100%;
background-color: #181e33;
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #50b1be, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be; }
.header-bottom {
height: 49px; }
@media (min-width: 769px) {
.header .navigation {
position: relative;
z-index: 200;
width: 768px;
margin: 0 auto;
font-size: 18px;
font-weight: 400; }
.header .menu {
width: 40%; }
.header .menu > li {
float: left;
height: 80px; }
.header .menu > li > span {
color: #dde5ee;
line-height: 80px;
padding: 0px 20px; }
.header .menu > li .submenu {
position: absolute;
top: 80px;
background-color: #181e33;
box-shadow: 0 5px 5px -5px #fff, 0 10px 10px -10px #50b1be, 0 15px 15px -15px #50b1be, 0 17px 17px -17px #50b1be, 0 30px 30px -30px #50b1be;
border-top: 2px solid #50b1be;
z-index: -1;
min-width: 200px; }
.header .menu > li .submenu a {
color: #dde5ee;
padding: 15px 20px;
text-decoration: none; }
.header .menu > li .submenu a:hover {
background-color: rgba(80, 177, 190, 0.1); }
.header .menu > li:hover {
background-color: rgba(80, 177, 190, 0.1); }
.header .menu > li:hover .submenu {
display: block; }
.header .menu-left {
float: left; }
.header .menu-left .submenu {
left: 0; }
.header .menu-right {
float: right; }
.header .menu-right > li {
float: right; }
.header .menu-right .submenu {
right: 0; } }
@media (max-width: 768px) {
.header .nav-button {
display: block; }
.header .navigation {
background-color: #181e33;
border-top: 2px solid #50b1be;
max-height: 100%;
min-width: 280px;
color: white;
opacity: 0;
overflow: auto;
bottom: 0px;
top: 80px;
left: 0;
transform: translateX(-100%);
transition: transform 0.3s 0s, opacity 0.3s 0s;
position: fixed;
width: auto;
z-index: 100;
padding-top: 10px; }
.header .menu > li > span {
padding: 0 20px;
line-height: 60px;
display: block; }
.header .menu .submenu {
background-color: rgba(80, 177, 190, 0.1); }
.header .menu .submenu a {
padding: 0 30px;
line-height: 60px;
color: #dde5ee; }
.header .menu .menu-item-branch .label::before {
content: '+';
padding-right: 10px; }
.header .menu .menu-item-branch.open .label::before {
content: '-'; }
.header .menu .menu-item-branch.open .submenu {
display: block; }
.nav-shown {
overflow: hidden; }
.nav-shown::before {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0px;
content: ;
display: block;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 1; }
.nav-shown .navigation {
opacity: 1;
transform: translateX(0); }
.nav-shown .nav-button i {
background-color: transparent; }
.nav-shown .nav-button i::before {
transform: translateY(0) rotate(-45deg); }
.nav-shown .nav-button i::after {
transform: translateY(0) rotate(45deg); } }
- footer {
border-top: 1px solid #50b1be;
padding: 20px 0; }
#footer h3 {
color: #dde5ee;
text-align: center;
font-size: 20px; }
#footer .logos {
padding: 0;
margin: 0 auto;
display: table;
text-align: center; }
#footer .logos li {
display: inline-block;
padding: 5px; }
#footer .logos li img {
height: 80px;
background-color: white;
opacity: 0.9; }
.scene {
position: relative;
width: 100%;
overflow: hidden; }
.scene .layer {
display: none;
height: 100%;
position: absolute;
width: 100%; }
.scene .layer-paralax {
transform: translate3d(0px, 0px, 0px); }
.scene .layer-split-paralax .split-left, .scene .layer-split-paralax .split-right {
background-repeat: no-repeat;
background-origin: border-box;
height: 100%;
position: absolute;
background-position-x: 0%;
overflow: hidden; }
.scene .layer-split-paralax .split-left {
left: 0;
right: 50%; }
.scene .layer-split-paralax .split-right {
left: 50%;
right: 0;
filter: grayscale(100%); }
- reef-section {
position: relative; }
#reef-section .content {
max-width: 1920px; }
#reef-section #reef-card {
box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
background-color: #171d31;
color: #dde5ee;
border-top-right-radius: 100px;
font-size: 18px;
font-weight: 300;
position: relative;
width: 55%;
top: -150px;
left: 5%;
padding: 40px; }
@media (min-width: 1366px) and (max-width: 1599px) {
#reef-section #reef-card {
top: -100px; } }
@media (min-width: 1024px) and (max-width: 1366px) {
#reef-section #reef-card {
top: -80px;
width: 70%; } }
@media (max-width: 1024px) {
#reef-section #reef-card {
position: static;
border-top-right-radius: 0px;
border-bottom-right-radius: 100px;
width: 100%; } }
@keyframes pulse {
from {
box-shadow: none; }
to {
box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be, 0 0 5px #fff inset, 0 0 10px #50b1be inset, 0 0 15px #50b1be inset, 0 0 17px #50b1be inset, 0 0 30px #50b1be inset; } }
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
opacity: 0.5; }
to {
transform: translate3d(0, 0%, 0); } }
.slide-in-up {
animation: 1s ease-out 0s slideInUp; animation-fill-mode: backwards; }
- reef {
height: 800px; }
#reef .spinner {
animation: pulse 2s ease-out 0s infinite alternate;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
border-radius: 100%;
border: 1px solid #dde5ee;
background-color: transparent; }
#reef #reef-bg {
top: 0px; }
#reef #reef-bg .split-right, #reef #reef-bg .split-left {
background-image: url(layer-bg.png); }
#reef #reef-corals-first {
top: 0px; }
#reef #reef-corals-first .split-right, #reef #reef-corals-first .split-left {
background-image: url(layer-first.png); }
#reef #reef-corals-second {
top: 0px; }
#reef #reef-corals-second .split-left, #reef #reef-corals-second .split-right {
background-image: url(layer-second.png); }
#reef #reef-corals-third {
bottom: 0px; }
#reef #reef-corals-third .split-left, #reef #reef-corals-third .split-right {
background-image: url(layer-third.png); }
#reef #reef-corals-zero {
bottom: 0px; }
#reef #reef-corals-zero .split-left, #reef #reef-corals-zero .split-right {
background-image: url(layer-zero.png); }
#reef #reef-corals-zero .split-right {
filter: none;
background-image: url(layer-zero-after.png); }
- process {
padding-top: 40px;
padding-bottom: 40px; }
#process .content {
margin: 0 auto;
max-width: 1400px; }
#process img {
float: left;
width: 47%; }
#process .card {
border-top-right-radius: 100px;
background-color: #171d31;
float: right;
box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
font-size: 18px;
font-weight: 300;
width: 43%;
margin-right: 5%;
margin-top: 5%;
padding: 40px; }
@media (max-width: 1366px) {
#process {
padding-top: 80px; }
#process .card {
margin-top: 0; } }
@media (max-width: 1024px) {
#process img {
background-color: #181e33;
box-sizing: border-box;
float: none;
width: 100%;
padding: 0 20px; }
#process .card {
float: none;
width: 100%;
border-top-right-radius: 0px;
border-bottom-right-radius: 100px; } }
- molecule {
padding: 0px 20px; }
#molecule .content {
max-width: 1366px; }
#molecule .map {
position: relative;
margin: 0 auto 100px; }
#molecule .map .background {
background-image: url(molecule.png);
background-size: 100%;
position: relative;
width: 100%;
height: 100%;
z-index: 20; }
#molecule .map .fog {
background-color: rgba(24, 30, 51, 0.5);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 30; }
#molecule .map .pin {
position: absolute;
z-index: 30;
border-radius: 100%;
border: 3px solid #ea2d30; }
#molecule .map .pin .icon {
width: 100%;
height: 100%;
background-size: 100%;
filter: saturate(0%);
position: relative;
z-index: 25; }
#molecule .map .pin:hover {
box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
#molecule .map .card {
display: none;
position: absolute;
box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
background-color: #181e33;
top: 50%;
left: 50%;
z-index: 50;
border-radius: 170px 0px 0px 0px;
min-width: 800px;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 300; }
#molecule .map .card .btn-close {
position: absolute;
right: 10px;
top: 10px;
width: 40px;
height: 40px; }
#molecule .map .card .btn-close::before, #molecule .map .card .btn-close::after {
background-color: #dde5ee;
backface-visibility: hidden;
content: ;
height: 2px;
position: absolute;
top: 50%;
width: 100%; }
#molecule .map .card .btn-close::before {
transform: rotate(45deg); }
#molecule .map .card .btn-close::after {
transform: rotate(-45deg); }
#molecule .map .card .picture {
float: left;
padding: 20px; }
#molecule .map .card .picture img {
width: 300px;
border-radius: 100%; }
#molecule .map .card .details {
overflow: hidden;
padding: 20px 20px; }
#molecule .map .card .details .name {
font-size: 30px;
font-weight: 300; }
#molecule .map .card .details .country, #molecule .map .card .details .superpower, #molecule .map .card .details .role, #molecule .map .card .details .element {
padding: 5px 0; }
#molecule .map .card .details .country::before, #molecule .map .card .details .superpower::before, #molecule .map .card .details .role::before, #molecule .map .card .details .element::before {
color: #96999c; }
#molecule .map .card .details .country::before {
content: "From: "; }
#molecule .map .card .details .role::before {
content: "Occupation: "; }
#molecule .map .card .details .superpower::before {
content: "Superpower: "; }
#molecule .map .card .details .element::before {
content: "Element: "; }
#molecule .map .card .details .periodic {
border: 1px solid #ea2d30;
padding: 5px;
float: right;
margin-top: 10px; }
#molecule .map .card .details .periodic .mass {
float: left;
font-size: 12px;
font-weight: 400;
padding: 2px; }
#molecule .map .card .details .periodic .number {
float: right;
margin-left: 10px; }
#molecule .map .card .details .periodic .short {
display: block;
clear: both;
text-align: center;
font-size: 25px;
font-weight: 900; }
#molecule .map .card .details .periodic .full {
text-align: center;
font-size: 16px; }
#molecule .map .card .details .compound {
margin-top: 10px;
border: 1px solid #ea2d30;
padding: 10px;
float: right;
text-align: center;
font-size: 25px;
font-weight: 900; }
.notebook {
color: #dde5ee;
margin-top: 100px; }
.notebook p, .notebook h3 {
margin: 0; }
.notebook h3 {
padding-bottom: 15px;
font-size: 22px;
margin-top: -5px; }
.notebook p {
padding-bottom: 10px;
text-align: justify; }
.notebook img {
box-sizing: border-box;
float: left;
max-width: 50%;
max-height: 500px;
border: 1px solid #181e33;
padding: 5px;
background-color: #dde5ee;
margin-right: 20px; }
.notebook .images-two img {
max-width: 50%; }
.notebook .images-height img {
height: 100%; }
.notebook .event {
width: 1000px;
margin: 0 auto;
position: relative; }
.notebook .event .details {
margin-left: 25%;
padding-left: 20px;
padding: 0px 20px 60px 40px; }
.notebook .event .bullet {
width: 20px;
height: 20px;
position: absolute;
background-color: white;
border-radius: 10px;
top: 0px;
left: 25%;
transform: translate(-9px, 1px); }
.notebook .event .side {
position: absolute;
width: 25%;
left: 0;
top: 0;
text-align: right;
padding: 3px 30px; }
.notebook .event .side .icon {
font-size: 30px;
padding: 20px 0px; }
.notebook .event .side .fa-plane {
transform: rotate(-45deg); }
.notebook-red a {
color: #ea2d30; }
.notebook-red .details {
margin-left: 25%; padding-left: 20px; border-left: 3px solid #ea2d30; }
.notebook-red .bullet {
box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
</style>