Download raw (8.1 KB)

/* réinitialisations de base, ne pas toucher */
* {
    margin: 0;
    padding: 0;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    page-break-inside:avoid;
}

/* liens vers la typo */
@font-face {
    font-family: 'herschey-complex';
    src: url('fonts/hershey-webfont/avhersheycomplexmedium-webfont.woff2') format('woff2'),
         url('hershey-webfont/avhersheycomplexmedium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'herschey-noaille-futura';
    src: url('fonts/webfonts/hershey-noailles-futuram-webfont.woff2') format('woff2'),
         url('fonts/webfonts/hershey-noailles-futuram-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'armata';
    src: url('fonts/webfonts/armata-regular-webfont.woff2') format('woff2'),
         url('fonts/webfonts/armata-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'hershey futura light';
  src:url('fonts/futuraLightAngled.ttf');
  font-weight: normal;
  font-style: normal;
}

@keyframes menu {
  0%   {background-color: red;}
  33%  {background-color: blue;}
  66%  {background-color: yellow;}
  99%  {background-color: red;}


}

:root {

  --color-research: green;

  --chelodonium: #E1A800;
  --pluvialis: #ED7B3C;
  --spiruline:#43905a;
  --murex:#9F5881;
  --salina: #CC6052;
}


body {
  font-family: 'herschey-complex';
  /*font-family: 'herschey-noaille-futura';
  letter-spacing: -0.03em;*/

}
h1, h2, h3 {
  font-family: 'herschey-noaille-futura';
  font-weight: normal;


}
h1 {
  margin-bottom: 12px;
  color: transparent;
  font-family: 'hershey futura light';
  margin-bottom: 12px;
  text-shadow: -.175ex 0px 0px black, 0px -.175ex 0px black, .175ex 0px 0px black, 0px .175ex 0px black;
  letter-spacing: .5ex;
  font-weight: normal;
  font-size: 140%;
  margin-top: -1.75em;
  margin-bottom: 1em;
}
h2 {
  font-size: 15.5pt;
  margin-top: 24px;
      margin-bottom: 2px;
}
/*h2:first-of-type {
  margin-top: 0px;

}*/
h3 {
  font-size: 11pt;
text-decoration: underline;
    margin: 10px 0px 5px 0px;
}
p {
  font-size: 19pt;
      line-height: 1.1em;
}
a {
  text-decoration: none;
  color: black;
}
#left-menu a {
  color: var(--chelodonium)
}
#main a {
  color: var(--spiruline)

}
#main {
  padding: 0px 0px;
  /*margin-top: 50px;*/
  width: 33%;
  float: left;
  position: sticky;
  height: 98vh;
  /*padding-top: 2.5em;*/
  overflow: hidden;
  overflow-y: scroll;

        background-image: repeating-linear-gradient(30deg, var(--spiruline), var(--spiruline) 1px, transparent 1px,transparent 4px);

}
#main h1, #right-menu h1 {
margin-top: 0px;
}
#main h2 {
      margin-top: 0px;
      padding-top: 6px;
      text-align: center;
}
#main .background, #right-menu .background {
    background-image: repeating-linear-gradient(150deg, var(--spiruline), var(--spiruline) 1px, transparent 1px,transparent 4px);
}
#main div.intro, #right-menu div.intro {
    /*background-image: repeating-linear-gradient(70deg, var(--spiruline), var(--spiruline) 1px, transparent 1px,transparent 4px);*/
    background: white;
    margin-top: 0px;
    position: fixed;
   padding: 10px 20px;
       top: 135px;
   width: 33%;
}
#main li {
  background-color: white;
  padding: 2px 0px 0px 0px;
  margin: 0px 20px;
  margin-bottom: 11px;
}
#main ul {
  margin-top: 210px;
  margin-right: 0px;
  padding-top: 95px;
}
#main figure {
      margin-top: 4px;
}
#left-menu, #left-menu-about {
  padding: 0px 40px;
  display: block;
  float: left;
  position: relative;
  margin-top: 100px;
  margin-bottom: 20px;
      padding-top: 2.5em;

}
#left-menu, #left-menu-about, #right-menu {
  width: 33%;
  /*border-right: 1px solid red;*/
  height: 35vh;
  overflow: hidden;
  overflow-y: scroll;
}


#left-menu-about::-webkit-scrollbar-track, #left-menu::-webkit-scrollbar-track, #right-menu::-webkit-scrollbar-track, #main::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px transparent;
	background-color: transparent;
}

#left-menu-about::-webkit-scrollbar, #left-menu::-webkit-scrollbar, #right-menu::-webkit-scrollbar, #main::-webkit-scrollbar {
	width: 0px;
	background-color: transparent;
}

