|
|
@@ -1,4 +1,5 @@
|
|
|
/* Variables */
|
|
|
+
|
|
|
:root {
|
|
|
--tile-margin: .9vw;
|
|
|
--caption-hmargin: calc(2*var(--tile-margin));
|
|
|
@@ -9,38 +10,63 @@
|
|
|
--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; }
|
|
|
+ :root {
|
|
|
+ --columns: 5;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
@media (max-width: 1500px) {
|
|
|
- :root { --columns: 5; }
|
|
|
+ :root {
|
|
|
+ --columns: 5;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
@media (max-width: 1000px) {
|
|
|
- :root { --columns: 4; }
|
|
|
+ :root {
|
|
|
+ --columns: 4;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
@media (max-width: 700px) {
|
|
|
- :root { --columns: 3; }
|
|
|
+ :root {
|
|
|
+ --columns: 3;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
@media (max-width: 500px) {
|
|
|
- :root { --columns: 2; }
|
|
|
+ :root {
|
|
|
+ --columns: 2;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
@media (max-width: 400px) {
|
|
|
- :root { --columns: 2; }
|
|
|
+ :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 {
|
|
|
@@ -52,6 +78,7 @@
|
|
|
font-size: 2.5vw;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
@media (min-width: 601px) {
|
|
|
/* Non mobile view */
|
|
|
#mobile-header {
|
|
|
@@ -59,36 +86,46 @@
|
|
|
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;
|
|
|
@@ -98,29 +135,35 @@ h1 {
|
|
|
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;
|
|
|
@@ -129,17 +172,18 @@ body {
|
|
|
display: flex;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-box-direction: normal;
|
|
|
- -ms-flex-direction: column;
|
|
|
- flex-direction: column;
|
|
|
+ -ms-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
-webkit-box-pack: end;
|
|
|
- -ms-flex-pack: end;
|
|
|
- justify-content: flex-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;
|
|
|
@@ -148,146 +192,160 @@ body {
|
|
|
display: flex;
|
|
|
-webkit-box-orient: horizontal;
|
|
|
-webkit-box-direction: normal;
|
|
|
- -ms-flex-direction: row;
|
|
|
- flex-direction: row;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-webkit-box-align: end;
|
|
|
- -ms-flex-align: end;
|
|
|
- align-items: flex-end;
|
|
|
+ -ms-flex-align: end;
|
|
|
+ align-items: flex-end;
|
|
|
-webkit-box-pack: justify;
|
|
|
- -ms-flex-pack: justify;
|
|
|
- justify-content: space-between;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- 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;
|
|
|
+ -ms-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
+
|
|
|
.rbox .vbox {
|
|
|
-webkit-box-align: end;
|
|
|
- -ms-flex-align: end;
|
|
|
- align-items: flex-end;
|
|
|
+ -ms-flex-align: end;
|
|
|
+ align-items: flex-end;
|
|
|
}
|
|
|
+
|
|
|
.lbox .vbox {
|
|
|
-webkit-box-align: start;
|
|
|
- -ms-flex-align: start;
|
|
|
- align-items: flex-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;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: 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;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-webkit-box-align: end;
|
|
|
- -ms-flex-align: end;
|
|
|
- align-items: flex-end;
|
|
|
+ -ms-flex-align: end;
|
|
|
+ align-items: flex-end;
|
|
|
-webkit-box-pack: start;
|
|
|
- -ms-flex-pack: start;
|
|
|
- justify-content: flex-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;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
-webkit-box-pack: end;
|
|
|
- -ms-flex-pack: end;
|
|
|
- justify-content: flex-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-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
-webkit-box-pack: end;
|
|
|
- -ms-flex-pack: end;
|
|
|
- justify-content: flex-end;
|
|
|
+ -ms-flex-pack: end;
|
|
|
+ justify-content: flex-end;
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: center;
|
|
|
+ -ms-flex-align: center;
|
|
|
+ align-items: center;
|
|
|
margin-top: 0;
|
|
|
}
|
|
|
+
|
|
|
#alucho-title, #designer-subtitle {
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- 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-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
-webkit-box-pack: end;
|
|
|
- -ms-flex-pack: end;
|
|
|
- justify-content: flex-end;
|
|
|
+ -ms-flex-pack: end;
|
|
|
+ justify-content: flex-end;
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: 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-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
-webkit-box-pack: start;
|
|
|
- -ms-flex-pack: start;
|
|
|
- justify-content: flex-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;
|
|
|
@@ -297,6 +355,7 @@ figure {
|
|
|
margin: var(--tile-margin);
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
figure img.tile, svg {
|
|
|
display: -webkit-box;
|
|
|
display: -ms-flexbox;
|
|
|
@@ -305,6 +364,7 @@ figure img.tile, svg {
|
|
|
height: 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+
|
|
|
figure figcaption {
|
|
|
font-size: .7em;
|
|
|
padding: var(--caption-vmargin) var(--caption-hmargin);
|
|
|
@@ -313,56 +373,62 @@ figure figcaption {
|
|
|
display: flex;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-box-direction: normal;
|
|
|
- -ms-flex-direction: column;
|
|
|
- flex-direction: column;
|
|
|
+ -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%);
|
|
|
+ transform: translateY(100%);
|
|
|
-webkit-transition: .3s ease;
|
|
|
- transition: .3s ease;
|
|
|
+ transition: .3s ease;
|
|
|
}
|
|
|
+
|
|
|
figure:hover figcaption {
|
|
|
-webkit-transform: translateY(0);
|
|
|
- transform: translateY(0);
|
|
|
+ transform: translateY(0);
|
|
|
-webkit-transition: .3s ease;
|
|
|
- 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;
|
|
|
+ -ms-flex-direction: column;
|
|
|
+ flex-direction: column;
|
|
|
-webkit-box-align: start;
|
|
|
- -ms-flex-align: start;
|
|
|
- align-items: flex-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;
|
|
|
+ -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;
|
|
|
@@ -370,33 +436,39 @@ footer::after {
|
|
|
display: flex;
|
|
|
-webkit-box-orient: horizontal;
|
|
|
-webkit-box-direction: normal;
|
|
|
- -ms-flex-direction: row;
|
|
|
- flex-direction: row;
|
|
|
+ -ms-flex-direction: row;
|
|
|
+ flex-direction: row;
|
|
|
-ms-flex-wrap: wrap;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-wrap: wrap;
|
|
|
-webkit-box-pack: justify;
|
|
|
- -ms-flex-pack: justify;
|
|
|
- justify-content: space-between;
|
|
|
+ -ms-flex-pack: justify;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
+
|
|
|
footer .copyright, footer .social {
|
|
|
-webkit-box-align: center;
|
|
|
- -ms-flex-align: center;
|
|
|
- align-items: 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;
|
|
|
-}
|
|
|
+}
|
