/* VARIABLES */ :root { /* font sizes https://utopia.fyi/type/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,m-xl&g=s,l,xl,12 */ --size--1: clamp(0.94rem, calc(0.91rem + 0.14vw), 1rem); --size-0: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem); --size-1: clamp(1.35rem, calc(1.26rem + 0.47vw), 1.56rem); --size-2: clamp(1.62rem, calc(1.47rem + 0.74vw), 1.95rem); --size-3: clamp(1.94rem, calc(1.72rem + 1.11vw), 2.44rem); --size-4: clamp(2.33rem, calc(2.01rem + 1.6vw), 3.05rem); --size-5: clamp(2.8rem, calc(2.35rem + 2.26vw), 3.82rem); --size-6: clamp(3.36rem, calc(2.73rem + 3.13vw), 4.77rem); --size-7: clamp(4.03rem, calc(3.17rem + 4.29vw), 5.96rem); --size-8: clamp(4.84rem, calc(3.68rem + 5.81vw), 7.45rem); /* spaces https://utopia.fyi/space/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,m-xl&g=s,l,xl,12 */ --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem); --space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem); --space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem); --space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem); --space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem); --space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem); --space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem); --space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem); --space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem); /* One-up pairs */ --space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem); --space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem); --space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem); --space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem); --space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem); --space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem); --space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem); --space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem); /* multi steps */ --space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem); --space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem); --space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem); --space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem); --space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem); --space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem); --space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem); --space-m-xl: clamp(1.69rem, calc(0.77rem + 4.58vw), 3.75rem); --space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem); --space-l-3xl: clamp(2.25rem, calc(-0.08rem + 11.67vw), 7.5rem); /* colors */ --color-dark: hsl(239, 57%, 15%); --color-grey: hsl(211, 12%, 35%); --color-light-grey: hsl(0, 0%, 94%); --color-blue: hsl(253, 98%, 41%); --color-dark-blue: hsl(218, 60%, 21%); --color-light-blue: hsl(194, 54%, 89%); --color-blend-blue: hsl(253, 100%, 32%); --color-soft-blue: hsl(210, 73%, 94%); --color-violet: hsl(248, 73%, 52%); --color-brique: hsl(358, 54%, 54%); --color-white: hsl(0, 0%, 100%); --color-light-white: hsl(240, 50%, 98%); --color-black: hsl(0, 0%, 0%); /* shadows */ --shadow-color: 0deg 0% 80%; --shadow-elevation-medium: 0px 0.7px 0.7px hsl(var(--shadow-color) / 0.28), 0px 1.5px 1.6px -0.7px hsl(var(--shadow-color) / 0.26), 0px 2.9px 3px -1.5px hsl(var(--shadow-color) / 0.24), 0px 6px 6.3px -2.2px hsl(var(--shadow-color) / 0.22), 0px 11.8px 12.4px -3px hsl(var(--shadow-color) / 0.2); --shadow-elevation-high: 0px 0.5px 0.5px hsl(var(--shadow-color) / 0.18), 0px 1.4px 1.5px -0.3px hsl(var(--shadow-color) / 0.18), 0px 2.3px 2.4px -0.7px hsl(var(--shadow-color) / 0.17), 0px 3.4px 3.6px -1px hsl(var(--shadow-color) / 0.16), 0px 5.1px 5.4px -1.3px hsl(var(--shadow-color) / 0.16), 0px 7.5px 7.9px -1.7px hsl(var(--shadow-color) / 0.15), 0px 10.8px 11.3px -2px hsl(var(--shadow-color) / 0.15), -0.1px 15.4px 16.2px -2.3px hsl(var(--shadow-color) / 0.14), -0.1px 21.3px 22.4px -2.7px hsl(var(--shadow-color) / 0.13), -0.1px 28.9px 30.3px -3px hsl(var(--shadow-color) / 0.13); /* radius */ --radius: 20px; --radius-small: 10px; /* grid */ --content-width: 75rem; --grid-wrapper: [full-start] 1fr [wrapper-start] minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end]; --_content-padding: var(--content-padding, var(--space-s)); /* overrides */ --slidev-code-margin: var(--space-s) 0; }