alucho/static/css/main.css

/* Variables */
:root {
	--tile-margin: .9vw;
	--caption-hmargin: calc(2 * var(--tile-margin));
	--caption-vmargin: calc(1 * var(--tile-margin));
	--body-margin: 3.6vw;
	--theme-color: #46c8a5;
	/* --tile-margin: 12.75px; */
	/* --body-margin: 66px; */
	--header-inner-space: calc(8 * var(--tile-margin));
	--header-space: calc(10 * var(--tile-margin) - 10px);
}
/* 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: 180%; */
	font-size: 1.2vw;
	font-weight: 100;
}
h1 {
	/* font-size: 97%; */
	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;
}
/* @media (max-width: 460px) {
	#logo { width: 130px; }
} */
/* 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: 1.5px; */
	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: 1px; */
	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;
}
figure figcaption {
	font-size: .9em;
}
a.selected, a[href]:hover {
	/* cursor: default; */
	/* display: inline-block; */
	color: var(--theme-color);
}
div {
	display: flex;
}
body {
	width: calc(100% - 2*var(--body-margin));
	margin: 0 var(--body-margin);
	/* width: 94%;
	margin: 0 3%; */
	/* width: calc(100% - 2*var(--body-margin)); */
	/* margin: 0 var(--body-margin); */
	position: absolute;
}
#wide-header {
	width: calc(100% - 2*(var(--body-margin)));
	margin: 0;
	/* width: calc(100% - 2*(var(--body-margin) + var(--tile-margin))); */
	/* margin: 0 var(--tile-margin); */
	/* width: 100%; */
	/* margin: 0 calc(var(--body-margin) + var(--tile-margin)); */


	display: flex;
	flex-direction: column;
	/* margin: 0 0 0 var(--tile-margin); */
	justify-content: flex-end;
	position: fixed;
	/* width: calc(100% - 2*var(--body-margin) - 2*var(--tile-margin)); */
	background-color: white;
	/* padding-bottom: calc(2*var(--tile-margin)); */
	/* border-bottom: calc(2*var(--tile-margin)); */
	height: var(--header-space);
	position: fixed;
	z-index: 1;
}
/* header::after {
	content: " ";
	background-color: black;
	height: var(--header-line-width);
	width: 100%;
	align-self: flex-start;
} */
.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;
	/* margin-bottom: 8px; */
}
/* #wide-header > a, #wide-header > h1 {
	margin: 0 3px;
} */
/* .header-subtitle > a {
	margin: 0 5px;
} */
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: var(--header-space);
	/* margin: 0; */
	/* margin-top: calc(var(--header-space) + var(--body-margin)); */
	position: static;
	/* position: absolute; */
}
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: .9em;
	padding: var(--caption-vmargin) var(--caption-hmargin);
	display: flex;
	flex-direction: column;
	position: absolute;
	background-color: white;
	bottom: 0;
	width: calc(100% - 2 * var(--caption-hmargin));
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
figure:hover figcaption {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
	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;
}