diff --git a/openprops.html b/openprops.html index 71e43bf..4e154f9 100644 --- a/openprops.html +++ b/openprops.html @@ -6,7 +6,7 @@ system.css - +
diff --git a/theme/openprops.css b/theme/openprops.css new file mode 100644 index 0000000..6caa771 --- /dev/null +++ b/theme/openprops.css @@ -0,0 +1,4 @@ +@import url('../index.css'); +@import url('openprops/open-props.min.css') layer(--theme); + +@import url('openprops/system-open-props.css'); diff --git a/theme/openprops/index.css b/theme/openprops/index.css deleted file mode 100644 index 71d39bf..0000000 --- a/theme/openprops/index.css +++ /dev/null @@ -1,4 +0,0 @@ -@import url('../../index.css'); - -@import url('open-props.min.css'); -@import url('system-open-props.css'); diff --git a/theme/openprops/open-props.min.css b/theme/openprops/open-props.min.css index 09bcc4e..95ad5df 100644 --- a/theme/openprops/open-props.min.css +++ b/theme/openprops/open-props.min.css @@ -1,3 +1,893 @@ +:where(html) { + --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, + Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-serif: ui-serif, serif; + --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, + Source Code Pro, monospace; + --font-weight-1: 100; + --font-weight-2: 200; + --font-weight-3: 300; + --font-weight-4: 400; + --font-weight-5: 500; + --font-weight-6: 600; + --font-weight-7: 700; + --font-weight-8: 800; + --font-weight-9: 900; + --font-lineheight-00: 0.95; + --font-lineheight-0: 1.1; + --font-lineheight-1: 1.25; + --font-lineheight-2: 1.375; + --font-lineheight-3: 1.5; + --font-lineheight-4: 1.75; + --font-lineheight-5: 2; + --font-letterspacing-0: -0.05em; + --font-letterspacing-1: 0.025em; + --font-letterspacing-2: 0.05em; + --font-letterspacing-3: 0.075em; + --font-letterspacing-4: 0.15em; + --font-letterspacing-5: 0.5em; + --font-letterspacing-6: 0.75em; + --font-letterspacing-7: 1em; + --font-size-00: 0.5rem; + --font-size-0: 0.75rem; + --font-size-1: 1rem; + --font-size-2: 1.1rem; + --font-size-3: 1.25rem; + --font-size-4: 1.5rem; + --font-size-5: 2rem; + --font-size-6: 2.5rem; + --font-size-7: 3rem; + --font-size-8: 3.5rem; + --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem); + --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem); + --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem); + --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem); + --size-000: -0.5rem; + --size-00: -0.25rem; + --size-1: 0.25rem; + --size-2: 0.5rem; + --size-3: 1rem; + --size-4: 1.25rem; + --size-5: 1.5rem; + --size-6: 1.75rem; + --size-7: 2rem; + --size-8: 3rem; + --size-9: 4rem; + --size-10: 5rem; + --size-11: 7.5rem; + --size-12: 10rem; + --size-13: 15rem; + --size-14: 20rem; + --size-15: 30rem; + --size-fluid-1: clamp(0.5rem, 1vw, 1rem); + --size-fluid-2: clamp(1rem, 2vw, 1.5rem); + --size-fluid-3: clamp(1.5rem, 3vw, 2rem); + --size-fluid-4: clamp(2rem, 4vw, 3rem); + --size-fluid-5: clamp(4rem, 5vw, 5rem); + --size-fluid-6: clamp(5rem, 7vw, 7.5rem); + --size-fluid-7: clamp(7.5rem, 10vw, 10rem); + --size-fluid-8: clamp(10rem, 20vw, 15rem); + --size-fluid-9: clamp(15rem, 30vw, 20rem); + --size-fluid-10: clamp(20rem, 40vw, 30rem); + --size-content-1: 20ch; + --size-content-2: 45ch; + --size-content-3: 60ch; + --size-header-1: 20ch; + --size-header-2: 25ch; + --size-header-3: 35ch; + --size-xxs: 240px; + --size-xs: 360px; + --size-sm: 480px; + --size-md: 768px; + --size-lg: 1024px; + --size-xl: 1440px; + --size-xxl: 1920px; + --size-relative-000: -0.5ch; + --size-relative-00: -0.25ch; + --size-relative-1: 0.25ch; + --size-relative-2: 0.5ch; + --size-relative-3: 1ch; + --size-relative-4: 1.25ch; + --size-relative-5: 1.5ch; + --size-relative-6: 1.75ch; + --size-relative-7: 2ch; + --size-relative-8: 3ch; + --size-relative-9: 4ch; + --size-relative-10: 5ch; + --size-relative-11: 7.5ch; + --size-relative-12: 10ch; + --size-relative-13: 15ch; + --size-relative-14: 20ch; + --size-relative-15: 30ch; + --ease-1: cubic-bezier(0.25, 0, 0.5, 1); + --ease-2: cubic-bezier(0.25, 0, 0.4, 1); + --ease-3: cubic-bezier(0.25, 0, 0.3, 1); + --ease-4: cubic-bezier(0.25, 0, 0.2, 1); + --ease-5: cubic-bezier(0.25, 0, 0.1, 1); + --ease-in-1: cubic-bezier(0.25, 0, 1, 1); + --ease-in-2: cubic-bezier(0.5, 0, 1, 1); + --ease-in-3: cubic-bezier(0.7, 0, 1, 1); + --ease-in-4: cubic-bezier(0.9, 0, 1, 1); + --ease-in-5: cubic-bezier(1, 0, 1, 1); + --ease-out-1: cubic-bezier(0, 0, 0.75, 1); + --ease-out-2: cubic-bezier(0, 0, 0.5, 1); + --ease-out-3: cubic-bezier(0, 0, 0.3, 1); + --ease-out-4: cubic-bezier(0, 0, 0.1, 1); + --ease-out-5: cubic-bezier(0, 0, 0, 1); + --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1); + --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1); + --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1); + --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1); + --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1); + --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); + --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25); + --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); + --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); + --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25); + --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1); + --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1); + --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1); + --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1); + --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1); + --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5); + --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5); + --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5); + --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5); + --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5); + --ease-step-1: steps(2); + --ease-step-2: steps(3); + --ease-step-3: steps(4); + --ease-step-4: steps(7); + --ease-step-5: steps(10); + --ease-elastic-1: var(--ease-elastic-out-1); + --ease-elastic-2: var(--ease-elastic-out-2); + --ease-elastic-3: var(--ease-elastic-out-3); + --ease-elastic-4: var(--ease-elastic-out-4); + --ease-elastic-5: var(--ease-elastic-out-5); + --ease-squish-1: var(--ease-elastic-in-out-1); + --ease-squish-2: var(--ease-elastic-in-out-2); + --ease-squish-3: var(--ease-elastic-in-out-3); + --ease-squish-4: var(--ease-elastic-in-out-4); + --ease-squish-5: var(--ease-elastic-in-out-5); + --ease-spring-1: linear( + 0, + 0.006, + 0.025 2.8%, + 0.101 6.1%, + 0.539 18.9%, + 0.721 25.3%, + 0.849 31.5%, + 0.937 38.1%, + 0.968 41.8%, + 0.991 45.7%, + 1.006 50.1%, + 1.015 55%, + 1.017 63.9%, + 1.001 + ); + --ease-spring-2: linear( + 0, + 0.007, + 0.029 2.2%, + 0.118 4.7%, + 0.625 14.4%, + 0.826 19%, + 0.902, + 0.962, + 1.008 26.1%, + 1.041 28.7%, + 1.064 32.1%, + 1.07 36%, + 1.061 40.5%, + 1.015 53.4%, + 0.999 61.6%, + 0.995 71.2%, + 1 + ); + --ease-spring-3: linear( + 0, + 0.009, + 0.035 2.1%, + 0.141 4.4%, + 0.723 12.9%, + 0.938 16.7%, + 1.017, + 1.077, + 1.121, + 1.149 24.3%, + 1.159, + 1.163, + 1.161, + 1.154 29.9%, + 1.129 32.8%, + 1.051 39.6%, + 1.017 43.1%, + 0.991, + 0.977 51%, + 0.974 53.8%, + 0.975 57.1%, + 0.997 69.8%, + 1.003 76.9%, + 1 + ); + --ease-spring-4: linear( + 0, + 0.009, + 0.037 1.7%, + 0.153 3.6%, + 0.776 10.3%, + 1.001, + 1.142 16%, + 1.185, + 1.209 19%, + 1.215 19.9% 20.8%, + 1.199, + 1.165 25%, + 1.056 30.3%, + 1.008 33%, + 0.973, + 0.955 39.2%, + 0.953 41.1%, + 0.957 43.3%, + 0.998 53.3%, + 1.009 59.1% 63.7%, + 0.998 78.9%, + 1 + ); + --ease-spring-5: linear( + 0, + 0.01, + 0.04 1.6%, + 0.161 3.3%, + 0.816 9.4%, + 1.046, + 1.189 14.4%, + 1.231, + 1.254 17%, + 1.259, + 1.257 18.6%, + 1.236, + 1.194 22.3%, + 1.057 27%, + 0.999 29.4%, + 0.955 32.1%, + 0.942, + 0.935 34.9%, + 0.933, + 0.939 38.4%, + 1 47.3%, + 1.011, + 1.017 52.6%, + 1.016 56.4%, + 1 65.2%, + 0.996 70.2%, + 1.001 87.2%, + 1 + ); + --ease-bounce-1: linear( + 0, + 0.004, + 0.016, + 0.035, + 0.063, + 0.098, + 0.141, + 0.191, + 0.25, + 0.316, + 0.391 36.8%, + 0.563, + 0.766, + 1 58.8%, + 0.946, + 0.908 69.1%, + 0.895, + 0.885, + 0.879, + 0.878, + 0.879, + 0.885, + 0.895, + 0.908 89.7%, + 0.946, + 1 + ); + --ease-bounce-2: linear( + 0, + 0.004, + 0.016, + 0.035, + 0.063, + 0.098, + 0.141 15.1%, + 0.25, + 0.391, + 0.562, + 0.765, + 1, + 0.892 45.2%, + 0.849, + 0.815, + 0.788, + 0.769, + 0.757, + 0.753, + 0.757, + 0.769, + 0.788, + 0.815, + 0.85, + 0.892 75.2%, + 1 80.2%, + 0.973, + 0.954, + 0.943, + 0.939, + 0.943, + 0.954, + 0.973, + 1 + ); + --ease-bounce-3: linear( + 0, + 0.004, + 0.016, + 0.035, + 0.062, + 0.098, + 0.141 11.4%, + 0.25, + 0.39, + 0.562, + 0.764, + 1 30.3%, + 0.847 34.8%, + 0.787, + 0.737, + 0.699, + 0.672, + 0.655, + 0.65, + 0.656, + 0.672, + 0.699, + 0.738, + 0.787, + 0.847 61.7%, + 1 66.2%, + 0.946, + 0.908, + 0.885 74.2%, + 0.879, + 0.878, + 0.879, + 0.885 79.5%, + 0.908, + 0.946, + 1 87.4%, + 0.981, + 0.968, + 0.96, + 0.957, + 0.96, + 0.968, + 0.981, + 1 + ); + --ease-bounce-4: linear( + 0, + 0.004, + 0.016 3%, + 0.062, + 0.141, + 0.25, + 0.391, + 0.562 18.2%, + 1 24.3%, + 0.81, + 0.676 32.3%, + 0.629, + 0.595, + 0.575, + 0.568, + 0.575, + 0.595, + 0.629, + 0.676 48.2%, + 0.811, + 1 56.2%, + 0.918, + 0.86, + 0.825, + 0.814, + 0.825, + 0.86, + 0.918, + 1 77.2%, + 0.94 80.6%, + 0.925, + 0.92, + 0.925, + 0.94 87.5%, + 1 90.9%, + 0.974, + 0.965, + 0.974, + 1 + ); + --ease-bounce-5: linear( + 0, + 0.004, + 0.016 2.5%, + 0.063, + 0.141, + 0.25 10.1%, + 0.562, + 1 20.2%, + 0.783, + 0.627, + 0.534 30.9%, + 0.511, + 0.503, + 0.511, + 0.534 38%, + 0.627, + 0.782, + 1 48.7%, + 0.892, + 0.815, + 0.769 56.3%, + 0.757, + 0.753, + 0.757, + 0.769 61.3%, + 0.815, + 0.892, + 1 68.8%, + 0.908 72.4%, + 0.885, + 0.878, + 0.885, + 0.908 79.4%, + 1 83%, + 0.954 85.5%, + 0.943, + 0.939, + 0.943, + 0.954 90.5%, + 1 93%, + 0.977, + 0.97, + 0.977, + 1 + ); + --layer-1: 1; + --layer-2: 2; + --layer-3: 3; + --layer-4: 4; + --layer-5: 5; + --layer-important: 2147483647; + --shadow-color: 220 3% 15%; + --shadow-strength: 1%; + --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067); + --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); + --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); + --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), + 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), + 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); + --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), + 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), + 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); + --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), + 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), + 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); + --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), + 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), + 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), + 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), + 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), + 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); + --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); + --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), + var(--inner-shadow-highlight); + --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), + var(--inner-shadow-highlight); + --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), + var(--inner-shadow-highlight); + --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), + var(--inner-shadow-highlight); + --ratio-square: 1; + --ratio-landscape: 4/3; + --ratio-portrait: 3/4; + --ratio-widescreen: 16/9; + --ratio-ultrawide: 18/5; + --ratio-golden: 1.618/1; + --gray-0: #f8f9fa; + --gray-1: #f1f3f5; + --gray-2: #e9ecef; + --gray-3: #dee2e6; + --gray-4: #ced4da; + --gray-5: #adb5bd; + --gray-6: #868e96; + --gray-7: #495057; + --gray-8: #343a40; + --gray-9: #212529; + --gray-10: #16191d; + --gray-11: #0d0f12; + --gray-12: #030507; + --stone-0: #f8fafb; + --stone-1: #f2f4f6; + --stone-2: #ebedef; + --stone-3: #e0e4e5; + --stone-4: #d1d6d8; + --stone-5: #b1b6b9; + --stone-6: #979b9d; + --stone-7: #7e8282; + --stone-8: #666968; + --stone-9: #50514f; + --stone-10: #3a3a37; + --stone-11: #252521; + --stone-12: #121210; + --red-0: #fff5f5; + --red-1: #ffe3e3; + --red-2: #ffc9c9; + --red-3: #ffa8a8; + --red-4: #ff8787; + --red-5: #ff6b6b; + --red-6: #fa5252; + --red-7: #f03e3e; + --red-8: #e03131; + --red-9: #c92a2a; + --red-10: #b02525; + --red-11: #962020; + --red-12: #7d1a1a; + --pink-0: #fff0f6; + --pink-1: #ffdeeb; + --pink-2: #fcc2d7; + --pink-3: #faa2c1; + --pink-4: #f783ac; + --pink-5: #f06595; + --pink-6: #e64980; + --pink-7: #d6336c; + --pink-8: #c2255c; + --pink-9: #a61e4d; + --pink-10: #8c1941; + --pink-11: #731536; + --pink-12: #59102a; + --purple-0: #f8f0fc; + --purple-1: #f3d9fa; + --purple-2: #eebefa; + --purple-3: #e599f7; + --purple-4: #da77f2; + --purple-5: #cc5de8; + --purple-6: #be4bdb; + --purple-7: #ae3ec9; + --purple-8: #9c36b5; + --purple-9: #862e9c; + --purple-10: #702682; + --purple-11: #5a1e69; + --purple-12: #44174f; + --violet-0: #f3f0ff; + --violet-1: #e5dbff; + --violet-2: #d0bfff; + --violet-3: #b197fc; + --violet-4: #9775fa; + --violet-5: #845ef7; + --violet-6: #7950f2; + --violet-7: #7048e8; + --violet-8: #6741d9; + --violet-9: #5f3dc4; + --violet-10: #5235ab; + --violet-11: #462d91; + --violet-12: #3a2578; + --indigo-0: #edf2ff; + --indigo-1: #dbe4ff; + --indigo-2: #bac8ff; + --indigo-3: #91a7ff; + --indigo-4: #748ffc; + --indigo-5: #5c7cfa; + --indigo-6: #4c6ef5; + --indigo-7: #4263eb; + --indigo-8: #3b5bdb; + --indigo-9: #364fc7; + --indigo-10: #2f44ad; + --indigo-11: #283a94; + --indigo-12: #21307a; + --blue-0: #e7f5ff; + --blue-1: #d0ebff; + --blue-2: #a5d8ff; + --blue-3: #74c0fc; + --blue-4: #4dabf7; + --blue-5: #339af0; + --blue-6: #228be6; + --blue-7: #1c7ed6; + --blue-8: #1971c2; + --blue-9: #1864ab; + --blue-10: #145591; + --blue-11: #114678; + --blue-12: #0d375e; + --cyan-0: #e3fafc; + --cyan-1: #c5f6fa; + --cyan-2: #99e9f2; + --cyan-3: #66d9e8; + --cyan-4: #3bc9db; + --cyan-5: #22b8cf; + --cyan-6: #15aabf; + --cyan-7: #1098ad; + --cyan-8: #0c8599; + --cyan-9: #0b7285; + --cyan-10: #095c6b; + --cyan-11: #074652; + --cyan-12: #053038; + --teal-0: #e6fcf5; + --teal-1: #c3fae8; + --teal-2: #96f2d7; + --teal-3: #63e6be; + --teal-4: #38d9a9; + --teal-5: #20c997; + --teal-6: #12b886; + --teal-7: #0ca678; + --teal-8: #099268; + --teal-9: #087f5b; + --teal-10: #066649; + --teal-11: #054d37; + --teal-12: #033325; + --green-0: #ebfbee; + --green-1: #d3f9d8; + --green-2: #b2f2bb; + --green-3: #8ce99a; + --green-4: #69db7c; + --green-5: #51cf66; + --green-6: #40c057; + --green-7: #37b24d; + --green-8: #2f9e44; + --green-9: #2b8a3e; + --green-10: #237032; + --green-11: #1b5727; + --green-12: #133d1b; + --lime-0: #f4fce3; + --lime-1: #e9fac8; + --lime-2: #d8f5a2; + --lime-3: #c0eb75; + --lime-4: #a9e34b; + --lime-5: #94d82d; + --lime-6: #82c91e; + --lime-7: #74b816; + --lime-8: #66a80f; + --lime-9: #5c940d; + --lime-10: #4c7a0b; + --lime-11: #3c6109; + --lime-12: #2c4706; + --yellow-0: #fff9db; + --yellow-1: #fff3bf; + --yellow-2: #ffec99; + --yellow-3: #ffe066; + --yellow-4: #ffd43b; + --yellow-5: #fcc419; + --yellow-6: #fab005; + --yellow-7: #f59f00; + --yellow-8: #f08c00; + --yellow-9: #e67700; + --yellow-10: #b35c00; + --yellow-11: #804200; + --yellow-12: #663500; + --orange-0: #fff4e6; + --orange-1: #ffe8cc; + --orange-2: #ffd8a8; + --orange-3: #ffc078; + --orange-4: #ffa94d; + --orange-5: #ff922b; + --orange-6: #fd7e14; + --orange-7: #f76707; + --orange-8: #e8590c; + --orange-9: #d9480f; + --orange-10: #bf400d; + --orange-11: #99330b; + --orange-12: #802b09; + --choco-0: #fff8dc; + --choco-1: #fce1bc; + --choco-2: #f7ca9e; + --choco-3: #f1b280; + --choco-4: #e99b62; + --choco-5: #df8545; + --choco-6: #d46e25; + --choco-7: #bd5f1b; + --choco-8: #a45117; + --choco-9: #8a4513; + --choco-10: #703a13; + --choco-11: #572f12; + --choco-12: #3d210d; + --brown-0: #faf4eb; + --brown-1: #ede0d1; + --brown-2: #e0cab7; + --brown-3: #d3b79e; + --brown-4: #c5a285; + --brown-5: #b78f6d; + --brown-6: #a87c56; + --brown-7: #956b47; + --brown-8: #825b3a; + --brown-9: #6f4b2d; + --brown-10: #5e3a21; + --brown-11: #4e2b15; + --brown-12: #422412; + --sand-0: #f8fafb; + --sand-1: #e6e4dc; + --sand-2: #d5cfbd; + --sand-3: #c2b9a0; + --sand-4: #aea58c; + --sand-5: #9a9178; + --sand-6: #867c65; + --sand-7: #736a53; + --sand-8: #5f5746; + --sand-9: #4b4639; + --sand-10: #38352d; + --sand-11: #252521; + --sand-12: #121210; + --camo-0: #f9fbe7; + --camo-1: #e8ed9c; + --camo-2: #d2df4e; + --camo-3: #c2ce34; + --camo-4: #b5bb2e; + --camo-5: #a7a827; + --camo-6: #999621; + --camo-7: #8c851c; + --camo-8: #7e7416; + --camo-9: #6d6414; + --camo-10: #5d5411; + --camo-11: #4d460e; + --camo-12: #36300a; + --jungle-0: #ecfeb0; + --jungle-1: #def39a; + --jungle-2: #d0e884; + --jungle-3: #c2dd6e; + --jungle-4: #b5d15b; + --jungle-5: #a8c648; + --jungle-6: #9bbb36; + --jungle-7: #8fb024; + --jungle-8: #84a513; + --jungle-9: #7a9908; + --jungle-10: #658006; + --jungle-11: #516605; + --jungle-12: #3d4d04; + --gradient-1: linear-gradient( + to bottom right, + #1f005c, + #5b0060, + #870160, + #ac255e, + #ca485c, + #e16b5c, + #f39060, + #ffb56b + ); + --gradient-2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff); + --gradient-3: radial-gradient(circle at top right, #0ff, rgba(0, 255, 255, 0)), + radial-gradient(circle at bottom left, #ff1492, rgba(255, 20, 146, 0)); + --gradient-4: linear-gradient(to bottom right, #00f5a0, #00d9f5); + --gradient-5: conic-gradient(from -270deg at 75% 110%, #f0f, #fffaf0); + --gradient-6: conic-gradient(from -90deg at top left, #000, #fff); + --gradient-7: linear-gradient(to bottom right, #72c6ef, #004e8f); + --gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111); + --gradient-9: conic-gradient(from 0.5turn at bottom center, #add8e6, #fff); + --gradient-10: conic-gradient( + from 90deg at 40% -25%, + gold, + #f79d03, + #ee6907, + #e6390a, + #de0d0d, + #d61039, + #cf1261, + #c71585, + #cf1261, + #d61039, + #de0d0d, + #ee6907, + #f79d03, + gold, + gold, + gold + ); + --gradient-11: conic-gradient(at bottom left, #ff1493, cyan); + --gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85); + --gradient-13: radial-gradient(circle at 50% 200%, #000142, #3b0083, #b300c3, #ff059f, #ff4661, #ffad86, #fff3c7); + --gradient-14: conic-gradient(at top right, lime, cyan); + --gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7); + --gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000); + --gradient-17: conic-gradient(from -90deg at 50% -25%, blue, #8a2be2); + --gradient-18: linear-gradient(0deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 75%), + linear-gradient(60deg, rgba(255, 255, 0, 0.8), rgba(255, 255, 0, 0) 75%), + linear-gradient(120deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 75%), + linear-gradient(180deg, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0) 75%), + linear-gradient(240deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 75%), + linear-gradient(300deg, rgba(255, 0, 255, 0.8), rgba(255, 0, 255, 0) 75%); + --gradient-19: linear-gradient(to bottom right, #ffe259, #ffa751); + --gradient-20: conic-gradient(from -135deg at -10% center, orange, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4); + --gradient-21: conic-gradient(from -90deg at 25% 115%, red, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f); + --gradient-22: linear-gradient(to bottom right, #acb6e5, #86fde8); + --gradient-23: linear-gradient(to bottom right, #536976, #292e49); + --gradient-24: conic-gradient(from 0.5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476); + --gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7); + --gradient-26: linear-gradient(to bottom right, #9796f0, #fbc7d4); + --gradient-27: conic-gradient(from 0.5turn at bottom left, #ff1493, #639); + --gradient-28: conic-gradient(from -90deg at 50% 105%, #fff, orchid); + --gradient-29: radial-gradient(circle at top right, #bfb3ff, rgba(191, 179, 255, 0)), + radial-gradient(circle at bottom left, #86acf9, rgba(134, 172, 249, 0)); + --gradient-30: radial-gradient(circle at top right, #00ff80, rgba(0, 255, 128, 0)), + radial-gradient(circle at bottom left, #adffd6, rgba(173, 255, 214, 0)); + --noise-1: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --noise-2: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --noise-3: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --noise-4: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --noise-5: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); + --noise-filter-1: contrast(300%) brightness(100%); + --noise-filter-2: contrast(200%) brightness(150%); + --noise-filter-3: contrast(200%) brightness(250%); + --noise-filter-4: contrast(200%) brightness(500%); + --noise-filter-5: contrast(200%) brightness(1000%); + --animation-fade-in: fade-in 0.5s var(--ease-3); + --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); + --animation-fade-out: fade-out 0.5s var(--ease-3); + --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); + --animation-scale-up: scale-up 0.5s var(--ease-3); + --animation-scale-down: scale-down 0.5s var(--ease-3); + --animation-slide-out-up: slide-out-up 0.5s var(--ease-3); + --animation-slide-out-down: slide-out-down 0.5s var(--ease-3); + --animation-slide-out-right: slide-out-right 0.5s var(--ease-3); + --animation-slide-out-left: slide-out-left 0.5s var(--ease-3); + --animation-slide-in-up: slide-in-up 0.5s var(--ease-3); + --animation-slide-in-down: slide-in-down 0.5s var(--ease-3); + --animation-slide-in-right: slide-in-right 0.5s var(--ease-3); + --animation-slide-in-left: slide-in-left 0.5s var(--ease-3); + --animation-shake-x: shake-x 0.75s var(--ease-out-5); + --animation-shake-y: shake-y 0.75s var(--ease-out-5); + --animation-spin: spin 2s linear infinite; + --animation-ping: ping 5s var(--ease-out-3) infinite; + --animation-blink: blink 1s var(--ease-out-3) infinite; + --animation-float: float 3s var(--ease-in-out-3) infinite; + --animation-bounce: bounce 2s var(--ease-squish-2) infinite; + --animation-pulse: pulse 2s var(--ease-out-3) infinite; + --border-size-1: 1px; + --border-size-2: 2px; + --border-size-3: 5px; + --border-size-4: 10px; + --border-size-5: 25px; + --radius-1: 2px; + --radius-2: 5px; + --radius-3: 1rem; + --radius-4: 2rem; + --radius-5: 4rem; + --radius-6: 8rem; + --radius-round: 1e5px; + --radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%; + --radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%; + --radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%; + --radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%; + --radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%; + --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1)); + --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2)); + --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3)); + --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4)); + --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5)); + --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6)); +} +@media (prefers-color-scheme: dark) { + :where(html) { + --shadow-color: 220 40% 2%; + --shadow-strength: 25%; + --inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067), inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467); + } +} @keyframes fade-in { to { opacity: 1; @@ -198,907 +1088,3 @@ } } } - -@layer --theme { - :root { - --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, - Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --font-serif: ui-serif, serif; - --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, - Source Code Pro, monospace; - --font-weight-1: 100; - --font-weight-2: 200; - --font-weight-3: 300; - --font-weight-4: 400; - --font-weight-5: 500; - --font-weight-6: 600; - --font-weight-7: 700; - --font-weight-8: 800; - --font-weight-9: 900; - --font-lineheight-00: 0.95; - --font-lineheight-0: 1.1; - --font-lineheight-1: 1.25; - --font-lineheight-2: 1.375; - --font-lineheight-3: 1.5; - --font-lineheight-4: 1.75; - --font-lineheight-5: 2; - --font-letterspacing-0: -0.05em; - --font-letterspacing-1: 0.025em; - --font-letterspacing-2: 0.05em; - --font-letterspacing-3: 0.075em; - --font-letterspacing-4: 0.15em; - --font-letterspacing-5: 0.5em; - --font-letterspacing-6: 0.75em; - --font-letterspacing-7: 1em; - --font-size-00: 0.5rem; - --font-size-0: 0.75rem; - --font-size-1: 1rem; - --font-size-2: 1.1rem; - --font-size-3: 1.25rem; - --font-size-4: 1.5rem; - --font-size-5: 2rem; - --font-size-6: 2.5rem; - --font-size-7: 3rem; - --font-size-8: 3.5rem; - --font-size-fluid-0: clamp(0.75rem, 2vw, 1rem); - --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem); - --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem); - --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem); - --size-000: -0.5rem; - --size-00: -0.25rem; - --size-1: 0.25rem; - --size-2: 0.5rem; - --size-3: 1rem; - --size-4: 1.25rem; - --size-5: 1.5rem; - --size-6: 1.75rem; - --size-7: 2rem; - --size-8: 3rem; - --size-9: 4rem; - --size-10: 5rem; - --size-11: 7.5rem; - --size-12: 10rem; - --size-13: 15rem; - --size-14: 20rem; - --size-15: 30rem; - --size-fluid-1: clamp(0.5rem, 1vw, 1rem); - --size-fluid-2: clamp(1rem, 2vw, 1.5rem); - --size-fluid-3: clamp(1.5rem, 3vw, 2rem); - --size-fluid-4: clamp(2rem, 4vw, 3rem); - --size-fluid-5: clamp(4rem, 5vw, 5rem); - --size-fluid-6: clamp(5rem, 7vw, 7.5rem); - --size-fluid-7: clamp(7.5rem, 10vw, 10rem); - --size-fluid-8: clamp(10rem, 20vw, 15rem); - --size-fluid-9: clamp(15rem, 30vw, 20rem); - --size-fluid-10: clamp(20rem, 40vw, 30rem); - --size-content-1: 20ch; - --size-content-2: 45ch; - --size-content-3: 60ch; - --size-header-1: 20ch; - --size-header-2: 25ch; - --size-header-3: 35ch; - --size-xxs: 240px; - --size-xs: 360px; - --size-sm: 480px; - --size-md: 768px; - --size-lg: 1024px; - --size-xl: 1440px; - --size-xxl: 1920px; - --size-relative-000: -0.5ch; - --size-relative-00: -0.25ch; - --size-relative-1: 0.25ch; - --size-relative-2: 0.5ch; - --size-relative-3: 1ch; - --size-relative-4: 1.25ch; - --size-relative-5: 1.5ch; - --size-relative-6: 1.75ch; - --size-relative-7: 2ch; - --size-relative-8: 3ch; - --size-relative-9: 4ch; - --size-relative-10: 5ch; - --size-relative-11: 7.5ch; - --size-relative-12: 10ch; - --size-relative-13: 15ch; - --size-relative-14: 20ch; - --size-relative-15: 30ch; - --ease-1: cubic-bezier(0.25, 0, 0.5, 1); - --ease-2: cubic-bezier(0.25, 0, 0.4, 1); - --ease-3: cubic-bezier(0.25, 0, 0.3, 1); - --ease-4: cubic-bezier(0.25, 0, 0.2, 1); - --ease-5: cubic-bezier(0.25, 0, 0.1, 1); - --ease-in-1: cubic-bezier(0.25, 0, 1, 1); - --ease-in-2: cubic-bezier(0.5, 0, 1, 1); - --ease-in-3: cubic-bezier(0.7, 0, 1, 1); - --ease-in-4: cubic-bezier(0.9, 0, 1, 1); - --ease-in-5: cubic-bezier(1, 0, 1, 1); - --ease-out-1: cubic-bezier(0, 0, 0.75, 1); - --ease-out-2: cubic-bezier(0, 0, 0.5, 1); - --ease-out-3: cubic-bezier(0, 0, 0.3, 1); - --ease-out-4: cubic-bezier(0, 0, 0.1, 1); - --ease-out-5: cubic-bezier(0, 0, 0, 1); - --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1); - --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1); - --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1); - --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1); - --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1); - --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); - --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25); - --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); - --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); - --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25); - --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1); - --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1); - --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1); - --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1); - --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1); - --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5); - --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5); - --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5); - --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5); - --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5); - --ease-step-1: steps(2); - --ease-step-2: steps(3); - --ease-step-3: steps(4); - --ease-step-4: steps(7); - --ease-step-5: steps(10); - --ease-elastic-1: var(--ease-elastic-out-1); - --ease-elastic-2: var(--ease-elastic-out-2); - --ease-elastic-3: var(--ease-elastic-out-3); - --ease-elastic-4: var(--ease-elastic-out-4); - --ease-elastic-5: var(--ease-elastic-out-5); - --ease-squish-1: var(--ease-elastic-in-out-1); - --ease-squish-2: var(--ease-elastic-in-out-2); - --ease-squish-3: var(--ease-elastic-in-out-3); - --ease-squish-4: var(--ease-elastic-in-out-4); - --ease-squish-5: var(--ease-elastic-in-out-5); - --ease-spring-1: linear( - 0, - 0.006, - 0.025 2.8%, - 0.101 6.1%, - 0.539 18.9%, - 0.721 25.3%, - 0.849 31.5%, - 0.937 38.1%, - 0.968 41.8%, - 0.991 45.7%, - 1.006 50.1%, - 1.015 55%, - 1.017 63.9%, - 1.001 - ); - --ease-spring-2: linear( - 0, - 0.007, - 0.029 2.2%, - 0.118 4.7%, - 0.625 14.4%, - 0.826 19%, - 0.902, - 0.962, - 1.008 26.1%, - 1.041 28.7%, - 1.064 32.1%, - 1.07 36%, - 1.061 40.5%, - 1.015 53.4%, - 0.999 61.6%, - 0.995 71.2%, - 1 - ); - --ease-spring-3: linear( - 0, - 0.009, - 0.035 2.1%, - 0.141 4.4%, - 0.723 12.9%, - 0.938 16.7%, - 1.017, - 1.077, - 1.121, - 1.149 24.3%, - 1.159, - 1.163, - 1.161, - 1.154 29.9%, - 1.129 32.8%, - 1.051 39.6%, - 1.017 43.1%, - 0.991, - 0.977 51%, - 0.974 53.8%, - 0.975 57.1%, - 0.997 69.8%, - 1.003 76.9%, - 1 - ); - --ease-spring-4: linear( - 0, - 0.009, - 0.037 1.7%, - 0.153 3.6%, - 0.776 10.3%, - 1.001, - 1.142 16%, - 1.185, - 1.209 19%, - 1.215 19.9% 20.8%, - 1.199, - 1.165 25%, - 1.056 30.3%, - 1.008 33%, - 0.973, - 0.955 39.2%, - 0.953 41.1%, - 0.957 43.3%, - 0.998 53.3%, - 1.009 59.1% 63.7%, - 0.998 78.9%, - 1 - ); - --ease-spring-5: linear( - 0, - 0.01, - 0.04 1.6%, - 0.161 3.3%, - 0.816 9.4%, - 1.046, - 1.189 14.4%, - 1.231, - 1.254 17%, - 1.259, - 1.257 18.6%, - 1.236, - 1.194 22.3%, - 1.057 27%, - 0.999 29.4%, - 0.955 32.1%, - 0.942, - 0.935 34.9%, - 0.933, - 0.939 38.4%, - 1 47.3%, - 1.011, - 1.017 52.6%, - 1.016 56.4%, - 1 65.2%, - 0.996 70.2%, - 1.001 87.2%, - 1 - ); - --ease-bounce-1: linear( - 0, - 0.004, - 0.016, - 0.035, - 0.063, - 0.098, - 0.141, - 0.191, - 0.25, - 0.316, - 0.391 36.8%, - 0.563, - 0.766, - 1 58.8%, - 0.946, - 0.908 69.1%, - 0.895, - 0.885, - 0.879, - 0.878, - 0.879, - 0.885, - 0.895, - 0.908 89.7%, - 0.946, - 1 - ); - --ease-bounce-2: linear( - 0, - 0.004, - 0.016, - 0.035, - 0.063, - 0.098, - 0.141 15.1%, - 0.25, - 0.391, - 0.562, - 0.765, - 1, - 0.892 45.2%, - 0.849, - 0.815, - 0.788, - 0.769, - 0.757, - 0.753, - 0.757, - 0.769, - 0.788, - 0.815, - 0.85, - 0.892 75.2%, - 1 80.2%, - 0.973, - 0.954, - 0.943, - 0.939, - 0.943, - 0.954, - 0.973, - 1 - ); - --ease-bounce-3: linear( - 0, - 0.004, - 0.016, - 0.035, - 0.062, - 0.098, - 0.141 11.4%, - 0.25, - 0.39, - 0.562, - 0.764, - 1 30.3%, - 0.847 34.8%, - 0.787, - 0.737, - 0.699, - 0.672, - 0.655, - 0.65, - 0.656, - 0.672, - 0.699, - 0.738, - 0.787, - 0.847 61.7%, - 1 66.2%, - 0.946, - 0.908, - 0.885 74.2%, - 0.879, - 0.878, - 0.879, - 0.885 79.5%, - 0.908, - 0.946, - 1 87.4%, - 0.981, - 0.968, - 0.96, - 0.957, - 0.96, - 0.968, - 0.981, - 1 - ); - --ease-bounce-4: linear( - 0, - 0.004, - 0.016 3%, - 0.062, - 0.141, - 0.25, - 0.391, - 0.562 18.2%, - 1 24.3%, - 0.81, - 0.676 32.3%, - 0.629, - 0.595, - 0.575, - 0.568, - 0.575, - 0.595, - 0.629, - 0.676 48.2%, - 0.811, - 1 56.2%, - 0.918, - 0.86, - 0.825, - 0.814, - 0.825, - 0.86, - 0.918, - 1 77.2%, - 0.94 80.6%, - 0.925, - 0.92, - 0.925, - 0.94 87.5%, - 1 90.9%, - 0.974, - 0.965, - 0.974, - 1 - ); - --ease-bounce-5: linear( - 0, - 0.004, - 0.016 2.5%, - 0.063, - 0.141, - 0.25 10.1%, - 0.562, - 1 20.2%, - 0.783, - 0.627, - 0.534 30.9%, - 0.511, - 0.503, - 0.511, - 0.534 38%, - 0.627, - 0.782, - 1 48.7%, - 0.892, - 0.815, - 0.769 56.3%, - 0.757, - 0.753, - 0.757, - 0.769 61.3%, - 0.815, - 0.892, - 1 68.8%, - 0.908 72.4%, - 0.885, - 0.878, - 0.885, - 0.908 79.4%, - 1 83%, - 0.954 85.5%, - 0.943, - 0.939, - 0.943, - 0.954 90.5%, - 1 93%, - 0.977, - 0.97, - 0.977, - 1 - ); - --layer-1: 1; - --layer-2: 2; - --layer-3: 3; - --layer-4: 4; - --layer-5: 5; - --layer-important: 2147483647; - --shadow-color: 220 3% 15%; - --shadow-strength: 1%; - --inner-shadow-highlight: inset 0 -0.5px 0 0 #fff, inset 0 0.5px 0 0 rgba(0, 0, 0, 0.067); - --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); - --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)); - --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), - 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), - 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), - 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), - 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); - --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), - 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), - 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), - 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)); - --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), - 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), - 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), - 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); - --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), - 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), - 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), - 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), - 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), - 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%)); - --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)); - --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), - var(--inner-shadow-highlight); - --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), - var(--inner-shadow-highlight); - --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), - var(--inner-shadow-highlight); - --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), - var(--inner-shadow-highlight); - --ratio-square: 1; - --ratio-landscape: 4/3; - --ratio-portrait: 3/4; - --ratio-widescreen: 16/9; - --ratio-ultrawide: 18/5; - --ratio-golden: 1.618/1; - --gray-0: #f8f9fa; - --gray-1: #f1f3f5; - --gray-2: #e9ecef; - --gray-3: #dee2e6; - --gray-4: #ced4da; - --gray-5: #adb5bd; - --gray-6: #868e96; - --gray-7: #495057; - --gray-8: #343a40; - --gray-9: #212529; - --gray-10: #16191d; - --gray-11: #0d0f12; - --gray-12: #030507; - --stone-0: #f8fafb; - --stone-1: #f2f4f6; - --stone-2: #ebedef; - --stone-3: #e0e4e5; - --stone-4: #d1d6d8; - --stone-5: #b1b6b9; - --stone-6: #979b9d; - --stone-7: #7e8282; - --stone-8: #666968; - --stone-9: #50514f; - --stone-10: #3a3a37; - --stone-11: #252521; - --stone-12: #121210; - --red-0: #fff5f5; - --red-1: #ffe3e3; - --red-2: #ffc9c9; - --red-3: #ffa8a8; - --red-4: #ff8787; - --red-5: #ff6b6b; - --red-6: #fa5252; - --red-7: #f03e3e; - --red-8: #e03131; - --red-9: #c92a2a; - --red-10: #b02525; - --red-11: #962020; - --red-12: #7d1a1a; - --pink-0: #fff0f6; - --pink-1: #ffdeeb; - --pink-2: #fcc2d7; - --pink-3: #faa2c1; - --pink-4: #f783ac; - --pink-5: #f06595; - --pink-6: #e64980; - --pink-7: #d6336c; - --pink-8: #c2255c; - --pink-9: #a61e4d; - --pink-10: #8c1941; - --pink-11: #731536; - --pink-12: #59102a; - --purple-0: #f8f0fc; - --purple-1: #f3d9fa; - --purple-2: #eebefa; - --purple-3: #e599f7; - --purple-4: #da77f2; - --purple-5: #cc5de8; - --purple-6: #be4bdb; - --purple-7: #ae3ec9; - --purple-8: #9c36b5; - --purple-9: #862e9c; - --purple-10: #702682; - --purple-11: #5a1e69; - --purple-12: #44174f; - --violet-0: #f3f0ff; - --violet-1: #e5dbff; - --violet-2: #d0bfff; - --violet-3: #b197fc; - --violet-4: #9775fa; - --violet-5: #845ef7; - --violet-6: #7950f2; - --violet-7: #7048e8; - --violet-8: #6741d9; - --violet-9: #5f3dc4; - --violet-10: #5235ab; - --violet-11: #462d91; - --violet-12: #3a2578; - --indigo-0: #edf2ff; - --indigo-1: #dbe4ff; - --indigo-2: #bac8ff; - --indigo-3: #91a7ff; - --indigo-4: #748ffc; - --indigo-5: #5c7cfa; - --indigo-6: #4c6ef5; - --indigo-7: #4263eb; - --indigo-8: #3b5bdb; - --indigo-9: #364fc7; - --indigo-10: #2f44ad; - --indigo-11: #283a94; - --indigo-12: #21307a; - --blue-0: #e7f5ff; - --blue-1: #d0ebff; - --blue-2: #a5d8ff; - --blue-3: #74c0fc; - --blue-4: #4dabf7; - --blue-5: #339af0; - --blue-6: #228be6; - --blue-7: #1c7ed6; - --blue-8: #1971c2; - --blue-9: #1864ab; - --blue-10: #145591; - --blue-11: #114678; - --blue-12: #0d375e; - --cyan-0: #e3fafc; - --cyan-1: #c5f6fa; - --cyan-2: #99e9f2; - --cyan-3: #66d9e8; - --cyan-4: #3bc9db; - --cyan-5: #22b8cf; - --cyan-6: #15aabf; - --cyan-7: #1098ad; - --cyan-8: #0c8599; - --cyan-9: #0b7285; - --cyan-10: #095c6b; - --cyan-11: #074652; - --cyan-12: #053038; - --teal-0: #e6fcf5; - --teal-1: #c3fae8; - --teal-2: #96f2d7; - --teal-3: #63e6be; - --teal-4: #38d9a9; - --teal-5: #20c997; - --teal-6: #12b886; - --teal-7: #0ca678; - --teal-8: #099268; - --teal-9: #087f5b; - --teal-10: #066649; - --teal-11: #054d37; - --teal-12: #033325; - --green-0: #ebfbee; - --green-1: #d3f9d8; - --green-2: #b2f2bb; - --green-3: #8ce99a; - --green-4: #69db7c; - --green-5: #51cf66; - --green-6: #40c057; - --green-7: #37b24d; - --green-8: #2f9e44; - --green-9: #2b8a3e; - --green-10: #237032; - --green-11: #1b5727; - --green-12: #133d1b; - --lime-0: #f4fce3; - --lime-1: #e9fac8; - --lime-2: #d8f5a2; - --lime-3: #c0eb75; - --lime-4: #a9e34b; - --lime-5: #94d82d; - --lime-6: #82c91e; - --lime-7: #74b816; - --lime-8: #66a80f; - --lime-9: #5c940d; - --lime-10: #4c7a0b; - --lime-11: #3c6109; - --lime-12: #2c4706; - --yellow-0: #fff9db; - --yellow-1: #fff3bf; - --yellow-2: #ffec99; - --yellow-3: #ffe066; - --yellow-4: #ffd43b; - --yellow-5: #fcc419; - --yellow-6: #fab005; - --yellow-7: #f59f00; - --yellow-8: #f08c00; - --yellow-9: #e67700; - --yellow-10: #b35c00; - --yellow-11: #804200; - --yellow-12: #663500; - --orange-0: #fff4e6; - --orange-1: #ffe8cc; - --orange-2: #ffd8a8; - --orange-3: #ffc078; - --orange-4: #ffa94d; - --orange-5: #ff922b; - --orange-6: #fd7e14; - --orange-7: #f76707; - --orange-8: #e8590c; - --orange-9: #d9480f; - --orange-10: #bf400d; - --orange-11: #99330b; - --orange-12: #802b09; - --choco-0: #fff8dc; - --choco-1: #fce1bc; - --choco-2: #f7ca9e; - --choco-3: #f1b280; - --choco-4: #e99b62; - --choco-5: #df8545; - --choco-6: #d46e25; - --choco-7: #bd5f1b; - --choco-8: #a45117; - --choco-9: #8a4513; - --choco-10: #703a13; - --choco-11: #572f12; - --choco-12: #3d210d; - --brown-0: #faf4eb; - --brown-1: #ede0d1; - --brown-2: #e0cab7; - --brown-3: #d3b79e; - --brown-4: #c5a285; - --brown-5: #b78f6d; - --brown-6: #a87c56; - --brown-7: #956b47; - --brown-8: #825b3a; - --brown-9: #6f4b2d; - --brown-10: #5e3a21; - --brown-11: #4e2b15; - --brown-12: #422412; - --sand-0: #f8fafb; - --sand-1: #e6e4dc; - --sand-2: #d5cfbd; - --sand-3: #c2b9a0; - --sand-4: #aea58c; - --sand-5: #9a9178; - --sand-6: #867c65; - --sand-7: #736a53; - --sand-8: #5f5746; - --sand-9: #4b4639; - --sand-10: #38352d; - --sand-11: #252521; - --sand-12: #121210; - --camo-0: #f9fbe7; - --camo-1: #e8ed9c; - --camo-2: #d2df4e; - --camo-3: #c2ce34; - --camo-4: #b5bb2e; - --camo-5: #a7a827; - --camo-6: #999621; - --camo-7: #8c851c; - --camo-8: #7e7416; - --camo-9: #6d6414; - --camo-10: #5d5411; - --camo-11: #4d460e; - --camo-12: #36300a; - --jungle-0: #ecfeb0; - --jungle-1: #def39a; - --jungle-2: #d0e884; - --jungle-3: #c2dd6e; - --jungle-4: #b5d15b; - --jungle-5: #a8c648; - --jungle-6: #9bbb36; - --jungle-7: #8fb024; - --jungle-8: #84a513; - --jungle-9: #7a9908; - --jungle-10: #658006; - --jungle-11: #516605; - --jungle-12: #3d4d04; - --gradient-1: linear-gradient( - to bottom right, - #1f005c, - #5b0060, - #870160, - #ac255e, - #ca485c, - #e16b5c, - #f39060, - #ffb56b - ); - --gradient-2: linear-gradient(to bottom right, #48005c, #8300e2, #a269ff); - --gradient-3: radial-gradient(circle at top right, #0ff, rgba(0, 255, 255, 0)), - radial-gradient(circle at bottom left, #ff1492, rgba(255, 20, 146, 0)); - --gradient-4: linear-gradient(to bottom right, #00f5a0, #00d9f5); - --gradient-5: conic-gradient(from -270deg at 75% 110%, #f0f, #fffaf0); - --gradient-6: conic-gradient(from -90deg at top left, #000, #fff); - --gradient-7: linear-gradient(to bottom right, #72c6ef, #004e8f); - --gradient-8: conic-gradient(from 90deg at 50% 0%, #111, 50%, #222, #111); - --gradient-9: conic-gradient(from 0.5turn at bottom center, #add8e6, #fff); - --gradient-10: conic-gradient( - from 90deg at 40% -25%, - gold, - #f79d03, - #ee6907, - #e6390a, - #de0d0d, - #d61039, - #cf1261, - #c71585, - #cf1261, - #d61039, - #de0d0d, - #ee6907, - #f79d03, - gold, - gold, - gold - ); - --gradient-11: conic-gradient(at bottom left, #ff1493, cyan); - --gradient-12: conic-gradient(from 90deg at 25% -10%, #ff4500, #d3f340, #7bee85, #afeeee, #7bee85); - --gradient-13: radial-gradient( - circle at 50% 200%, - #000142, - #3b0083, - #b300c3, - #ff059f, - #ff4661, - #ffad86, - #fff3c7 - ); - --gradient-14: conic-gradient(at top right, lime, cyan); - --gradient-15: linear-gradient(to bottom right, #c7d2fe, #fecaca, #fef3c7); - --gradient-16: radial-gradient(circle at 50% -250%, #374151, #111827, #000); - --gradient-17: conic-gradient(from -90deg at 50% -25%, blue, #8a2be2); - --gradient-18: linear-gradient(0deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 75%), - linear-gradient(60deg, rgba(255, 255, 0, 0.8), rgba(255, 255, 0, 0) 75%), - linear-gradient(120deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 75%), - linear-gradient(180deg, rgba(0, 255, 255, 0.8), rgba(0, 255, 255, 0) 75%), - linear-gradient(240deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 75%), - linear-gradient(300deg, rgba(255, 0, 255, 0.8), rgba(255, 0, 255, 0) 75%); - --gradient-19: linear-gradient(to bottom right, #ffe259, #ffa751); - --gradient-20: conic-gradient(from -135deg at -10% center, orange, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4); - --gradient-21: conic-gradient(from -90deg at 25% 115%, red, #f06, #f0c, #c0f, #60f, #00f, #00f, #00f, #00f); - --gradient-22: linear-gradient(to bottom right, #acb6e5, #86fde8); - --gradient-23: linear-gradient(to bottom right, #536976, #292e49); - --gradient-24: conic-gradient(from 0.5turn at 0% 0%, #00c476, 10%, #82b0ff, 90%, #00c476); - --gradient-25: conic-gradient(at 125% 50%, #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7); - --gradient-26: linear-gradient(to bottom right, #9796f0, #fbc7d4); - --gradient-27: conic-gradient(from 0.5turn at bottom left, #ff1493, #639); - --gradient-28: conic-gradient(from -90deg at 50% 105%, #fff, orchid); - --gradient-29: radial-gradient(circle at top right, #bfb3ff, rgba(191, 179, 255, 0)), - radial-gradient(circle at bottom left, #86acf9, rgba(134, 172, 249, 0)); - --gradient-30: radial-gradient(circle at top right, #00ff80, rgba(0, 255, 128, 0)), - radial-gradient(circle at bottom left, #adffd6, rgba(173, 255, 214, 0)); - --noise-1: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --noise-2: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --noise-3: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --noise-4: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --noise-5: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); - --noise-filter-1: contrast(300%) brightness(100%); - --noise-filter-2: contrast(200%) brightness(150%); - --noise-filter-3: contrast(200%) brightness(250%); - --noise-filter-4: contrast(200%) brightness(500%); - --noise-filter-5: contrast(200%) brightness(1000%); - --animation-fade-in: fade-in 0.5s var(--ease-3); - --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); - --animation-fade-out: fade-out 0.5s var(--ease-3); - --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); - --animation-scale-up: scale-up 0.5s var(--ease-3); - --animation-scale-down: scale-down 0.5s var(--ease-3); - --animation-slide-out-up: slide-out-up 0.5s var(--ease-3); - --animation-slide-out-down: slide-out-down 0.5s var(--ease-3); - --animation-slide-out-right: slide-out-right 0.5s var(--ease-3); - --animation-slide-out-left: slide-out-left 0.5s var(--ease-3); - --animation-slide-in-up: slide-in-up 0.5s var(--ease-3); - --animation-slide-in-down: slide-in-down 0.5s var(--ease-3); - --animation-slide-in-right: slide-in-right 0.5s var(--ease-3); - --animation-slide-in-left: slide-in-left 0.5s var(--ease-3); - --animation-shake-x: shake-x 0.75s var(--ease-out-5); - --animation-shake-y: shake-y 0.75s var(--ease-out-5); - --animation-spin: spin 2s linear infinite; - --animation-ping: ping 5s var(--ease-out-3) infinite; - --animation-blink: blink 1s var(--ease-out-3) infinite; - --animation-float: float 3s var(--ease-in-out-3) infinite; - --animation-bounce: bounce 2s var(--ease-squish-2) infinite; - --animation-pulse: pulse 2s var(--ease-out-3) infinite; - --border-size-1: 1px; - --border-size-2: 2px; - --border-size-3: 5px; - --border-size-4: 10px; - --border-size-5: 25px; - --radius-1: 2px; - --radius-2: 5px; - --radius-3: 1rem; - --radius-4: 2rem; - --radius-5: 4rem; - --radius-6: 8rem; - --radius-round: 1e5px; - --radius-blob-1: 30% 70% 70% 30%/53% 30% 70% 47%; - --radius-blob-2: 53% 47% 34% 66%/63% 46% 54% 37%; - --radius-blob-3: 37% 63% 56% 44%/49% 56% 44% 51%; - --radius-blob-4: 63% 37% 37% 63%/43% 37% 63% 57%; - --radius-blob-5: 49% 51% 48% 52%/57% 44% 56% 43%; - --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1)); - --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2)); - --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3)); - --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4)); - --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5)); - --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6)); - } - - @media (prefers-color-scheme: dark) { - :root { - --shadow-color: 220 40% 2%; - --shadow-strength: 25%; - --inner-shadow-highlight: inset 0 -0.5px 0 0 hsla(0, 0%, 100%, 0.067), - inset 0 0.5px 0 0 rgba(0, 0, 0, 0.467); - } - } -}