@charset 'UTF-8'; @import 'variables'; @import 'branding'; html[lang='en'] :lang(fr) { display: none !important; } html[lang='fr'] :lang(en) { display: none !important; } :lang(en) { quotes: '\201C' '\201D' '\2018' '\2019'; } :lang(fr) { quotes: '« ' ' »'; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; } body { background: rgba(173, 151, 56, 0.68); color: #f3f0e4; font-family: Abel, 'Open Sans', sans-serif; scroll-behavior: smooth; :visited { text-decoration: underline; } } body > header { background-color: rgba(109, 78, 128, 1); position: fixed; right: 5vw; bottom: -2vh; left: 5vw; padding: 1rem; z-index: 999; font-size: 1.4rem; color: rgba(255, 255, 255, 0.85); overflow: auto; transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg); :link, :visited, footer :link, footer :visited { color: rgba(220, 201, 133, 1); text-decoration: none; } h1 { text-align: center; margin: 0; font-family: 'Cormorant Garamond', serif; /* font-size: 2.8rem; */ font-size: 7vh; transform: rotate(1.5deg) translateX(5vh) translateY(-1vh); img { display: none; vertical-align: -1.6rem; align: absmiddle; border: 0; } } section { display: none; max-width: 42rem; margin: 0 auto; padding-bottom: 7rem; } footer { position: fixed; left: 0; right: 0; font-size: smaller; background-color: rgba(109, 78, 128, 1); display: none; margin: 5rem auto 2rem auto; width: 80vw; > p { text-align: center; margin: 4rem auto 2rem auto; } > nav { margin: 0 auto -3.5rem auto; padding: 0; display: none; text-align: center; transform: translateY(-7rem); h4 { display: inline; } ul { display: inline-block; margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin: 0 0.75rem; width: 4rem; height: 3rem; border: 1px solid; border-bottom: 3px solid; border-color: transparent; border-top-right-radius: 0.5rem; text-align: center; a { position: relative; display: block; width: 100%; height: 100%; line-height: 3rem; margin: 0; padding: 0; background: rgba(0,0,0,0.25); border-top-right-radius: 0.5rem; } &:hover { border-color: rgba(220, 201, 133, 1); a { font-weight: bold; background: rgba(0,0,0,0.5); } } } } &:hover { /** * Copyleft magic **/ > p { > span:first-child { display: inline-block; color: transparent; line-height: 0; &:before { content: 'Copyleft'; display: block; color: #f3f0e4; padding-right: 0.45rem; } } > span:first-child + span { display: inline-block; transform: rotate(180deg); padding-bottom: -0.1rem; } } > nav { display: block; } } } &:hover { top: 5vh; h1 { font-size: 2.6rem; transform: rotate(2.7deg) translate(0, 0) skewX(0); } footer { transform: rotate(2.7deg) translateY(-4.5vh) skewX(5deg); } img { display: inline-block; } section, footer { display: block; width: 80vw; margin: 0 auto; padding-bottom: 3rem; } } } body > main { background: url(../img/logo-ps.svg) 40% calc(50% - 5vh) / 50vw no-repeat fixed; position: fixed; top: 0; right: 0; bottom: 50%; left: 0; padding: 1rem; min-height: 80vh; } body > footer { z-index: 999; position: fixed; bottom: 0; left: 0; right: 0; display: none; background-color: rgba(109, 78, 128, 1); display: none; font-size: 1rem; h4 { display: inline-block; } > p { text-align: center; margin: 4rem auto 2rem auto; } > nav { display: none; max-width: 42rem; margin: 0 auto -3.5rem auto; padding: 0; ul { display: inline-block; margin: 0; padding: 0; list-style: none; } li { display: inline-block; margin: 0 0.75rem; width: 4rem; height: 3rem; border: 1px solid; border-bottom: 3px solid; border-color: transparent; border-top-right-radius: 0.5rem; text-align: center; a { position: relative; display: block; width: 100%; height: 100%; line-height: 3rem; margin: 0; padding: 0; background: rgba(0,0,0,0.25); border-top-right-radius: 0.5rem; } &:hover { border-color: rgba(220, 201, 133, 1); a { font-weight: bold; background: rgba(0,0,0,0.5); } } } } &:hover { /** * Copyleft magic **/ > p > span:first-child { display: inline-block; color: transparent; line-height: 0; &:before { content: 'Copyleft'; display: block; color: #f3f0e4; padding-right: 0.4rem; } } > p > span + span { display: inline-block; transform: rotate(180deg); padding-bottom: -0.05rem; } nav { display: block; } } } @media screen and (min-device-width: 1024px) { header > footer { position: fixed; } /** * Scrollbar * * ::-webkit-scrollbar the background of the bar itself. * ::-webkit-scrollbar-button the directional buttons on the scrollbar. * ::-webkit-scrollbar-track the empty space “below” the progress bar. * ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb. * ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element. * ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet. * ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements. **/ body > header::-webkit-scrollbar { background-color: rgba(109, 78, 128, 1); box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4) inset; } body > header::-webkit-scrollbar-button { background-color: black; } body > header::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); } body > header::-webkit-scrollbar-track-piece { background-color: rgba(255, 255, 255, 0.5); } body > header::-webkit-scrollbar-thumb { background-color: rgba(220, 201, 133, 1); box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4); } body > header::-webkit-scrollbar-corner { background-color: red; } body > header:hover { overflow-y: auto; } body > header:hover ~ footer { position: fixed; bottom: 0; display: block; } body > header:hover ~ footer > nav { display: block; } .media, .libre { display: block; position: absolute; top: 0; bottom: 5rem; height: 100vh; /* overflow: hidden; */ } .media:hover { width: 70vw; z-index: 500; } .media h2, .libre h2 { display: none; } .media { left: 0; section { float: left; position: relative; height: 100%; width: 15vw; top: -5vh; left: 0; padding-top: 5vh; padding-left: 1rem; z-index: 400; overflow: hidden; h3 { font-size: 5rem; color: rgba(0,0,0,0.2); } h4, p, figure { display: none; } &:hover { box-shadow: 0px -2px 4px 2px rgba(0, 0, 0, 0.68) inset; transform: rotate(0deg); width: 40vw; z-index: 500; h3 { color: rgba(0, 0, 0, 1); } h4, p, figure { display: block; padding: 1rem; color: black; } } } } .media #gfx { background: rgba(191, 138, 112,0.7); transform: rotate(-4deg); margin: 0 -3vw 0 0; left: 0; h3 { transform: rotate(4deg) translateX(1vw); font-size: 5rem; } svg { position: absolute; top: 0; left: 0; opacity: 0.9; } &:hover { background: rgba(191, 138, 112, 0.9); transform: rotate(0); margin: 0; color: black; padding: 1rem; h3 { transform: rotate(0) translateX(0) translateY(-4rem); } figure { display: inline-block; width: 197px; padding: 0; margin: 1rem; } svg { opacity: 0.3; width: calc(100% + 4rem); } + #txt { margin-left: -3vw; } } } .media #txt { background: rgba(166, 191, 112, 0.7); transform: rotate(6deg); margin: 0 -3vw 0 0; color: transparent; } .media #txt h3 { transform: rotate(-6deg) translateX(-3vw) translateY(-0.1rem); } .media #txt:hover { background: rgba(166, 191, 112, 0.9); transform: rotate(0); margin: 0; color: black; padding: 1rem; } .media #txt:hover h3 { transform: rotate(0) translateX(0) translateY(-4.1rem); } .media section h3 a { position: relative; display: block; top: 0; left: 0; right: 0; bottom: 0; text-decoration: none; color: inherit; } .media #gfx:hover p.tagline, .media #txt:hover p.tagline { position: absolute; top: 6rem; font-family: 'Cormorant Garamond'; font-style: italic; font-size: 1.6rem; padding: 1rem 2rem; } .media #vdo, .media #vda { left: 0; background: rgba(112, 166, 191, 0.5); transform: rotate(-5deg); margin: 0 0 0 -2vw; width: 10vw; p, h4 { display: none; } } .media #vdo video, .media #vda video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); z-index: -101; opacity: 0.1; } .media #vdo:hover video, .media #vda:hover video { opacity: 1; } .media #vdo:hover, .media #vda:hover { background: rgba(112, 166, 191, 0.9); margin: 0; transform: rotate(0); width: 40vw; } .media #vdo h3, .media #vda h3 { transform: rotate(5deg) translateX(-2vw); } .media #vdo:hover h3, .media #vda:hover h3 { transform: rotate(0) translateX(0) translateY(-5rem); color: rgba(109, 144, 162, 0.7); font-size: 18vw; a { display: block; height: 100%; width: 100%; } } .libre { right: 0; width: 32vw; } .libre > section h3 { color: rgba(109, 78, 128, 1); font-size: 7vh; margin: 0; padding: 0; } .libre > section p { color: rgba(0, 0, 0, 0.7); font-size: 4.9vh; margin: 0; } .libre > section h3 a { color: rgba(109, 78, 128, 1); text-decoration: none; } .libre #participation, .libre #share { /* transform: rotate(-4deg) translateY(4.5rem); */ transform: rotate(-4deg) translateY(6vh); } .libre #engagement, .libre #engage { /* transform: translate(0.5rem, 7rem); */ transform: translate(0.5vw, 14vh); } .libre #cooperation, .libre #care { /* transform: rotate(2deg) translate(0rem, 9.8rem); */ transform: rotate(2deg) translate(0rem, 19.5vh); } footer { position: fixed; left: 0; right: 0; font-size: smaller; background-color: rgba(109, 78, 128, 1); display: none; margin: 5rem auto 2rem auto; width: 80vw; } } @media screen and (max-device-width: 1023px) { body > header > h1 { font-size: 100rem; margin: 5rem auto; width: 80% } body > main { background: url(../img/logo-ps.svg) center calc(92% - 50vh) / contain no-repeat fixed; } body > footer { position: relative; left: 0; right: 0; font-size: smaller; background-color: rgba(109, 78, 128, 1); display: none; margin: 1rem auto; width: 80vw; font-size: smaller; } } .sinewave{ z-index: 0; &.w0 { fill: rgba(240, 40, 142, 0.5); } &.w1 { fill: rgba(140, 140, 42, 0.5); } &.w2 { fill: rgba(240, 142, 1, 0.5); } &.w3 { fill: rgba(0, 110, 12, 0.5); } } #lang-switch { /* rgb(199, 184, 119); */ border: 2px inset rgba(173, 151, 56, 0.68); border-radius: 0.25rem; padding: 0 0.5rem; background: inherit; position: absolute; top: 0.5rem; right: 2rem; }