/* Variables */ :root { --columns: 5; --tile-margin: .9vw; --body-margin: 3.6vw; --theme-color: #ff2d00; /* --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 (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: 1; } } */ /* 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: 935px) { #menu { visibility: hidden; } } #logo { width: 10vw; margin: 0 .7vw -.5vw .5vw; } /* @media (max-width: 460px) { #logo { width: 130px; } } */ /* Typographies */ @font-face { font-family: 'nexa-light'; src: url('/static/font/nexa-light-regular.otf') format('opentype'); } @font-face { font-family: 'geoslab'; src: url('/static/font/geoslab703-md-bt-bold.ttf') format('truetype'); } /* Rules */ :root { font-family: 'nexa-light'; letter-spacing: 1.5px; } .sec-div { font-weight: bold; font-family: 'nexa-light'; } a { color: black; margin: .05rem .3rem; text-decoration: none; } a.en { margin-bottom: .5em; } h1 { margin: .5em 0; text-align: center; letter-spacing: 1px; font-weight: 100; font-family: 'geoslab'; text-decoration: none; text-transform: uppercase; } h2 { font-size: .9em; font-family: 'geoslab'; 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; } 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; */ } /* header > a, 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; } figure { position: relative; display: flex; width: calc(100% / var(--columns) - 2 * var(--tile-margin)); margin: var(--tile-margin); overflow: hidden; } figure img { display: flex; width: 100%; } figure figcaption { display: flex; flex-direction: column; position: absolute; padding: calc(2 * var(--tile-margin)); background-color: var(--theme-color); bottom: 0; width: calc(100% - var(--tile-margin) * 4); opacity: 0; height: 0; } figure:hover figcaption { opacity: 1; transition: .3s ease; } figure.v:hover figcaption { height: 21%; } figure.h:hover figcaption, figure.s:hover figcaption { height: 30%; } footer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin: 0 var(--tile-margin) calc(2*var(--tile-margin)) var(--tile-margin); font-size: .7em; font-weight: 900; } footer .copyright { align-items: center; } footer a.first { margin-left: 0; } footer a.last { margin-right: 0; }