alucho/static/css/main.css

/* Variables */
:root {
	--tile-margin: .9vw;
	--caption-hmargin: calc(2 * var(--tile-margin));
	--caption-vmargin: calc(1.5 * var(--tile-margin));
	--body-margin: 3.6vw;
	--theme-color: #46c8a5;
	--bgcolor: white;
	--header-inner-space: calc(8 * var(--tile-margin));
	--header-space: calc(10 * var(--tile-margin) - 10px + var(--tile-margin));
}
/* Columns */
@media (min-width: 1501px) {
	:root { --columns: 5; }
}
@media (max-width: 1500px) {
	:root { --columns: 5; }
}
@media (max-width: 1000px) {
	:root { --columns: 4; }
}
@media (max-width: 700px) {
	:root { --columns: 3; }
}
@media (max-width: 500px) {
	:root { --columns: 2; }
}
@media (max-width: 400px) {
	:root { --columns: 2; }
}
/* Font Size */
:root {
	font-size: 1.2vw;
	font-weight: 100;
}
h1 {
	font-size: 1.18vw;
}
/* @media (max-width: 1500px) {
	:root { font-size: 22px; }
	h1 { font-size: 22px; }
}
@media (max-width: 1240px) {
	:root { font-size: 18px; }
}
@media (max-width: 1080px) {
	:root { font-size: 16px; }
} */
/* Margins */
/* @media (max-width: 1080px) {
	:root {
		--tile-margin: 12.75px;
		--body-margin: 33px;
	}
} */
/* Header */
@media (max-width: 600px) {
	#mobile-header { visibility: visible; }
	#wide-header { visibility: hidden; }
	:root { --header-space: 100px; }
}
@media (min-width: 601px) {
	#mobile-header { visibility: hidden; }
	#wide-header { visibility: visible; }
}
#logo {
	width: 10vw;
	margin: 0 .7vw -.9vw .5vw;
}
/* Typographies */
@font-face {
	font-family: 'akrobat-regular';
	src: url('/static/font/Akrobat-Regular.otf') format('opentype');
}
@font-face {
	font-family: 'akrobat-bold';
	src: url('/static/font/Akrobat-Bold.otf') format('opentype');
}
/* Rules */
:root {
	font-family: 'akrobat-regular';
	letter-spacing: .07rem;
}
.sec-div {
	font-weight: bold;
	font-family: 'akrobat-regular';
}
a {
	color: black;
	margin: .05rem .3rem;
	text-decoration: none;
}
a.en {
	margin-bottom: .3em;
}
h1 {
	font-size: 1.1em;
	text-align: center;
	letter-spacing: .05rem;
	font-weight: 100;
	font-family: 'akrobat-bold';
	text-decoration: none;
	text-transform: uppercase;
	margin: .2em 0;
}
h2 {
	font-size: .9em;
	font-family: 'akrobat-bold';
	text-decoration: none;
	text-transform: uppercase;
}
a.selected, a[href]:hover {
	color: var(--theme-color);
}
div {
	display: flex;
}
body {
	width: calc(100% - 2*var(--body-margin));
	margin: 0 var(--body-margin);
	position: absolute;
	background-color: var(--bgcolor);
}
#logo #background {
	fill: var(--bgcolor) !important;
}
#wide-header {
	width: calc(100% - 2*(var(--body-margin)));
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: fixed;
	background-color: var(--bgcolor);
	height: var(--header-space);
	position: fixed;
	z-index: 1;
}
.header-box {
	padding-bottom: calc(2 * var(--tile-margin));
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	height: var(--header-inner-space);
}
.vbox {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.rbox .vbox {
	align-items: flex-end;
}
.lbox .vbox {
	align-items: flex-start;
}
.hbox {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.lbox {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: flex-start;
}
.rbox {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.header-subtitle {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0;
}
#alucho-title, #designer-subtitle {
	flex-wrap: wrap;
}
.no-bottom {
	margin-bottom: 0;
}
.header-title {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}
a.first {
	margin-left: var(--tile-margin);
}
a.last {
	margin-right: var(--tile-margin);
}
main {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: calc(var(--header-space) - var(--tile-margin));
	position: static;
}
figure {
	position: relative;
	display: flex;
	width: calc(100% / var(--columns) - 2 * var(--tile-margin));
	margin: var(--tile-margin);
	overflow: hidden;
}
figure img.tile, svg {
	display: flex;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
figure figcaption {
	font-size: .7em;
	padding: var(--caption-vmargin) var(--caption-hmargin);
	display: flex;
	flex-direction: column;
	position: absolute;
	background-color: var(--bgcolor);
	bottom: 0;
	width: calc(100% - 2 * var(--caption-hmargin));
	-webkit-transform: translateY(100%);
			-ms-transform: translateY(100%);
			 -o-transform: translateY(100%);
					transform: translateY(100%);
	-webkit-transition: .3s ease;
		 -moz-transition: .3s ease;
			 -o-transition: .3s ease;
					transition: .3s ease;
}
figure:hover figcaption {
	-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			 -o-transform: translateY(0);
					transform: translateY(0);
	-webkit-transition: .3s ease;
		 -moz-transition: .3s ease;
			 -o-transition: .3s ease;
					transition: .3s ease;
}
figcaption h1 {
	margin: 0;
}
.caption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
footer {
	display: flex;
	flex-direction: column;
	margin: 0 var(--tile-margin);
	height: var(--body-margin);
	font-size: .7em;
	font-weight: 900;
}
footer::after {
	content: "";
	height: var(--tile-margin);
	bottom: 0;
}
.footer-content {
	height: calc(var(--body-margin) - var(--tile-margin));
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
footer .copyright, footer .social {
	align-items: center;
}
footer a.first {
	margin-left: 0;
}
footer a.last {
	margin-right: 0;
}
footer svg {
	width: auto;
	height: 1.5em;
	margin-left: .75em;
}
.social a {
	margin: 0;
}
.hidden {
	visibility: hidden;
}