/* 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; /* --tile-margin: 12.75px; */ /* --body-margin: 66px; */ --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: 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; } 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: calc(var(--header-space) - var(--tile-margin)); /* 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: .7em; 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; /* font-family: 'akrobat-regular'; */ } .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; }