2024-01-26 11:03:42 +01:00
|
|
|
@font-face{font-family:Switzer-Variable;src:url(/assets/fonts/Switzer-Variable.woff2) format("woff2"),url(/assets/fonts/Switzer-Variable.woff) format("woff"),url(/assets/fonts/Switzer-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap;font-style:normal}body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0}button{background:none;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}a,button{color:inherit}a{text-decoration:none}li{list-style-type:none}body,html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1);border-radius:0;border:none}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary:rgba(120,171,150,.86);--color-secondary--light:rgba(119,177,157,.25);--color-secondary--x-light:rgba(119,177,157,.15);--unit--horizontal:5vw;--unit--vertical:1.3rem;--font-size-m:1.2rem}*{font-family:Switzer-Variable,sans-serif}.hidden{display:none}.grid{background-size:var(--unit--horizontal) var(--unit--vertical);background-image:linear-gradient(90deg,var(--color-secondary--x-light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--light) 1px,transparent 0),linear-gradient(180deg,var(--color-secondary--x-light) 1px,transparent 0);background-position:0 0,0 0,0 calc(var(--unit--vertical) / 2);background-attachment:fixed}hr{height:calc(var(--unit--vertical) / 2);border:none;background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 4);margin:calc(var(--unit--vertical) * 2) calc(var(--unit--horizontal))}hr.center{width:calc(100% - (var(--unit--horizontal) * 2))}nav hr{background-color:var(--color-background);margin-left:0}h1{font-size:25vw;line-height:4rem;transform:translate(-2px,-13px);font-weight:550}#baseline,button,li,p{transform:translateY(calc(var(--unit--vertical) * .12));font-weight:lighter;font-size:var(--font-size-m);line-height:calc(var(--unit--vertical))}p{transform:translateY(3px)}button{display:flex;align-items:center}article p{margin-bottom:var(--unit--vertical)}#header{position:fixed;z-index:1;top:0;left:0;box-sizing:border-box;width:100%;height:calc(var(--unit--vertical) * 5);padding:var(--unit--vertical) var(--unit--horizontal);transition:height .2s ease-in-out}#header.minimized{height:calc(var(--unit--vertical) * 3)}#logo,#logo-nav{position:relative}#logo-nav{margin-top:var(--unit--vertical);margin-left:var(--unit--horizontal)}#header.open #actuel{color:var(--color-background)}#logo #actuel,#logo-nav #actuel-nav{color:var(--color-primary--transparent);position:relative;z-index:1;margin-left:calc(var(--unit--horizontal) * 2)}#logo #inactuel,#logo-nav #inactuel-nav{position:absolute;z-index:0;color:var(--color-secondary);bottom:-48%;transition:bottom .2s ease-in-out}#header.minimized #logo #inactuel,#header.minimized #logo-nav #inactuel-nav{bottom:0}#nav-btn{z-index:3;position:absolute;top:var(--unit--vertical);right:var(--unit--horizontal);width:calc(var(--unit--horizontal) * 2);height:var(--unit--vertical);display:flex;justify-content:center}#nav-btn .line-center,#nav-btn .line-down,#nav-btn .line-up{position:absolute;height:2px;background-color:var(--color-primary);transition:all .3s ease-in-out}#header.open .line-center,#header.open .line-down,#header.open .line-up{background-color:var(--color-background)}#nav-btn .line-up{width:var(--unit--horizontal);transform:translateY(calc(0rem - (var(--unit--vertical) / 3))) rotate(0deg)}#nav-btn .line-center{height:4px;width:calc(var(--unit--horizontal) * 2)}#nav-btn .line-down{width:var(--unit--horizontal);transform:translateY(calc(var(--unit--vertical) / 3)) rotate(0deg)}#nav-btn.open .line-up{transform:translateY(0) rotate(90deg);width:calc(var(--unit--horizontal) * 2)}#nav-btn.open .line-center{height:2px}#nav-btn.open .line-down{transform:translateY(0) rotate(-45deg);width:calc(var(--unit--vertical) * 2)}nav{position:fixed;z-index:2;top:0;left:0;width:100vw;height:0;b
|
