* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Gotu', sans-serif;
background: #f8f8f8;
overflow: hidden;
height: 100vh;
}
.container {
position: relative;
width: 100%;
height: 100%;
} body > .main-container::after {
display: none !important;
}
#wrapper {
display: none !important;
} @media (min-width: 951px) {
html,
body {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
position: fixed;
inset: 0;
}
.container {
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
min-width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
transform: translate(-50%, -50%);
overflow: hidden;
box-sizing: border-box;
}
.page-category,
.page-projet {
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
min-width: 100vw;
min-height: 100vh;
margin: 0;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
.page-category {
overflow: hidden;
}
} .title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4em;
margin: 0;
z-index: 10;
}
.title-proj{
font-size: 3em;
line-height: 1.2;
text-align: center;
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
.title_2 {
text-align: center;
width: 100%;
position: fixed;
top: -5px;
font-weight: inherit;
text-decoration: underline;
z-index: 9999;
height: 50px;
}
.title_2 a {
text-align: center;
font-weight: inherit;
color: black;
cursor: pointer;
}
#cat-title {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%);
font-size: 1.6em;
margin: 0;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 10;
}
@media (min-width: 951px) {
.cat-title{
display: none;
}
} .bio-link,
.archives-link {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 25px;
text-decoration: none;
color: black;
z-index: 10;
}
.bio-link {
left: 2%;
}
.archives-link {
right: 5%;
} .shape {
position: absolute;
width: 38vmin;
height: 39vmin;
max-width: 460px;
max-height: 600px;
border: 3px solid black;
background: transparent;
cursor: pointer;
overflow: hidden;
will-change: transform, opacity; }
.shape-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
}
.shape:hover .shape-image {
opacity: 1;
} .home .shape-circle {
top: 4vmin;
left: 40%;
margin-left: -19vmin;
border-radius: 50%;
animation: float-circle 8s ease-in-out infinite;
overflow: hidden;
isolation: isolate;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.shape-circle .shape-image {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
} .shape-rectangle {
top: 2%;
left: calc(100% - 10vmin - 38vmin);
animation: float-rectangle 9s ease-in-out infinite;
overflow: hidden;
isolation: isolate;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
} .shape-triangle {
position: absolute;
width: 50vmin;
aspect-ratio: 100 / 87;
max-width: 520px;
background: transparent;
border: none;
left: 6vmin;
top: 55%;
animation: float-triangle 10s ease-in-out infinite;
height: auto;
isolation: isolate;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.shape-triangle img {
opacity: 0;
transition: opacity 0.4s ease;
}
.shape-triangle:hover img {
opacity: 1;
}
.triangle-frame {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.triangle-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
clip-path: polygon(
50% 4%,
96% 95.4%,
4% 95.4%
);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.triangle-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
} .home .shape-rounded-rect {
max-width: 600px;
max-height: 720px;
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
bottom: 4vmin;
left: 75%;
margin-left: -19vmin;
animation: float-rounded 11s ease-in-out infinite;
border: 3px solid black;
overflow: hidden;
isolation: isolate;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.shape-rounded-rect .shape-image {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
} @keyframes float-circle {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -10px, 0);
}
}
@keyframes float-rectangle {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(-10px, 0, 0);
}
}
@keyframes float-triangle {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -8px, 0);
}
}
@keyframes float-rounded {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, 10px, 0);
}
} @media (min-width: 951px) {
.container.home {
opacity: 0;
animation: home-fade-in 0.8s ease-out forwards;
}
.container.home > .title,
.container.home > .bio-link,
.container.home > .archives-link {
opacity: 0;
animation: home-content-in 0.8s ease-out 0.15s forwards;
}
.container.home > .shape {
opacity: 0;
visibility: hidden;
}
.container.home > .shape.shape-circle {
animation:
home-circle-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards,
float-circle 8s ease-in-out 1.25s infinite;
}
.container.home > .shape.shape-triangle {
animation:
home-triangle-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s forwards,
float-triangle 10s ease-in-out 1.35s infinite;
}
.container.home > .shape.shape-rounded-rect {
animation:
home-rounded-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.65s forwards,
float-rounded 11s ease-in-out 1.45s infinite;
}
.social-icons {
opacity: 0;
animation: home-content-in 0.8s ease-out 0.25s forwards;
}
} @media (max-width: 950px) {
.container.home > .shape.shape-circle {
animation:
shape-fade-zoom-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards,
float-circle 8s ease-in-out 0.6s infinite;
}
.container.home > .shape.shape-triangle {
animation:
shape-fade-zoom-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards,
float-triangle 10s ease-in-out 0.7s infinite;
}
.container.home > .shape.shape-rounded-rect {
animation:
shape-fade-zoom-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s forwards,
float-rounded 11s ease-in-out 0.8s infinite;
}
}
@keyframes shape-fade-zoom-in {
from {
opacity: 0;
visibility: hidden;
transform: scale(0.8);
}
to {
opacity: 1;
visibility: visible;
transform: scale(1);
}
} @keyframes home-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes home-content-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes home-circle-in {
from {
opacity: 0;
visibility: hidden;
transform: translate3d(-50px, 40px, 0) scale(0.96);
}
to {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes home-triangle-in {
from {
opacity: 0;
visibility: hidden;
transform: translate3d(45px, -35px, 0) scale(0.96);
}
to {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes home-rounded-in {
from {
opacity: 0;
visibility: hidden;
transform: translate3d(-45px, -35px, 0) scale(0.96);
}
to {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
}
} @media (prefers-reduced-motion: reduce) {
.container.home,
.container.home > .title,
.container.home > .bio-link,
.container.home > .archives-link,
.container.home > .shape,
.social-icons {
opacity: 1;
animation: none !important;
transform: none !important;
}
} .social-icons {
position: fixed;
right: 25px;
top: 50%;
transform: translateY(-50%);
z-index: 9;
}
.pictos {
display: flex;
flex-direction: column;
align-items: center;
}
.pictos .icon {
width: 20px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #000 !important;
text-decoration: none;
}
.pictos .icon i {
font-size: 25px !important;
color: #000 !important;
transition: transform 0.2s ease;
}
.pictos .icon:hover i {
transform: scale(1.15);
} .page-category {
position: relative;
width: 100vw;
min-height: 100vh;
height: auto;
overflow-x: hidden;
overflow-y: visible;
padding: 0;
}
.page-category .floating-shape {
position: fixed;
left: 50%;
top: 38%;
transform: translateX(-50%);
z-index: 5;
animation: floatVertical 5s ease-in-out infinite;
}
.page-category .shape-rounded-rect {
position: absolute;
top: 38%;
left: 50%;
width: 6vmin;
height: 6vmin;
max-width: 600px;
max-height: 720px;
border: 3px solid black;
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
transform: translateX(-50%);
animation: floatVertical 7s ease-in-out infinite;
}
.page-category .floating-shape.square {
width: 35px;
height: 35px;
margin-top: 20px;
border: 3px solid black;
background-color: transparent;
}
.page-category .shape-circle {
position: absolute;
width: 44px;
height: 43px;
border: 3px solid black;
border-radius: 50%;
}
.page-category .shape-rectangle {
position: relative;
width: 40px;
height: 40px;
border: 3px solid black;
animation: floatVertical 3s ease-in-out infinite;
}
.page-category .shape-triangle svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.page-category .shape-rounded-rect .shape-image {
border-radius: inherit;
}
.category-dessin .floating-shape.triangle {
animation: rotateTriangle 6s linear infinite;
}
.page-category .title {
top: 50%;
}
@keyframes floatVertical {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(8px);
}
}
@keyframes rotateTriangle {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} .page-category .shapes-orbit {
opacity: 0;
transition: opacity 2.5s ease;
}
.page-category .link-proj {
position: absolute;
display: block;
margin: 0;
padding: 0;
border: 3px solid black;
background: transparent;
text-decoration: none;
overflow: hidden;
box-sizing: border-box;
z-index: 50;
pointer-events: auto;
opacity: 0;
visibility: hidden;
animation: category-float 8s ease-in-out infinite;
transition:
opacity 2s ease,
transform 0.35s ease;
}
.page-category .link-proj .proj-frame {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
box-sizing: border-box;
}
.page-category .link-proj .shape-border {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: cover;
border: 0;
box-sizing: border-box;
transition: transform 0.35s ease;
}
.page-category .link-proj .infos,
.page-category .link-proj .info,
.page-category .link-proj .cat-title {
display: none !important;
}
.page-category .link-proj .proj-title-mobile {
display: none;
} .page-category .link-proj:hover .shape-border {
transform: scale(1.06);
} .page-category .link-proj:nth-child(2) {
animation-duration: 10s;
animation-delay: -3s;
}
@keyframes category-float {
0%,
100% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(5px, -8px, 0);
}
50% {
transform: translate3d(-4px, 5px, 0);
}
75% {
transform: translate3d(3px, 8px, 0);
}
} .page-category #proj-title {
position: fixed;
display: inline-block;
max-width: 240px;
padding: 6px 14px;
border: 3px solid black;
background: #f8f8f8;
color: black;
font-family: 'Gotu', sans-serif;
font-size: 18px;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
z-index: 999;
transition: opacity 0.3s ease;
} @media (min-width: 951px) {
.page-category {
width: 100vw;
height: 100vh;
min-height: 100vh;
overflow: hidden;
}
.page-category .shapes-orbit {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.page-category .shape-triangle {
top: 37% !important;
width: 50px;
}
.page-category .shape-rectangle {
top: 35% !important;
}
.page-category .shape .cat-title {
display: none;
}
.page-category .link-proj {
width: auto;
height: auto;
overflow: hidden;
}
.page-category .link-proj .proj-frame {
width: 100%;
height: 100%;
}
.page-category .link-proj img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
}
.page-category .link-proj:hover .cat-title {
display: block !important;
}
.page-category .title {
position: fixed !important;
top: 50% !important;
left: 50% !important;
width: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
z-index: 100 !important;
pointer-events: none !important;
}
} @media (max-width: 950px) {
.page-category {
width: 100vw;
min-height: 100vh;
height: auto;
overflow-x: hidden;
overflow-y: visible;
}
.page-category .link-proj {
overflow: hidden;
}
.page-category .link-proj:hover .shape-border {
transform: scale(1.04);
}
.page-category .shapes-orbit {
position: relative;
width: 100%;
min-height: 100vh;
height: auto;
overflow: visible;
pointer-events: none;
}
} .title-single{
font-size: 2em;
line-height: 1.2;
text-align: left;
position: absolute;
top: 2%;
left: 2%;
margin: 0;
width: 350px;}
#proj-title{
margin: 0;
}
.container .page-projet {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.page-projet . title{
font-size: 3em !important;
}
.content-proj {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.page-projet .shape-circle {
top: 40%;
border: 3px solid black;
position: fixed;
width: 60px;
height: 60px;
}
.img-proj,
.txt-proj {
max-width: 500px;
}
.txt-proj p {
padding: 5%;
line-height: 1.5;
}
.img-proj img {
max-width: 100%;
}
.page-projet .shape-circle {
border: 3px solid black;
border-radius: 50%;
position: absolute;
width: 44px;
height: 43px;
left: 3.8vw;
animation: floatVertical 3s ease-in-out infinite;
}
.page-projet .shape-rectangle {
border: 3px solid black;
position: relative;
top: 0%;
left: 5%;
width: 40px;
height: 40px;
animation: floatVertical 3s ease-in-out infinite;
}
.page-projet .shape-triangle {
top: 40%;
left: 1.5vw;
width: 50px;
height: 50px;
aspect-ratio: 100 / 86.6;
}
.page-projet .shape-triangle svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.page-projet .shape-rounded-rect {
width: 6vmin;
height: 6.5vmin;
max-width: 600px;
max-height: 720px;
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
top: 39%;
left: 3.8vw;
position: absolute;
transform: translateX(-50%);
animation: floatVertical 3s ease-in-out infinite;
border: 3px black solid;
}
.page-projet .shape-rounded-rect .shape-image {
border-radius: inherit;
}
.page-projet .link-proj {
opacity: 0;
overflow: hidden;
transform: translateY(10px);
transition: opacity 0.6s ease, transform 0.6s ease;
position: absolute;
display: block;
}
.page-projet .link-proj.is-ready {
opacity: 1;
transform: translateY(0);
}
.page-loaded .link-proj {
opacity: 1;
transform: translateY(0);
}
.page-projet .shapes-orbit {
position: relative;
z-index: 4;
width: 100%;
height: 100vh;
}
.page-projet .content-proj {
pointer-events: auto;
}
.page-projet .img-proj,
.page-projet .txt-proj {
position: absolute;
cursor: pointer;
will-change: transform;
}
.page-projet .txt-proj {
max-width: 500px;
pointer-events: none;
}
.page-projet .txt-proj p {
margin: 0;
}
#txt-projet-full {
position: absolute;
top: calc(50% + 30px);
left: 50%;
transform: translateX(-50%);
max-width: 675px;
width: 100%;
text-align: center;
line-height: 1.5;
font-size: 14px;
z-index: 10;
}
.page-projet .link-proj img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border: 3px solid black;
box-sizing: border-box;
}
.page-projet .link-proj:hover img {
transform: scale(1.05);
}
blockquote{
margin: 0;
} html.gallery-html-lock,
body.gallery-open {
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
}
body.gallery-open {
position: fixed !important;
left: 0 !important;
top: 0 !important;
overscroll-behavior: none !important;
touch-action: none !important;
} #panel-overlay {
display: none !important;
} #project-panel {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
background: transparent !important;
z-index: 10000 !important;
box-sizing: border-box !important;
touch-action: none !important;
} #project-panel::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.88);
z-index: 0;
pointer-events: none;
}
#project-panel .panel-image {
position: absolute !important;
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
box-sizing: border-box !important;
touch-action: none !important;
z-index: 1 !important;
}
#project-panel .gallery-full-image {
display: block !important;
width: auto !important;
height: auto !important;
max-width: calc(100vw - 180px) !important;
max-height: calc(100vh - 120px) !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
object-fit: contain !important;
object-position: center center !important;
box-sizing: border-box !important;
user-select: none !important;
-webkit-user-drag: none !important;
pointer-events: none !important;
opacity: 1 !important;
}
#project-panel .gallery-full-image.gallery-fade {
animation: galleryImageFade 1s ease-in-out forwards !important;
}
@keyframes galleryImageFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
} #project-panel .panel-prev,
#project-panel .panel-next {
position: fixed !important;
top: 50% !important;
width: 70px !important;
height: 100px !important;
margin: 0 !important;
padding: 0 !important;
transform: translateY(-50%) !important;
border: 0 !important;
background: transparent !important;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
cursor: pointer !important;
z-index: 10003 !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important;
touch-action: manipulation !important;
}
#project-panel .panel-prev {
left: 15px !important;
}
#project-panel .panel-next {
right: 15px !important;
}
#project-panel .panel-prev span,
#project-panel .panel-next span {
position: absolute !important;
top: 50% !important;
width: 38px !important;
height: 4px !important;
background: #000 !important;
transform: translateY(-50%) !important;
transition: width .25s ease !important;
}
#project-panel .panel-prev span {
left: 14px !important;
}
#project-panel .panel-next span {
right: 14px !important;
}
#project-panel .panel-prev span::before,
#project-panel .panel-prev span::after,
#project-panel .panel-next span::before,
#project-panel .panel-next span::after {
content: "" !important;
position: absolute !important;
width: 18px !important;
height: 4px !important;
background: #000 !important;
}
#project-panel .panel-prev span::before {
top: 1px !important;
left: 0 !important;
transform-origin: left center !important;
transform: rotate(-45deg) !important;
}
#project-panel .panel-prev span::after {
top: -1px !important;
left: 0 !important;
transform-origin: left center !important;
transform: rotate(45deg) !important;
}
#project-panel .panel-next span::before {
top: 1px !important;
right: 0 !important;
transform-origin: right center !important;
transform: rotate(45deg) !important;
}
#project-panel .panel-next span::after {
top: -1px !important;
right: 0 !important;
transform-origin: right center !important;
transform: rotate(-45deg) !important;
}
#project-panel .panel-prev:hover span,
#project-panel .panel-next:hover span {
width: 44px !important;
} #project-panel .panel-close {
position: fixed !important;
top: 24px !important;
right: 24px !important;
width: 58px !important;
height: 58px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
color: #000 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 38px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 10004 !important;
box-sizing: border-box !important;
appearance: none !important;
-webkit-appearance: none !important;
transition: transform 0.15s ease !important;
touch-action: manipulation !important;
}
#project-panel .panel-close:hover {
transform: rotate(90deg) !important;
} #project-panel .panel-text {
position: fixed !important;
left: 50% !important;
bottom: 10px !important;
transform: translateX(-50%) !important;
width: auto !important;
max-width: calc(100vw - 180px) !important;
margin: 0 !important;
padding: 8px 14px !important;
background: #fff !important;
color: #000 !important;
border: 3px solid #000 !important;
box-sizing: border-box !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
line-height: 1.25 !important;
text-align: center !important;
z-index: 10002 !important;
} @media (max-width: 950px) {
#project-panel::before {
background: rgba(255,255,255,0.92);
}
#project-panel .gallery-full-image {
max-width: calc(100vw - 70px) !important;
max-height: calc(100vh - 150px) !important;
} #project-panel .panel-prev,
#project-panel .panel-next {
width: 50px !important;
height: 80px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
#project-panel .panel-prev {
left: 3px !important;
}
#project-panel .panel-next {
right: 3px !important;
}
#project-panel .panel-prev span,
#project-panel .panel-next span {
width: 30px !important;
height: 4px !important;
top: 50% !important;
}
#project-panel .panel-prev span {
left: 7px !important;
}
#project-panel .panel-next span {
right: 7px !important;
}
#project-panel .panel-prev span::before,
#project-panel .panel-prev span::after,
#project-panel .panel-next span::before,
#project-panel .panel-next span::after {
width: 15px !important;
height: 4px !important;
}
#project-panel .panel-prev span::before {
top: 1px !important;
left: 0 !important;
}
#project-panel .panel-prev span::after {
top: -1px !important;
left: 0 !important;
}
#project-panel .panel-next span::before {
top: 1px !important;
right: 0 !important;
}
#project-panel .panel-next span::after {
top: -1px !important;
right: 0 !important;
}
#project-panel .panel-prev:hover span,
#project-panel .panel-next:hover span {
width: 30px !important;
}
#project-panel .panel-close {
top: 10px !important;
right: 10px !important;
width: 48px !important;
height: 48px !important;
font-size: 32px !important;
}
#project-panel .panel-text {
bottom: 10px !important;
max-width: calc(100vw - 100px) !important;
font-size: 13px !important;
}
} .back {
position: absolute;
bottom: 15px;
left: 50%;
color: black;
font-size: 18px;
z-index: 4;
}
.back-single {
bottom: 35px !important;
}
.back a {
color: black;
padding: 10px;
text-decoration: none;
}
@media (min-width: 950px) {
.back {
transform: translate(-50%, -50%) !important;
}
} .page-bio {
padding: 15px;
overflow-y: scroll;
line-height: 1.3;
min-height: 100vh;
}
.page-bio .title {
position: fixed;
font-size: 2em;
margin: 0;
top: 35px;
z-index: 100;
left: 40px;
}
#bio{
width: 100%;
display: block;
float: left;
padding-top: 10px;
}
#cv{
width: 100%;
display: block;
float: left;
border-top: 3px solid;
padding-top: 30px;
}
@media (min-width: 950px) {
.bio-article {
margin-top: 40px;
width: 50%;
float: left;
}
.bio-article img{
width: 100%;
height: auto;
}
.bio-article p{
font-size: 1.9vw;
text-align: left;
line-height: 1.2;
padding: 8px 40px 0px 0px;
}
.bio-excerpt {
line-height: 1.3;
}
.three-columns {
column-count: 3;
column-gap: 60px;
}
.page-bio .title_2 {
border-bottom: 3px solid black;
max-width: 98%;
}
.home-bio {
position: fixed;
font-size: 1.5em;
margin: 0;
top: 15px;
z-index: 100;
right: 3%;
color: black;
}
.page-category .link-proj .proj-frame {
display: contents;
}
.page-category .proj-title-mobile {
display: none;
}
} @media (max-width: 950px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.container {
padding: 20px;
height: auto;
min-height: 100vh;
overflow-x: hidden;
box-sizing: border-box;
}
.container,
.page-category,
.page-projet {
position: relative;
width: 100vw;
min-height: 100vh;
margin: 0 auto;
box-sizing: border-box;
} .title {
position: relative;
top: 5px !important;
left: 50%;
transform: translateX(-50%);
font-size: 2em;
text-align: center;
width: 100%;
}
.title_2 {
top: 5px;
font-size: 15px;
}
#cat-title,
.page-category #proj-title {
display: none;
} .bio-link {
position: fixed;
top: 10px;
left: 20px;
transform: none;
}
.archives-link {
position: fixed;
bottom: 20px;
right: 20px;
top: auto;
transform: none;
z-index: 10;
}
.title_2 {
z-index: 1;
margin: 15px -60px;
} .social-icons {
position: fixed;
top: 25px;
right: 25px;
bottom: auto;
left: auto;
transform: none;
z-index: 9999;
}
.pictos {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: auto;
position: static;
}
.pictos .icon {
width: 30px;
height: 30px;
}
.pictos .icon i {
font-size: 25px !important;
} .back {
position: fixed;
bottom: 20px;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
box-sizing: border-box;
z-index: 150;
}
.back a {
position: static;
color: black;
font-size: 16px;
transform: none;
} .container.home {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
padding: 0;
}
.home .title {
position: fixed !important;
top: 40% !important;
right: 0%;
left: 50%;
width: 50%;
transform: none !important;
margin: 0 !important;
padding: 10px 20px;
background: transparent;
text-align: right;
font-size: 2em;
line-height: 1.2em;
}
.home .cat-title {
text-align: center;
color: black;
text-decoration: unset;
font-style: oblique;
position: absolute;
width: 100%;
top: 55%;
}
.home .cat-title a{
text-align: center;
color: black;
text-decoration: unset;
font-style: oblique;
}
.home .shape{
display: flex;
flex-direction: column-reverse;
}
@keyframes shape-fade-zoom-in {
from {
opacity: 0;
visibility: hidden;
transform: scale(0.8);
}
to {
opacity: 1;
visibility: visible;
transform: scale(1);
}
}
.home .shapes-orbit {
position: fixed !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
pointer-events: none;
}
.container.home .shapes-orbit .shape {
position: absolute !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-sizing: border-box !important;
border: none !important;
overflow: visible !important;
background: transparent !important;
pointer-events: auto;
text-decoration: none;
opacity: 0;
transition: opacity 0.6s ease;
max-width: none !important;
max-height: none !important;
}
.container.home .shapes-orbit .shape.shape-ready {
opacity: 1;
} .container.home .shapes-orbit .shape-frame {
display: block;
width: 100%;
height: 100%;
border: 3px solid black;
overflow: hidden;
box-sizing: border-box;
order: 1;
}
.container.home .shapes-orbit .shape-circle .shape-frame {
border-radius: 50%;
}
.container.home .shapes-orbit .shape-rounded-rect .shape-frame {
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
} .container.home .shapes-orbit .shape-image,
.container.home .shapes-orbit .shape-triangle image {
position: static !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 1 !important;
transition: none !important;
}
.container.home .shapes-orbit .triangle-svg {
display: block;
width: 100%;
height: 100%;
}
.home .shape-circle {
animation: floatVertical 3s ease-in-out infinite;
left: 35%;
top: 5%;
width: 200px;
height: 200px;
}
.home .shape-rounded-rect {
animation: floatVertical 3.4s ease-in-out infinite;
width: 200px;
height: 200px;
bottom: 12vmin;
left: 55%;
}
.home .shape-triangle {
animation: floatVertical 3.8s ease-in-out infinite;
top: 35%;
width: 223px;
left: 5%;
} .container.home .shapes-orbit .shape .cat-title {
display: block !important;
position: static !important;
order: 2;
margin: 8px 0 0 !important;
width: 100%;
font-size: 15px;
line-height: 1.25;
text-align: center;
color: black;
font-weight: 600;
} .page-category {
position: relative;
width: 100vw;
min-height: 100vh;
height: auto;
overflow-x: hidden;
overflow-y: visible;
padding: 0;
} .page-category .bio-link {
position: fixed !important;
top: 18px !important;
left: 20px !important;
z-index: 150 !important;
transform: none !important;
}
.page-category .title_2 {
position: fixed !important;
top: 25px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10 !important;
margin: 0 !important;
font-size: 15px !important;
}
.page-category .social-icons {
position: fixed !important;
top: 25px !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
z-index: 150 !important;
} .page-category .floating-shape {
left: 50%;
top: 10px;
position: relative;
}
.page-category .shapes-orbit{
margin-top: 25px;
}
.page-category .shape-rounded-rect {
width: 10vmin;
height: 11vmin;
max-width: 600px;
max-height: 720px;
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
position: fixed !important;
top: 47% !important;
left: 35px !important;
transform: translateX(-50%);
animation: float-bottom 7s ease-in-out infinite;
border: 3px solid black;
}
@keyframes float-bottom {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-7px);
}
}
.page-category .shape-circle {
position: fixed !important;
top: 47% !important;
left: 35px !important;
width: 44px !important;
height: 43px !important;
border: 3px solid black !important;
border-radius: 50% !important;
transform: translateX(-50%) translateY(0);
animation: radio-circle-float 3.5s ease-in-out infinite !important;
}
@keyframes radio-circle-float {
0%, 100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-7px);
}
}
.page-category .floating-shape.shape-triangle {
position: fixed !important;
top: 50% !important;
left: 20px !important;
width: 55px !important;
height: 57px !important;
z-index: 20 !important;
pointer-events: none !important;
transform: translateY(-50%) !important;
}
.page-category .triangle-floating-svg {
display: block !important;
width: 100% !important;
height: 100% !important;
animation: floating-triangle 4s ease-in-out infinite !important;
}
@keyframes floating-triangle {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
} .bio {
overflow-y: scroll;
}
#bio { height: 100vh;
margin-bottom: 80px;
margin-top: 80px;
border-top: 3px solid;
}
#bio-left {
font-size: 2em;
line-height: 1.1;
}
#bio-right {
font-size: 0.9em;
}
.bio-title {
position: absolute;
top: 3%;
left: 50%;
transform: translateX(-50%);
font-size: 3em;
text-align: center;
width: 100%;
}
#bio img{
width: 100%;
height: 100%;
}
.high-link {
position: absolute;
top: 1%;
}
.left {
left: 5%;
}
.right {
right: 5%;
}
.bio-article.three-columns {
column-count: 1;
}
.page-bio .title {
position: relative;
top: -6px !important;
font-size: 2em;
margin: 0;
z-index: 1;
}
.page-bio {
padding: 25px;
overflow-y: scroll;
line-height: 1.3;
min-height: 100vh;
}
.page-bio .title_2 {
top: 13px !important;
background: transparent;
border-bottom: none;
z-index: 2;
} .container.home > .shape {
position: fixed;
}
.shape {
opacity: 1;
visibility: inherit;
}
.shape-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
}
.shape:hover .shape-image {
opacity: 1;
}  .title-single {
font-size: 2em;
line-height: 1.2;
text-align: left;
position: absolute;
margin-top: 85px;
float: left;
text-align: center;
}
.page-projet .shape-triangle {
top: 8vh;
width: 40px;
left: 45%;
height: 40px;
}
.page-projet .shape-rectangle {
border: 3px solid black;
position: relative;
top: -2% !important;
width: 30px;
height: 30px;
animation: floatVertical 3s ease-in-out infinite;
}
.txt-proj p {
padding: 0;
line-height: 1.5;
}
#proj-title {
display: none !important;
}
.page-projet .shape-circle {
position: relative;
top: 4vh;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 43px;
border: 3px solid black;
border-radius: 50%;
animation: floatVertical 3s ease-in-out infinite;
z-index: 5;
}
.page-projet .shapes-orbit {
width: 100%;
padding-bottom: 120px;
margin-top: 5vh;
float: left;
}
.page-projet .shape-rounded-rect {
width: 10vmin;
height: 10vmin;
max-width: 600px;
max-height: 720px;
border-radius: 100% 100% 0 0 / 100% 100% 0 0;
top: 10vh;
left: 50%;
}
.page-projet .link-proj {
position: absolute;
width: 80%;
height: auto;
animation: none !important;
}
.page-projet .link-proj img {
width: 100%;
height: 100%;
object-fit: contain;
border: 3px solid black;
}
.page-projet .content-proj {
position: relative;
padding: 5%;
height: auto;
min-height: 100%;
box-sizing: border-box;
}
#txt-projet-full {
top: 15px;
position: relative;
}
.container.page-projet {
height: auto;
min-height: 100vh;
overflow-y: auto;
height: auto;
}
.page-projet .title {
position: relative;
font-size: 2em;
width: 100%;
line-height: 1.1;
}
.single-text-block{
max-width: 90%;
}
.entry-content iframe[src*="mixcloud"],
.entry-content iframe[src*="soundcloud"],
.entry-content iframe[src*="bandcamp"] {
width: 290px !important;
max-width: 100% !important;
height: 126px !important;
} .project-panel {
width: 100%;
height: 100vh;
transform: translateY(100%);
}
.project-panel.open {
transform: translateY(0);
}
.panel-overlay {
cursor: auto;
}
.panel-image {
margin-top: 30px;
}
.panel-image img {
width: 100%;
height: auto;
display: block;
} .home-bio {
display: block;
position: fixed;
top: 20px;
left: 15px;
color: black;
}
.home {
position: fixed !important;
top: 0;
left: 0;
width: 100% !important;
max-width: 100% !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box;
}
.home .shapes-orbit {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
}