#left-menu-about::-webkit-scrollbar-thumb, #left-menu::-webkit-scrollbar-thumb, #right-menu::-webkit-scrollbar-thumb, #main::-webkit-scrollbar-thumb {
	background-color: transparent;
	border: 0px solid transparent;
}

#left-menu {
  width: 33%;
  /*border-right: 1px solid red;*/
  height: 48vh;
  float: initial;
  position: absolute;
  margin-top: 58vh;
}
#right-menu {
  width: 33%;
  /*border-left: 1px solid red;*/
  height: 188vh;
  background-image: repeating-linear-gradient(70deg, var(--pluvialis), var(--pluvialis) 1px, transparent 1px,transparent 4px);
  margin-top: 50px;

}
div#menu {
  position: fixed;
  z-index: 1000;
  top: 0px;
  left: 0px;
  font-size: 10pt;
  text-transform: uppercase;
  /*color:white;*/
  padding: 20px 20px 0px 34px;
  width: 100%;
  height: 60px;
background: repeating-linear-gradient(17deg, var(--chelodonium), var(--chelodonium) 1px, transparent 1px,transparent 4px);
  /*animation-name: menu;
animation-duration: 300s;
    animation-iteration-count: infinite;*/
}

#menu li {
    display: inline-block;
    margin-right: 30px;
    font-family: 'herschey-noaille-futura';
    text-transform: lowercase;
    font-weight: bold;
    background: white;
}
#menu a, .menu a:hover, .menu a:visited {
    text-decoration: none;
    border-bottom: 0px solid;
}

#left-menu-about h1, #left-menu h1 {
  position: fixed;
}
#left-menu-about p.footer, #left-menu-about p.header {
  /*line-height: 1.05em;*/
  font-size: 19pt
}
#left-menu-about p {
      line-height: 1.25em;
      font-family: 'herschey-noaille-futura';
      letter-spacing: -0.03em;
}
#left-menu-about p.footer em, #left-menu-about p.header em {
  font-size: 19pt;
  /*vertical-align: 0.1em;*/
  /*font-weight: bold;*/
}
#left-menu-about p, #left-menu-about h2 {
  display: none;
}
#left-menu-about p.header, #left-menu-about p.footer, #left-menu-about p.footer-more  {
  display: block;
}
#left-menu-about a {
  color: var(--murex);
}
#right-menu a {
  color: var(--pluvialis);
}
em {
  font-family: 'herschey-noaille-futura';
  font-style: normal;
  font-size: 11.5pt;
vertical-align: 0.05em;
}
#left-menu p {
  font-size: 12pt;

}
p.header {
  margin-top: 12pt;
    font-size: 12pt;
}
p.footer {
  font-size: 12pt;
}
p.footer-more {
  font-size: 12pt;
  font-weight: bold;
  font-family: 'herschey-noaille-futura';
      line-height: 2.25em;

}
a:hover {
text-decoration: underline;
 /*font-size: 0.5em*/
}
p.header + h2 {
  margin-top: 24pt;
}
p.header + p, p + p {
  margin-top: 0pt;
  text-indent: 42px;
}
/*p.footer {
  margin-top: 24pt;
}*/

p.header span {
}
.img-header {
  float: left;
  position: relative;
  margin-right: 20px;
  width: 44%;
}
figure {
  width: 100%;
  height: 200px;
overflow: hidden;
margin-top: 12px;

}

span.color{
  width: 100%;
  height: 20vh;
  display: block;
  margin-bottom: 2px;
height: 25px;
font-family: 'herschey-noaille-futura';
color:white;
vertical-align: middle;

}
ul li:first-of-type span.color{
  margin-top: 12pt;
}
span.color.lv-hp {
  background-color: var(--pluvialis);
}
span.color.lv-hp:hover{
  background-color: transparent;
  color: var(--pluvialis);
}

span.color.lv-ds {
  background-color: var(--salina);
}
span.color.lv-ds:hover{
  background-color: transparent;
  color: var(--salina);
}

span.color.lv-sp {
  background-color: var(--spiruline);
}
span.color.lv-sp:hover{
  background-color: transparent;
  color: var(--spiruline);
}

span.color.lv-murex {
  background-color: var(--murex);
}
span.color.lv-murex:hover{
  background-color: transparent;
  color: var(--murex);
}

span.color.lv-cm {
  background-color: var(--chelodonium);
}
span.color.lv-cm:hover{
  background-color: transparent;
  color: var(--chelodonium);
}


span.color p {
    padding-top: 5px;
    text-align: center;
}


figure img {
  width: 100%;
  object-fit: none;
}
ul {
    margin-right: 15px;
}
ul li {
    list-style: none;
    line-height: 1.05em;
font-size: 11.5pt;
}