actuel-inactuel/assets/dist/style.css

@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,html{scroll-behavior:smooth}body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0;font-family:Switzer-Variable,sans-serif}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}*{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}*{scroll-behavior:smooth}body{padding:var(--unit--vertical) var(--unit--horizontal);background-color:var(--color-background);color:var(--color-primary);font-family: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;background-color:var(--color-primary);color:var(--color-background);overflow:hidden;transition:all .5s ease-in-out}#header.open nav{height:100vh}#spaces{margin-left:var(--unit--horizontal)}#spaces li{margin-bottom:var(--unit--vertical)}#spaces,main{margin-top:calc(var(--unit--vertical) * 6)}#baseline{font-weight:300;margin-left:calc(var(--unit--horizontal) * 5);margin-bottom:calc(var(--unit--vertical) * 10);width:calc(var(--unit--horizontal) * 12)}section.closed{height:var(--unit--vertical)}h2.right{display:flex;justify-content:flex-end;color:var(--color-secondary)}h2.left:before,h2.right:after{display:inline-block;content:"";height:calc(var(--unit--vertical) / 2);background-color:var(--color-primary);width:calc(var(--unit--horizontal) * 1)}h2.right:after{margin-right:calc(0vw - var(--unit--horizontal));margin-left:var(--unit--horizontal);background-color:var(--color-secondary)}h2.left:before{margin-left:calc(0vw - var(--unit--horizontal));margin-right:var(--unit--horizontal)}h2.left.open:before{width:calc(var(--unit--horizontal) * 4)}.toggle-btns{display:flex;justify-content:space-between}button.toggle.open{font-weight:700}button.toggle.left:after{margin-left:var(--unit--horizontal)}button.toggle.left.close:after{content:"+"}button.toggle.left.open:after{content:"-"}button.toggle.right:before{margin-right:var(--unit--horizontal)}button.toggle.right.close:before{content:"+"}button.toggle.right.open:before{content:"-"}.content{margin-top:calc(var(--unit--vertical) * 2)}#articles{margin:0 var(--unit--horizontal)}#organize{margin-bottom:calc(var(--unit--vertical))}.article{position:relative;margin-bottom:calc(var(--unit--vertical) * 2);box-sizing:border-box}.article__infos,.article__labels{transform:translateY(calc(0rem - (var(--unit--vertical) * .1)))}.article__infos,.article__labels{display:flex}.article .label{margin-right:var(--unit--horizontal);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:6px}