@charset "utf-8";
@charset "utf-8";
@charset "utf-8";

 * {
margin: 0;
padding: 0;
} :root {
--main-dimmed-opacity: 0.25;
--main-first-txt-space: 0.5em;
--main-fig-corner-radius: 0.25em;
--main-fig-space: 4em;
--main-fig-space-news: 12em;
--main-last-fig-space: 4em;
--color-bg-light-opacity: 0.11;
--color-bg-light: rgb(200, 200, 200, var(--color-bg-light-opacity));
--color-bg-dark-opacity: 0.91;
--color-bg-dark: rgb(0, 0, 255, var(--color-bg-dark-opacity));
--color-lighter: rgba(0, 0, 0, 0.6);
--color-nav-light: rgba(0, 0, 0, 0.9);
--color-nav-light-expanded-hover: 200;
--color-nav-light-dimmed-opacity: var(--main-dimmed-opacity);
--color-nav-dark: rgba(255, 255, 255, 0.85);
--color-nav-dark-expanded-hover: 100;
--color-nav-dark-dimmed-opacity: 0.4;
--color-placeholder: rgba(0, 0, 0, 0.1); --color-separator: #e5e5e5;
--nav-color: var(--color-nav-light);
--nav-color-expanded-hover: var(--color-nav-light-expanded-hover);
--nav-color-dimmed: var(--nav-color);
--nav-color-dimmed-opacity: var(--color-nav-light-dimmed-opacity);
--fx-speed-appear: 0.2s;
--fx-speed-blur: 0.1s;
--fx-speed-loader: 0.2s;
--timeline-fig-space-landscape: 25vh;
--timeline-fig-space-portrait: 25vw;
--timeline-last-fig-space: var(--main-last-fig-space);
--timeline-fig-max-height: 90vh;
--timeline-fig-shadow: 3.5vw 3.5vw 8px 2px rgba(0, 0, 0, .75);
--layout-max-width: 100vw;
--layout-bg-color: var(--color-bg-light); }
 @font-face {
font-family: 'Univers LT Std';
src: url(//taavisuisalu.xyz/wp-content/themes/ts/fonts/UniversLTStd.woff) format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Univers LT Std';
src: url(//taavisuisalu.xyz/wp-content/themes/ts/fonts/UniversLTStd-Obl.woff) format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Univers LT Std';
src: url(//taavisuisalu.xyz/wp-content/themes/ts/fonts/UniversLTStd-BoldObl.woff) format('woff');
font-weight: 700;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Unbounded';
src: url(//taavisuisalu.xyz/wp-content/themes/ts/fonts/Unbounded-Light.woff) format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Unbounded';
src: url(//taavisuisalu.xyz/wp-content/themes/ts/fonts/Unbounded-Regular.woff) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

html {
min-height: 100%;
position: relative;
}
body {
font-size: 62.5%;
font-family: 'Univers LT Std', 'Arial', sans-serif;
line-height: 2.1em;
background-color: var(--layout-bg-color);
}
::selection {
color: #fff;
background-color: #000;
}
a {
color: #000;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
p {
margin-bottom: 1.35em;
}
.clickable {
cursor: hand; cursor: pointer;
}
.grayscale { }
.blur {
filter: blur(15px);
opacity: 0.5 !important;
transition: all var(--fx-speed-blur);
}
.dimmed {
opacity: var(--main-dimmed-opacity);
}
.hidden {
display: none;
}
.zoom-out {
cursor: zoom-out;
} .p5Canvas {
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 9999;
} .lazyload,
.lazypreload,
img.lazyloading {
opacity: 0.5;
background-color: var(--color-placeholder);
}
.lazyloaded {
opacity: 1;
transition: opacity var(--fx-speed-appear);
} form input {
font-family: 'Univers LT Std', 'Arial', sans-serif;
font-weight: normal;
font-style: italic;
border: 1px solid #ccc;
padding: 0.75em 0.5em 0.45em 0.5em;
border-radius: 0;
-webkit-appearance: none;
}
form input[type=submit] {
background-color: #ccc;
} #layout {
margin: 0 auto;
width: 100%;
max-width: var(--layout-max-width);  }
#layout .spacing {
margin: 0 auto; margin: 0 4vw;
} nav {
position: sticky; top: 0;
width: inherit;
max-width: inherit;
padding-top: 6em;
z-index: 5000; }
nav > .wrapper {
display: flex;
align-items: flex-end;
}
nav,
nav a {
color: var(--nav-color);
}
nav h4 {
display: inline-block;
text-transform: uppercase;
font-size: 1.2em;
font-style: italic;
}
nav > .wrapper > *:not(:last-child) {
margin-right: 1.8em;
}
nav h4 a {
padding-bottom: 3px;
text-decoration: none;
}
nav #logo,
nav h4 a:hover,
nav .expandable:hover {
border-bottom: 2px solid var(--nav-color);
}
nav #logo {
text-transform: lowercase;
padding-right: 3em;
}
nav #logo.alpha {
border-bottom-color: red;
}
nav #logo.alpha a {
color: red;
}
nav #logo > a {
position: relative; top: 1px;
}
nav .dimmed {
opacity: var(--nav-color-dimmed-opacity) !important;
color: var(--nav-color-dimmed) !important;
border-color: var(--nav-color-dimmed) !important;
}
nav .grow {
flex-grow: 1;
}
nav .expandable {
display: inline-block;
position: relative; top: 2px;
cursor: help;
border-bottom: 2px solid transparent;
} @supports (-moz-appearance:none) {
nav #logo > a {
top: 0px;
}
nav .expandable {
top: 3px;
}
}
nav .expandable a {
text-decoration: none;
}
nav .expandable li:not(.open) a:hover {
color: rgb(var(--nav-color-expanded-hover), var(--nav-color-expanded-hover), var(--nav-color-expanded-hover));
}
nav .expandable:hover ul {
display: block;
}
nav .expandable > .wrapper {
position: absolute; left: 50%;
}
nav .expandable ul {
position: relative; left: -50%;
padding-top: 1em;
list-style: none;
text-align: center;
}
nav .expandable ul > li {
font-size: 1.2em;
font-style: italic;
white-space: nowrap;
}
nav .expandable ul > li.open {
display: inline-block;
text-decoration: line-through !important;
}
nav .expandable ul > li.open a {
cursor: default;
}
nav #nav-mobile {
display: none;
background: url(//taavisuisalu.xyz/wp-content/themes/ts/img/icon-nav-mobile-light.png) no-repeat center center;
text-decoration: none;
width: 25px;
height: 21px;
position: relative; top: -1px;
margin-right: 0;
z-index: 5000;
}
nav #nav-mobile img {
opacity: 0;
} body.post-type-archive-jetpack-portfolio {
--layout-bg-color: var(--color-bg-dark);
--nav-color: var(--color-nav-dark);
--nav-color-dimmed: var(--nav-color);
--nav-color-expanded-hover: var(--color-nav-dark-expanded-hover);
--nav-color-dimmed-opacity: var(--color-nav-dark-dimmed-opacity);
}
body.post-type-archive-jetpack-portfolio nav #nav-mobile {
background-image: url(//taavisuisalu.xyz/wp-content/themes/ts/img/icon-nav-mobile-dark.png);
} main {
clear: both;
position: relative;
width: 100%;
padding: 8em 0 6em 0;
}
main > article .cover > .info {
position: absolute;
font-family: 'Unbounded', Georgia, sans-serif;
width: 100%;
color: #fff;
z-index: 1000;
}
main > article .cover > .info h2 {
position: absolute; left: 22px; top: 22px;
font-weight: 300;
font-size: 2.2em;
font-style: italic;
white-space: nowrap;
}
main > article .cover > .info h2 > hr {
background: #fff;
height: 5px;
width: 55%;
margin-top: 10px;
border: 0;
display: none;
}
main > article .cover > .info > time {
position: absolute; right: 25px; top: 31px;
display: inline-block;
text-align: right;
margin-top: -8px;
font-size: 0.9em;
z-index: 500;
}
main > article > section {
font-family: 'Univers LT Std', 'Arial', sans-serif;
font-size: 1.7em;
line-height: 1.7em;
}
main > article > section .is-style-project-overview {
padding-top: var(--main-first-txt-space);
font-style: italic;
color: var(--color-lighter);
}
main > article > section .is-style-project-overview:after {
position: relative; top: -0.4em;
font-style: normal;
content: '\A\A|\A';
white-space: pre;
}
main > article > section > p:first-child {
padding-top: var(--main-first-txt-space);
}
main > article > section > figure,
main > article > section > iframe,
main > article > section > video {
padding: var(--main-fig-space) 0;
}
main > article > section > figure:has(+ h3) {
padding-bottom: unset;
}
main > article > section > h3 + figure,
main > article > section > p + figure.wp-block-gallery {
padding-top: unset;
}
main > article > section > figure:last-child {
padding-bottom: var(--main-last-fig-space);
}
main > article figcaption {
position: absolute; color: var(--color-lighter);
font-style: italic;
}
main > article figure:has(+ h3) > figcaption,
main > article figure.wp-block-gallery > figcaption {
position: unset;
}
main > article figure.wp-block-gallery > figcaption {
text-align: left !important;
}
main > article img,
main > article video,
main > article > section > figure,
main > article > section > figure figure > a {
width: 100%;
height: auto;
border-radius: var(--main-fig-corner-radius);
}
main > article figure figure > a img {
width: 100% !important; }
main > article a {
text-decoration: none;
border-bottom: 2px solid #000;
}
main > article a.notlink,
main > article a.notlink:hover,
main > article figure a {
border-bottom: 0;
}
main > article h3 {
font-family: 'Unbounded', Georgia, sans-serif;
font-size: 1.2em;
font-weight: 300;
margin: var(--main-fig-space) 0 1em 0;
}
main > article h3 + p {
padding-top: 0.5em;
} main > article sup {
position: relative; top: 0.35em;
margin-right: 0.25em;
color: #333;
}
main > article .wp-block-gallery { display: flex;
flex-wrap: wrap;
gap: 1em; margin-bottom: var(--main-fig-space);
}
main > article p + .wp-block-gallery {
margin-top: var(--main-fig-space);
}
main > article p.dialogue {
margin-left: 2em;
margin-right: 2em;
font-style: italic;
}
main > article p.dialogue mark {
background: none;
display: block;
font-weight: 700;
} main#timeline > article { }
main#timeline > article:last-child {
margin-bottom: var(--timeline-last-fig-space);;
}
main#timeline > article > a {
display: block;
text-align: center;
cursor: help ;
line-height: 0;
border: 0;
}
main#timeline > article .cover { position: relative;
display: inline-block;
pointer-events: none;
overflow: hidden; box-shadow: var(--timeline-fig-shadow);
margin: 0; }
main#timeline > article .cover > .info {
top: 11px;
transition: opacity var(--fx-speed-loader);
} main#timeline > article .cover > .info h2 > hr {
margin-top: 20px;
}
main#timeline > article .cover img,
main#timeline > article .cover video { }
main#timeline > article .cover .hidden {
display: block;
position: absolute; top: 0; left: 0;
visibility: hidden;
}
main#timeline > article .loader {
position: absolute; top: 50%; left: 50%;
height: 6px;
width: 100px;
margin-top: -3px;
margin-left: -50px;
z-index: 5000;
border-width: 0px; border-right: 1px solid white;
border-left: 1px solid white;
transition: opacity var(--fx-speed-loader);
}
main#timeline > article .loader > .complete {
display: block;
width: 0%; height: 100%;
background-color: white;
transition: width var(--fx-speed-loader);
}
main#timeline > article.lazy-in-progress .loader {
opacity: 1;
}
main#timeline > article.lazy-in-progress .cover img,
main#timeline > article.lazy-in-progress .cover video {
opacity: 0.5 !important;
} main#work,
main#content {
border-bottom: 4px solid rgba(0, 0, 0, 0.05);
margin-bottom: 7em;
}
main#content {
padding-bottom: 12em;
} #work > hr.zig,
#work > hr.zag {
border: none;
height: 30px;
margin: 60px 100px 0 100px;
}
#work > hr.zig {
background: linear-gradient(-135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #FFF 20px, rgba(0, 0, 0, 0) 0) 0 5px;
background-color: rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 100;
position: relative;
}
#work > hr.zag {
background: linear-gradient(-135deg, #333 20px, rgba(0, 0, 0, 0) 0) 0 5px, linear-gradient(135deg, #333 20px, #FFF 0) 0 5px;
background-color: rgba(0, 0, 0, 0);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 20px 40px;
z-index: 50;
margin-top: -28px;
} #cv > section > p,
#cv-est > section > p {
margin-bottom: 1.35em;
}
#cv > section > ul,
#cv-est > section > ul {
list-style: none;
margin-bottom: 1.35em;
}
#cv .exclude,
#cv-est .exclude {
} main#recent {
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
max-width: 800px;
}
main#recent > article {
margin-bottom: var(--main-fig-space-news);
}
main#recent > article:nth-of-type(2) {
clear: both;
}
main#recent > article .continue,
main#recent > article .continue-end {
font-style: italic;
color: blue;
letter-spacing: 1px;
text-align: center;
}
main#recent > article .continue {
padding: 7em 0 7em 0 !important;
border-bottom: 1px solid var(--color-separator);
margin-bottom: 7em;
}
main#recent > article .continue-end {
border-top: 1px solid var(--color-separator);
padding: 7em 0 0 0 !important;
}
main#recent > article .continue a,
main#recent > article .continue-end a {
color: blue;
border-bottom: 2px solid blue;
padding-bottom: 1px;
}
main#recent > article h3.title {
float: left;
margin-top: 0em;
padding-bottom: 4em;
font-weight: 400;
font-style: italic;
}
main#recent > article time {
display: inline-block;
font-size: 0.9em;
font-style: italic;
color: var(--color-lighter);
margin-top: -11px;
}
main#recent > article[id] > section > p {
display: inline;
}
main#recent > article[id] > section > p:after {
content: '.';
}
main#recent > article .archive {
font-weight: 700;
font-style: italic;
letter-spacing: 1px;
text-align: center;
} .slide {
cursor: zoom-in;
}
#slide {
display: none;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
z-index: 5000;
}
#slide .slide-bg {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background-color: #000;
z-index: 5500;
}
#slide .slide {
cursor: zoom-out;
}
#slide .slide,
#slide .slide video {
position: absolute; top: 0; left: 0;
width: 100vw; height: 100vh;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 6000;
}
#slide .slide.slide-prev,
#slide .slide.slide-next {
opacity: 0;
}
#slide .slide-index,
#slide .slide-title {
position: absolute;
font-family: 'Unbounded', Georgia, sans-serif;
font-style: italic;
color: #fff;
opacity: 0.25;
}
#slide .slide-index {
top: 20px; left: 25px;
}
#slide .slide-title { bottom: 25px;
width: 100%; text-align: center;
font-size: 1.25em;
}
#slide .slide-progress {
display: none;
position: absolute;
top: 0px;
width: 100%; height: 5px;
background-color: #fff;
opacity: 0.1;
}
#slide .slide-index,
#slide .slide-title,
#slide .slide-progress {
z-index: 6500;
} @media all and (orientation:landscape) {
body { }
main#timeline > article {
margin-bottom: var(--timeline-fig-space-landscape);
}
main#timeline > article .cover img,
main#timeline > article .cover video {
height: var(--timeline-fig-max-height);
width: auto;
max-width: 100%;
object-fit: cover;
}
}
@media all and (orientation:portrait) {
body { }
main#timeline > article {
margin-bottom: var(--timeline-fig-space-portrait);
}
main#timeline > article .cover img,
main#timeline > article .cover video {
height: auto;
width: 100%;
object-fit: cover;
}
} @media (max-width: 760px) {
#layout {
max-width: 100vw;
}
.blur {
filter: blur(0);
}
nav *:not(:first-child) {
display: none;
}
nav .grow,
nav #nav-mobile {
display: inline-block;
}
main#timeline > article .cover img,
main#timeline > article .cover video {
width: 100vw;
max-width: 100%;
height: auto;
}
main > article > section {
font-size: 1.6em;
}
main > article .cover > .info h2 {
top: 11px; left: 11px;
font-size: 1.8em;
}
main > article .cover > .info time {
top: 21px; right: 11px;
}
main > article h3 {
font-size: 1.1em;
} body.mobile {
overflow: hidden;
height: 100%;
}
body.mobile nav {
display: block;
background-color: black !important;
position: fixed; top: 0; left: 0;
width: 100vw;
height: 100vh;
}
body.mobile nav > .wrapper {
position: absolute; left: 0; top: 0;
flex-direction: column;
padding: 5em 0;
width: 100vw;
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.mobile nav .dimmed {
opacity: var(--color-nav-dark-dimmed-opacity) !important;
color: var(--color-nav-dark) !important;
}
body.mobile nav .grow {
display: none;
}
body.mobile nav * {
display: block;
}
body.mobile nav *:not(.grow) {
display: block;
}
body.mobile nav > .wrapper > *:last-child {
padding-bottom: 5em;
}
body.mobile nav #logo {
padding: 0;
}
body.mobile nav,
body.mobile nav a {
color: white;
}
body.mobile nav h4,
body.mobile nav .expandable {
display: block;
width: 100%;
margin: 1em 0 !important;
text-align: center;
border-bottom: 0 !important;
}
body.mobile nav .expandable {
top: 0;
padding: 1.5em 0;
}
body.mobile nav h4:not(#logo) a,
body.mobile nav ul li a,
body.mobile nav ul li.open {
padding: 1em;
}
body.mobile nav #logo a {
display: inline-block;
margin: 1em 0;
border-bottom: 2px solid white;
}
body.mobile nav h4,
body.mobile nav ul li {
font-size: 2em;
}
body.mobile nav h4,
body.mobile nav h4 a:hover,
body.mobile nav .expandable:hover {
top: 0; border-bottom-width: 0;
}
body.mobile nav .expandable > .wrapper,
body.mobile nav .expandable ul {
position: relative; left: 0;
}
body.mobile nav ul li {
display: block;
opacity: 0.75;
}
body.mobile nav #nav-mobile {
display: block;
background: url(//taavisuisalu.xyz/wp-content/themes/ts/img/icon-nav-mobile-x.png) no-repeat center center;
text-decoration: none;
width: 24px;
height: 25px;
position: fixed; top: 8vw; right: 8vw;
}
body.mobile nav #nav-mobile img {
opacity: 0 !important;
}
}
@media (max-width: 780px) {
main#recent > article .continue {
padding-top: 6em !important;
padding-bottom: 6em !important;
margin-bottom: 2.3em;
}
main#recent > article .title {
float: none;
width: 100%;
text-align: center;
padding-top: 4em;
}
}