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;
}

/* Margins */

/* @media (max-width: 1080px) {
	:root {
		--tile-margin: 12.75px;
		--body-margin: 33px;
	}
} */

/* Header */

@media (max-width: 600px) {
	/* Mobile view */
	#wide-header {
		display: none;
		visibility: hidden;
	}
	:root {
		--header-space: 0;
		font-size: 2.5vw;
	}
}

@media (min-width: 601px) {
	/* Non mobile view */
	#mobile-header {
		display: none;
		visibility: hidden;
	}
}

#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;
	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: -webkit-box;
	display: -ms-flexbox;
	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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	height: var(--header-inner-space);
}

.vbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.rbox .vbox {
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

.lbox .vbox {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.hbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.lbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.rbox {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.header-subtitle {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 0;
}

#alucho-title, #designer-subtitle {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.no-bottom {
	margin-bottom: 0;
}

.header-title {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

a.first {
	margin-left: var(--tile-margin);
}

a.last {
	margin-right: var(--tile-margin);
}

main {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	margin-top: calc(var(--header-space) - var(--tile-margin));
	position: static;
}

figure {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: calc(100% / var(--columns) - 2*var(--tile-margin));
	margin: var(--tile-margin);
	overflow: hidden;
}

figure img.tile, svg {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

figure figcaption {
	font-size: .7em;
	padding: var(--caption-vmargin) var(--caption-hmargin);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: absolute;
	background-color: var(--bgcolor);
	bottom: 0;
	width: calc(100% - 2*var(--caption-hmargin));
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

figure:hover figcaption {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: .3s ease;
	transition: .3s ease;
}

figcaption h1 {
	margin: 0;
}

.caption {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

footer {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	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: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

footer .copyright, footer .social {
	-webkit-box-align: center;
	-ms-flex-align: center;
	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;
}