1 line
No EOL
14 KiB
CSS
1 line
No EOL
14 KiB
CSS
body,h1,h2,h3,h4,h5,html,p,ul{margin:0;padding:0}button{all:unset;cursor:pointer}a{text-decoration:none;color:inherit}a:focus-visible{outline:none}li{list-style-type:none}body{position:relative;margin:0;background-color:var(--color-background);color:var(--color-primary);overflow-x:clip}main{padding:0 var(--unit--horizontal);padding-bottom:calc(2 * var(--unit--vertical))!important}[data-template=info] main{margin-top:calc(var(--unit--vertical) * 2)}hr{height:1px;border:none;background-color:var(--color-primary)}nav hr{background-color:var(--color-background);margin-left:0}input[type=text]:focus-visible{outline:none}body,html{scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.25) transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.25);border-radius:0;border:none}@media screen and (min-width:640px){body.full-width{--padding-body:calc(var(--unit--horizontal) * 10)}body{padding-left:var(--padding-body)!important;box-sizing:content-box}main{padding:0 var(--body-padding)}}.hidden{display:none}.no-scroll{overflow:hidden!important}body{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}.left:not(.padding){margin-left:calc(var(--unit--horizontal) * var(--left))}.padding.left{padding-left:calc(var(--unit--horizontal) * var(--left))}.top:not(.padding){margin-top:calc(var(--unit--vertical) * var(--top))}.padding.top{padding-top:calc(var(--unit--vertical) * var(--top))}.right:not(.padding){margin-right:calc(var(--unit--horizontal) * var(--right))}.padding.right{padding-right:calc(var(--unit--horizontal) * var(--right))}.bottom:not(.padding){margin-bottom:calc(var(--unit--vertical) * var(--bottom))}.padding.bottom{padding-bottom:calc(var(--unit--vertical) * var(--bottom))}.full-width{width:100%}.width{width:calc(var(--unit--horizontal) * var(--width))}.flex{display:flex;justify-content:var(--content);align-items:var(--align);gap:calc(var(--gap) * var(--unit--horizontal))}.flex.column{flex-direction:column}.light{opacity:var(--opacity-light)}.color{color:var(--color)}.opacity{opacity:var(--opacity)}.toggle-btn--left:after,button.plus:after{margin-left:var(--unit--horizontal);content:"+"}.toggle-btn--left.open:after{content:"-"}.toggle-btn--right:before{margin-right:var(--unit--horizontal);content:"+"}.toggle-btn--right.open:before{content:"-"}.transition{transition:all .5s var(--curve-sine)}@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}.accent{color:var(--color-secondary);font-weight:400}*{font-family:Switzer-Variable,sans-serif}h1,h1 *,h2,h2 *,h3,h3 *,h4,h4 *,h5,h5 *,p,p *{font-weight:var(--font-weight-light);line-height:1}.h3,h2,h3{font-size:var(--font-size-xl)}.h3,h3{color:var(--color-primary)}article h2{margin-bottom:calc(var(--unit--vertical) / 2)}.title-center{--margin-left:calc(3 * var(--unit--horizontal));width:calc(100% - var(--margin-left));margin-left:var(--margin-left);line-height:var(--unit--vertical)}.title-center,.title-center h2{font-size:var(--font-size-l)}.main-title{line-height:calc(var(--unit--vertical) * 2);text-align:left;box-sizing:border-box;font-weight:var(--font-weight-light);margin-bottom:var(--unit--vertical)}.text__title{font-size:var(--font-size-l)}.fs-m,button,li,p{transform:translateY(calc(var(--unit--vertical) * .12));font-size:var(--font-size-m);line-height:calc(var(--unit--vertical))}.fs-s{font-size:var(--font-size-s)!important}.fs-m{font-size:var(--font-size-m)!important}.fs-l{font-size:var(--font-size-l)!important;line-height:var(--unit--vertical)}.fs-xl{font-size:var(--font-size-xl)!important;line-height:calc(var(--unit--vertical) * 1.5)!important}.fs-xxl{font-size:var(--font-size-xxl)!important;line-height:calc(var(--unit--vertical) * 2.5)!important}.fw-light,button,li,p{font-weight:var(--font-weight-light)}.fw-bold{font-weight:var(--font-weight-bold)}.fw-extra-bold{font-weight:var(--font-weight-extra-bold)}.f-inherit{font-size:inherit;line-height:inherit;font-weight:inherit}.ta-center{text-align:center}p{transform:translateY(3px)}input{font-size:var(--font-size-s);font-weight:var(--font-weight-light)}button{display:flex;align-items:center}a *{transition:font .2s ease-in-out}a.no-underline.text__title:hover *{text-decoration:underline;text-decoration-color:inherit;text-decoration-line:underline;text-underline-offset:.2rem;text-decoration-thickness:.5px}a:not(.no-underline):hover{text-decoration:none}a:not(.no-underline){text-decoration:underline;text-decoration-color:inherit;text-decoration-line:underline;text-underline-offset:.2rem;text-decoration-thickness:.5px}article p:not(:last-child){margin-bottom:var(--unit--vertical)}.footnote,.footnote *{scroll-margin-block-start:calc(var(--unit--vertical) * 6);color:var(--color-secondary);text-decoration:none!important;font-weight:var(--font-weight-bold)!important}@media screen and (min-width:640px){.title-center{margin-left:calc(2 * var(--unit--horizontal))}}main{pointer-events:none}.page-cover>*,main article{pointer-events:all}#main-header{position:fixed;box-sizing:border-box;width:100vw;padding-top:calc(var(--unit--vertical) / 2)}#logo *{font-size:25.3vw;font-weight:var(--font-weight-extra-bold)}#logo span{height:20vw;width:100%;box-sizing:border-box;padding-right:3vw;display:flex;justify-content:flex-end;align-items:center}#logo{text-align:right}#logo #actuel,#logo #inactuel{mix-blend-mode:difference}#logo #inactuel{transition:margin-top .3s ease-in-out,transform .3s ease-in-out}#main-header.minimized #inactuel{margin-top:-20vw;transform:translateX(-1px) translateY(-1px)}#main-header.minimized #inactuel:not([data-template=home] *){transform:translateX(-1px) translateY(-1px)!important}.page-cover{position:relative;height:100svh;box-sizing:border-box;padding-top:calc(var(--unit--vertical-relative) * 7);display:flex;flex-direction:column}.page-cover .text-wrapper{height:100%;overflow:auto}button.toggle.left:after,button.toggle.right:before{transition:all .5s var(--curve-sine);content:"+"}.page-cover .links{position:absolute;bottom:8px;padding-left:calc(5rem + var(--unit--horizontal));width:100%;box-sizing:border-box}.page-cover .links li{display:inline-block;margin-right:var(--unit--horizontal)}@media screen and (min-width:640px){body:not([data-template=home]) #main-header{width:var(--body-padding)}#logo *{font-size:26.65vw}#logo span{padding-right:1vw}body:not([data-template=home]) #logo *{font-size:6vw}body:not([data-template=home]) #logo span{height:5vw}body:not([data-template=home]) #main-header.minimized #inactuel{margin-top:-4.9vw;transform:translateX(-2px) translateY(-2px)}.page-cover:not([data-template=author] .page-cover,[data-template=year] .page-cover,[data-template=category] .page-cover){height:100vh;padding:calc(10 * var(--unit--vertical)) 0;padding-top:calc(var(--unit--vertical) * 8)}[data-template=home] .page-cover{padding-top:42.5vw!important}[data-template=author] .page-cover,[data-template=category] .page-cover,[data-template=year] .page-cover{height:auto}.page-cover .links{display:none}}button.open-nav{display:inline-block}#nav-overlay{position:fixed;inset:0;background-color:#000;opacity:.7;z-index:2;cursor:w-resize}#nav-overlay:not(.nav-overlay--visible),.panel{display:none}.panel{position:fixed;overflow:auto;width:100vw;height:100dvh;top:0;background-color:#000;outline:1px solid #fff;transition:all .5s var(--curve-sine);z-index:3;box-sizing:border-box;flex-direction:column}.panel.panel--visible{display:flex}.panel header{position:sticky;top:0;z-index:1;background-color:#000;padding:var(--unit--vertical) var(--unit--horizontal);padding-bottom:0}.sort-btns{box-sizing:border-box}.sort-btns button{all:unset;cursor:pointer;display:inline-block;margin-right:2vw}.sort-btns button.active,.sort-btns button:hover{text-decoration:underline;text-underline-offset:4px}.search{position:relative;width:100%;margin-top:var(--unit--vertical);background-color:#000;z-index:1;top:0;box-sizing:border-box}.search__input{all:unset;width:100%;background-color:transparent;padding:calc(var(--unit--vertical) / 4) 0;border:none;border-bottom:1px solid #fff;color:#fff;font-size:var(--font-size-m);font-weight:var(--font-weight-light)}.search__input::placeholder{font-size:var(--font-size-sm);letter-spacing:1px}.search__icon{all:unset;position:absolute;width:1.2rem;height:1.2rem;padding:.5rem;right:0;transform:translateX(.5rem) translateY(.2rem)}button.search__icon{cursor:pointer}.panel__collection{scroll-behavior:smooth;height:100%;overflow:auto;padding:var(--unit--vertical) var(--unit--horizontal)}.panel-close{position:fixed;box-sizing:border-box;bottom:0;justify-content:center;width:100%;outline:none;border-top:1px solid #fff;font-size:var(--font-size-m);background-color:#000;padding:calc(var(--unit--vertical) / 2) var(--unit--horizontal);margin-bottom:env(safe-area-inset-bottom)}.panel__toggle-btn{width:100%;display:flex;justify-content:space-between;margin-bottom:var(--unit--vertical)}.panel__toggle-icon{color:var(--color-secondary);font-size:var(--font-size-xl)}.panel-item-content__edito{margin-bottom:calc(var(--unit--vertical) / 2)}.panel-item-content__edito.short{display:-webkit-box;-webkit-line-clamp:5;overflow:hidden}button.see-more{margin-bottom:var(--unit--vertical)}.panel-item-content__texts:not(.panel__collection .panel-item-content__texts){padding:var(--unit--vertical) var(--unit--horizontal)}.text{margin-bottom:var(--unit--vertical)}@media screen and (min-width:640px){nav.panel{width:40rem}.panel{z-index:4;width:var(--padding-body)}.panel-close{display:none}.panel--right{right:auto;left:calc(-100vw - 1px)}.panel--right.open{left:0}}article #main-content{max-width:calc(18 * var(--unit--horizontal));scroll-margin-block-start:calc(var(--unit--vertical) * 6);margin-top:calc(var(--unit--vertical) * 2);padding-bottom:calc(var(--unit--vertical) * 2)}@media screen and (min-width:640px){article #main-content{max-width:auto}}[data-template=year] .edito{margin-bottom:var(--unit--vertical)}.main-edito-btn{display:inline-block;margin-right:calc(2 * var(--unit--horizontal))}#main-edito{scroll-margin-block-start:25vw}body.full-width #desktop-nav{height:auto}body.full-width #desktop-nav .empty{height:calc(var(--unit--vertical) / 2)}body.full-width #main-content{position:absolute;left:0;width:100vw;padding:0 var(--unit--horizontal) var(--unit--vertical);box-sizing:border-box}.grid .column{grid-column:span var(--span)}.grid[data-columns="1"] .column{grid-column:11/span 20}[data-template=grid] main #main-content{margin-left:inherit}@media screen and (min-width:640px){[data-template=grid] main #main-content{margin-left:calc(0px - (4 * var(--unit--horizontal)))}[data-template=grid] .grid{display:grid;grid-template-columns:repeat(39,1fr);column-gap:var(--unit--horizontal);margin-bottom:calc(var(--unit--vertical) * 2)}}#subscribe-btn-wrapper{height:2.5rem;margin-bottom:.2rem}#subscribe-form{position:relative;width:-moz-fit-content;width:fit-content}#subscribe-form input{background-color:transparent;border:none;border-bottom:1px solid #fff;box-sizing:border-box;padding-bottom:.3rem;padding-right:2rem;color:#fff;width:15rem}#subscribe-form input:focus-visible{outline:none}#subscribe-form button[type=submit]{color:#fff;position:absolute;top:0;right:0}#main-footer{position:fixed;bottom:0;box-sizing:border-box;padding:3px var(--unit--horizontal) 6px;border-bottom:0}.main-footer--background{border-top:1px solid #eee;border-right:1px solid #eee;background-color:#000}[data-template=home] #main-footer{position:fixed;left:0;bottom:0}#main-footer li:not(.open-nav-wrapper){display:none}#main-footer button.open-nav{transform:translateY(-1px)}@media screen and (min-width:640px){#main-footer li{display:block!important}#main-footer{position:fixed;left:0;bottom:0;width:var(--body-padding);background-color:transparent;padding:var(--unit--vertical) var(--unit--horizontal)}#main-footer ul{display:block}#main-footer button.open-nav{margin-bottom:var(--unit--vertical)}}@media print{@page{margin:0;size:auto;@top-left{content:none}@top-right{content:none}@top-center{content:none}@bottom-left{content:none}@bottom-right{content:none}@bottom-center{content:none}}body{padding-top:4rem;color:#000}.panel{display:none}.main-title.fs-xxl{font-size:7rem!important;line-height:1!important}#main-header{position:relative}#logo #actuel{color:#000;opacity:.8}#logo #inactuel{color:#56d9a3}#entry-btns{display:none}a{text-decoration:none!important}article #main-content{width:60%;margin:auto}}:root{--color-background:#000;--color-primary:#fff;--color-primary--transparent:hsla(0,0%,100%,.86);--color-secondary-rgb:200,200,200;--color-secondary:rgba(var(--color-secondary-rgb),0.86);--color-secondary--light:rgba(var(--color-secondary-rgb),0.2);--color-secondary--x-light:rgb(var(--color-secondary-rgb),0.1);--color-tertiary-rgb:200,200,200;--color-tertiary:rgba(var(--color-tertiary-rgb),0.86);--color-tertiary--light:rgba(var(--color-tertiary-rgb),0.2);--color-tertiary--x-light:rgb(var(--color-tertiary-rgb),0.1);--unit--horizontal:5vw;--unit--vertical:1.7rem;--unit--vertical-relative:calc(var(--unit--vertical) * var(--window-height-factor));--font-size-s:0.8rem;--font-size-m:calc(var(--font-size-s) * 1.5);--font-size-l:calc(var(--font-size-m) * 1.5);--font-size-xl:calc(var(--font-size-l) * 1.5);--font-size-xxl:calc(var(--font-size-xl) * 1.5);--font-weight-light:200;--font-weight-bold:400;--font-weight-extra-bold:550;--opacity-light:0.6;--curve-sine:cubic-bezier(0.445,0.05,0.55,0.95)}@media screen and (min-width:640px){:root{--unit--horizontal:2.5vw;--unit--vertical:1.7rem;--font-size-s:0.9rem;--font-size-m:calc(var(--font-size-s) * 1.5);--font-size-l:calc(var(--font-size-m) * 1.5);--font-size-xl:calc(var(--font-size-l) * 1.5);--font-size-xxl:calc(var(--font-size-xl) * 1.5);--font-weight-light:200;--font-weight-bold:400;--font-weight-extra-bold:550;--body-padding:calc(10 * var(--unit--horizontal))}} |