Download raw (5.2 KB)

/* ==========================================================================
   Custom medias definitions
   ========================================================================== */

@custom-media --mobile only screen and (max-width: 767px);
@custom-media --desktop only screen and (min-width: 1300px);

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --orange: #ff9955;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'Sprat';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/sprat-condensedbold-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: bold;
  font-style: normal;
  src: url('fonts/Spectral-Bold.ttf') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/Spectral-Regular.ttf') format('woff');
}

@font-face {
  font-family: 'Spectral';
  font-weight: normal;
  font-style: italic;
  src: url('fonts/Spectral-Italic.ttf') format('woff');
}

@font-face {
  font-family:'PxGrotesk';
  font-weight: normal;
  font-style: normal;
  src: url('fonts/PxGroteskRegular.ttf') format('woff');
}


@font-face {
    font-family:'PxGrotesk-Screen';
    font-weight: 500;
    font-style: normal;
    src: url('fonts/PxGrotesk-Screen.ttf') format('woff');
}


/* Reset
   ========================================================================== */
   a {
       text-decoration: none;
   }


   /* Nav
      ========================================================================== */

   .home-logo {
     font-family: 'PxGrotesk';
     font-weight: 500;
     flex: 1 0;
     font-size: 1.5em;
   }

   #navigation {
     margin: 10px 0 27px 10px;
     width: 100%;
   }
   #navigation nav {
     display: flex;
   }
   #navigation nav ul {
     flex: 10 0;
   }
   #navigation li {
     font-family: 'PxGrotesk';
     font-weight: normal;
     display: inline-block;
     display: inline;
     margin-left: 15px;
   }
   #navigation a {
     color:black;
   }
   #navigation a:hover {
     color:var(--orange);
   }
   #navigation nav ul a {
    vertical-align: -7px;

   }



/* Project page
   ========================================================================== */

   body {
   }

   p{
     font-family:'PxGrotesk';
     font-size: 1.2em;
     font-weight: normal;
     line-height: 1.2em;
   }

   #main {
     padding: 14px;
   }

   .grid--container {
     display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 14pt;
     grid-auto-flow: row;

   }

  #description {
  min-width: 200px;
  grid-column-start: 1;
  }

   figure {
     position: relative;
   }

   img {
     width: 100%;
   }

   /* .cover {
     grid-column: span 2;
   } */

  .block-project--stream--image{
    grid-column: span 2; 
    grid-row-end: span 2; 

  }

  .block-project--stream--gallery--images{
    /* grid-column: span 1;  */
    /* grid-row: 1 / 3; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:7pt;
  }


   .live-pict.ref {
     background: #d4ddd8;
     padding: 70px;
     color: black;
     grid-column-end: span 1;
     grid-column-start: 2;
   }
   .live-pict.text-ref {
     background: #d4ddd8;
     padding: 40px;
     height: max-content;
     grid-column-end: span 2;
   }
   .live-pict.text-ref > p {
     font-family: 'Spectral';
     font-weight: 500;
     font-size: 1.3em;
     line-height: 1.15em;
   }


   h1{
     font-family: 'PxGrotesk';
     letter-spacing: -0.03em;
     font-size: 6em;
     line-height: 1em;
     grid-row-start: 3;
     grid-column-start: 2;
     grid-column: span 2;
   }


   h2{
     	font-family: 'Spectral';
      font-weight: 500;
     	font-size: 3em;
     	letter-spacing: -0.03em;
      line-height: 1em;
      margin-bottom: 1em;
   }

   figcaption{
     position: absolute;
     bottom: 0;
     padding: 5px 10px 7px 10px;
   }



  dl.project--block--datablock {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    align-content: start;
    justify-items: flex-start;
    flex-flow: row;
    flex-wrap: wrap;
    width: 100%;
    overflow: visible;
    grid-row: 2 / 3;

  }

  dl.project--block--datablock dt {
    flex: 0 0 50%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-family:'PxGrotesk-Screen';
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: normal;
    color:#ff9955;
    border-bottom: 1px solid #ff9955;

  }

  dl.project--block--datablock dd {
    margin-left: auto;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    flex: 0 0 50%;
    font-family:'PxGrotesk';
    font-size: 1.2em;
    line-height: 1.3em;
    font-weight: normal;
    border-bottom: 1px solid #ff9955;
  }

  /* Media queries
     ========================================================================== */

@media only screen and (max-width: 768px) {
     .grid--container {
       grid-template-columns: 1fr;
     }
     .grid--container > * {
       grid-column-start: 1;
       grid-column-end: 1;

    }