| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <title>Lightning CSS</title> | |
| <link rel="icon" href="favicon.svg"> | |
| <link rel="mask-icon" href="favicon.svg" color="#f9bb03"> | |
| <meta name="description" content="An extremely fast CSS parser, transformer, bundler, and minifier."> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:image" content="og.jpeg"> | |
| <meta name="twitter:site" content="@lightningcss"> | |
| <meta name="twitter:creator" content="@lightningcss"> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:locale" content="en_US"> | |
| <meta property="og:url" content="https://lightningcss.dev"> | |
| <meta property="og:title" content="Lightning CSS"> | |
| <meta property="og:description" content="An extremely fast CSS parser, transformer, bundler, and minifier."> | |
| <meta property="og:image" content="og.jpeg"> | |
| <link rel="preload" as="font" type="font/woff2" crossorigin href="https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3"> | |
| <link rel="preload" as="image" href="lightspeed.svg"> | |
| </head> | |
| <body> | |
| <header> | |
| <svg viewBox="495 168 360 654"> | |
| <path class="outer" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/> | |
| <path class="inner" d="M594.41,805c-.71,0-1.43-.15-2.11-.47-2.2-1.03-3.34-3.48-2.72-5.83l67.98-253.71h-140.45c-1.86,0-3.57-1.04-4.44-2.69-.86-1.65-.73-3.65,.34-5.18l26.85-38.35q25.56-36.51,104.91-149.83l106.31-151.82c1.39-1.99,4.01-2.69,6.21-1.66,2.2,1.03,3.34,3.48,2.72,5.83l-67.98,253.71h140.45c1.86,0,3.57,1.04,4.43,2.69,.86,1.65,.73,3.65-.34,5.18l-238.07,340c-.96,1.37-2.51,2.13-4.1,2.13Zm-67.69-270h137.37c1.55,0,3.02,.72,3.97,1.96,.95,1.23,1.27,2.84,.86,4.34l-62.33,232.61,216.29-308.9h-137.36c-1.55,0-3.02-.72-3.97-1.96-.95-1.23-1.27-2.84-.86-4.34l62.33-232.61-90.04,128.59q-79.35,113.32-104.91,149.83l-21.34,30.48Z"/> | |
| </svg> | |
| <h1>Lightning CSS</h1> | |
| <h2>An extremely fast CSS parser, transformer, bundler, and minifier.</h2> | |
| <p><a href="./playground/index.html">Playground</a> • <a href="docs.html">Docs</a> • <a href="https://docs.rs/lightningcss" target="_blank">Rust docs</a> • <a href="https://npmjs.com/lightningcss" target="_blank">npm</a> • <a href="https://github.com/parcel-bundler/lightningcss" target="_blank">GitHub</a></p> | |
| </header> | |
| <main> | |
| <section class="warp"> | |
| <h3>Light speed</h3> | |
| <p><strong>Lightning CSS is over 100x faster than comparable JavaScript-based tools.</strong> It can minify over 2.7 million lines of code per second on a single thread.</p> | |
| <p style="font-size: 0.85em">Lightning CSS is written in Rust, a native systems programming language. It was built with performance in mind from the start, designed to make efficient use of memory, and limit AST passes.</p> | |
| <p><a href="docs.html">Get started →</a></p> | |
| <figure> | |
| <div class="chart" role="img" aria-label="Build time chart. CSSNano – 544ms, ESBuild – 17.2ms, Lightning CSS – 4.16ms" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap"> | |
| <div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Build time</div> | |
| <div style="position: absolute; left: 90px; right: 15px; height: 110px"> | |
| <div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: white"></div> | |
| <div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0ms</div> | |
| <div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: white"></div> | |
| <div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">150ms</div> | |
| <div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: white"></div> | |
| <div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">300ms</div> | |
| <div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: white"></div> | |
| <div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">450ms</div> | |
| <div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: white"></div> | |
| <div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">600ms</div> | |
| <div class="bars" style="position: absolute; left: 1px; top: 0; right: 70px; --cssnano: 544.81; --esbuild: 17.2; --lightningcss: 4.16"> | |
| <div style="position: absolute; top: 5px; left: 0; width: 100%; height: 20px; background: var(--gold)"></div> | |
| <div class="label" style="position: absolute; left: calc(100% + 5px); top: 5px; line-height: 20px; font-size: 12px">544.81ms</div> | |
| <div style="position: absolute; top: 35px; left: 0; width: calc(1% * var(--esbuild) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div> | |
| <div style="position: absolute; left: calc(1% * var(--esbuild) / var(--cssnano) * 100 + 5px); top: 35px; line-height: 20px; font-size: 12px">17.2ms</div> | |
| <div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--cssnano) * 100); height: 20px; background: var(--gold)"></div> | |
| <div style="position: absolute; left: calc(1% * var(--lightningcss) / var(--cssnano) * 100 + 5px); top: 65px; line-height: 20px; font-size: 12px">4.16ms</div> | |
| </div> | |
| <style> | |
| @media (width < 700px) { | |
| .warp .bars { | |
| right: 5px !important; | |
| } | |
| .warp .bars .label { | |
| left: auto !important; | |
| right: 5px; | |
| color: black; | |
| } | |
| } | |
| </style> | |
| <div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div> | |
| <div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div> | |
| <div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div> | |
| </div> | |
| </div> | |
| <figcaption>Time to minify Bootstrap 4 (~10,000 lines). See the <a href="https://github.com/parcel-bundler/lightningcss#benchmarks" target="_blank">readme</a> for more benchmarks.</figcaption> | |
| </figure> | |
| </section> | |
| <section class="future"> | |
| <div class="inner"> | |
| <h3 class="title">Live in the future</h3> | |
| <div class="description"> | |
| <p><strong>Lightning CSS lets you use modern CSS features and future syntax today.</strong> Features such as CSS nesting, custom media queries, high gamut color spaces, logical properties, and new selector features are automatically converted to more compatible syntax based on your browser targets.</p> | |
| <p>Lightning CSS also automatically adds vendor prefixes for your browser targets, so you can keep your source code clean and repetition free.</p> | |
| <p><a href="transpilation.html">Learn more →</a></p> | |
| </div> | |
| <div class="example"> | |
| <div class="targets"><h4>Target Browsers</h4><code>last 2 versions</code></div> | |
| <div class="box input"><h4 class="title">Input</h4><pre> | |
| <code><span class="class">.foo</span> { | |
| <span class="property">color</span>: <span class="keyword">oklab</span>(<span class="number">59.686% 0.1009 0.1192</span>); | |
| }</code></pre></div> | |
| <div class="box"><h4 class="title">Output</h4><pre> | |
| <code><span class="class">.foo</span> { | |
| <span class="property">color</span>: <span class="number">#c65d07</span>; | |
| <span class="property">color</span>: <span class="keyword">color</span>(<span class="keyword">display-p3</span> <span class="number">.724144 .386777 .148795</span>); | |
| <span class="property">color</span>: <span class="keyword">lab</span>(<span class="number">52.2319% 40.1449 59.9171</span>); | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="crush"> | |
| <h3>Crush it!</h3> | |
| <p style="font-weight: bold;">Lightning CSS is not only fast when it comes to build time. It produces smaller output, so your website loads faster too.</p> | |
| <p style="font-size: 0.85em">The Lightning CSS minifier combines longhand properties into shorthands, removes unnecessary vendor prefixes, merges compatible adjacent rules, removes unnecessary default values, reduces <code>calc()</code> expressions, shortens colors, minifies gradients, and much more.</p> | |
| <p><a href="minification.html">Details →</a></p> | |
| <figure> | |
| <div class="chart" role="img" aria-label="Output size chart. CSSNano – 155.89 KB, ESBuild – 156.57 KB, Lightning CSS – 139.74 KB" style="max-width: 800px; margin-top: 40px; position: relative; padding-bottom: 110px; white-space: nowrap"> | |
| <div style="text-align: center; font-weight: bold; font-size: 15px; margin-left: 90px; margin-bottom: 12px">Output size</div> | |
| <div style="position: absolute; left: 90px; right: 15px; height: 110px"> | |
| <div style="position: absolute; top: 0; left: 0; bottom: 20px; width: 1px; background: black"></div> | |
| <div style="position: absolute; left: 0; bottom: 0; transform: translateX(-50%); font-size: 12px">0 KB</div> | |
| <div class="line" style="position: absolute; top: 0; left: 25%; bottom: 20px; width: 1px; background: black"></div> | |
| <div class="line" style="position: absolute; left: 25%; bottom: 0; transform: translateX(-50%); font-size: 12px">40 KB</div> | |
| <div style="position: absolute; top: 0; left: 50%; bottom: 20px; width: 1px; background: black"></div> | |
| <div style="position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px">80 KB</div> | |
| <div class="line" style="position: absolute; top: 0; left: 75%; bottom: 20px; width: 1px; background: black"></div> | |
| <div class="line" style="position: absolute; left: 75%; bottom: 0; transform: translateX(-50%); font-size: 12px">120 KB</div> | |
| <div style="position: absolute; top: 0; left: 100%; bottom: 20px; width: 1px; background: black"></div> | |
| <div style="position: absolute; left: 100%; bottom: 0; transform: translateX(-50%); font-size: 12px">160 KB</div> | |
| <div style="position: absolute; left: 1px; top: 0; right: 5px; --cssnano: 155.89; --esbuild: 156.57; --lightningcss: 139.74"> | |
| <div style="position: absolute; top: 5px; left: 0; width: calc(1% * var(--cssnano) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div> | |
| <div style="position: absolute; right: calc(100% + 5px - 1% * var(--cssnano) / var(--esbuild) * 100); top: 5px; line-height: 20px; font-size: 12px; color: white">155.89 KB</div> | |
| <div style="position: absolute; top: 35px; left: 0; width: 100%; height: 20px; background: rgb(186, 25, 33)"></div> | |
| <div style="position: absolute; right: 5px; top: 35px; line-height: 20px; font-size: 12px; color: white">156.57 KB</div> | |
| <div style="position: absolute; top: 65px; left: 0; width: calc(1% * var(--lightningcss) / var(--esbuild) * 100); height: 20px; background: rgb(186, 25, 33)"></div> | |
| <div style="position: absolute; right: calc(100% + 5px - 1% * var(--lightningcss) / var(--esbuild) * 100); top: 65px; line-height: 20px; font-size: 12px; color: white">139.74 KB</div> | |
| </div> | |
| <div style="position: absolute; right: calc(100% + 10px); top: 5px; line-height: 20px; font-size: 13px">CSSNano</div> | |
| <div style="position: absolute; right: calc(100% + 10px); top: 35px; line-height: 20px; font-size: 13px">ESBuild</div> | |
| <div style="position: absolute; left: -10px; transform: translateX(-100%); top: 65px; line-height: 20px; font-size: 13px">Lightning CSS</div> | |
| </div> | |
| </div> | |
| <figcaption>Output size after minifying Bootstrap 4 (~10,000 lines). See the <a href="https://github.com/parcel-bundler/lightningcss#benchmarks" target="_blank">readme</a> for more benchmarks.</figcaption> | |
| </figure> | |
| </section> | |
| <section class="modules"> | |
| <div class="compartment main"> | |
| <h3>CSS modules</h3> | |
| <p><strong>Lightning CSS supports CSS modules, which locally scope classes, ids, <code>@keyframes</code>, CSS variables, and more.</strong> This ensures that there are no unintended name clashes between different CSS files.</p> | |
| <p style="font-size: 0.8em">Lightning CSS generates a mapping of the original names to scoped names, which can be used from your JavaScript. This also enables unused classes and variables to be tree-shaken.</p> | |
| <p><a href="css-modules.html">Documentation →</a></p> | |
| </div> | |
| <pre class="compartment input"><code>.heading { | |
| composes: typography from './typography.css'; | |
| color: gray; | |
| }</code></pre> | |
| <pre class="compartment output"><code>.EgL3uq_heading { | |
| color: gray; | |
| }</code></pre> | |
| <pre class="compartment json"><code>{ | |
| "heading": { | |
| "name": "EgL3uq_heading", | |
| "composes": [{ | |
| "type": "dependency", | |
| "name": "typography", | |
| "specifier": "./typography.css" | |
| }] | |
| } | |
| }</code></pre> | |
| </section> | |
| <section class="parser"> | |
| <div> | |
| <h3>Browser grade</h3> | |
| <p><strong>Lightning CSS is written in Rust, using the <a href="https://github.com/servo/rust-cssparser" target="_blank">cssparser</a> and <a href="https://github.com/servo/stylo/tree/main/selectors" target="_blank">selectors</a> crates created by Mozilla and used by Firefox.</strong> These provide a solid CSS-parsing foundation on top of which Lightning CSS implements support for all specific CSS rules and properties.</p> | |
| <p style="font-size: 0.85em">Lightning CSS fully parses every CSS rule, property, and value just as a browser would. This reduces duplicate work for transformers, leading to improved performance and minification.</p> | |
| <p><a href="transforms.html">Custom transforms →</a></p> | |
| </div> | |
| <pre><code><span class="ident">Background</span>([<span class="ident">Background</span> { | |
| image: <span class="ident">Url</span>(<span class="ident">Url</span> { url: <span class="string">"img.png"</span> }), | |
| color: <span class="ident">CssColor</span>(<span class="ident">RGBA</span>(<span class="ident">RGBA</span> { red: <span class="number">0</span>, green: <span class="number">0</span>, blue: <span class="number">0</span>, alpha: <span class="number">0</span> })), | |
| position: <span class="ident">Position</span> { | |
| x: <span class="ident">Length</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">20.0</span>))), | |
| y: <span class="ident">Length</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">10.0</span>))), | |
| }, | |
| repeat: <span class="ident">BackgroundRepeat</span> { | |
| x: <span class="ident">Repeat</span>, | |
| y: <span class="ident">Repeat</span>, | |
| }, | |
| size: <span class="ident">Explicit</span> { | |
| width: <span class="ident">LengthPercentage</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">50.0</span>))), | |
| height: <span class="ident">LengthPercentage</span>(<span class="ident">Dimension</span>(<span class="ident">Px</span>(<span class="number">100.0</span>))), | |
| }, | |
| attachment: <span class="ident">Scroll</span>, | |
| origin: <span class="ident">PaddingBox</span>, | |
| clip: <span class="ident">BorderBox</span>, | |
| }])</code></pre> | |
| </section> | |
| </main> | |
| <footer> | |
| Copyright © 2024 Devon Govett and Parcel Contributors. | |
| </footer> | |
| <style> | |
| html { | |
| color-scheme: dark; | |
| background: #111; | |
| } | |
| body { | |
| font-family: system-ui; | |
| --gold: lch(80% 82.34 80.104); | |
| --gold-text: lch(85% 82.34 80.104); | |
| --gold-shadow: lch(80% 82.34 80.104 / .7); | |
| } | |
| @font-face { | |
| font-family:"din-1451-lt-pro-engschrift"; | |
| src:url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/l?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/d?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/7fa6e1/00000000000000007735bbcd/30/a?primer=388f68b35a7cbf1ee3543172445c23e26935269fadd3b392a13ac7b2903677eb&fvd=n4&v=3") format("opentype"); | |
| font-display:auto;font-style:normal;font-weight:400;font-stretch:normal; | |
| } | |
| @font-face { | |
| font-family:"urbane-rounded"; | |
| src:url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/l?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff2"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/d?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("woff"),url("https://use.typekit.net/af/916187/00000000000000007735bfa0/30/a?primer=81a69539b194230396845be9681d114557adfb35f4cccc679c164afb4aa47365&fvd=n6&v=3") format("opentype"); | |
| font-display:auto;font-style:normal;font-weight:600;font-stretch:normal; | |
| } | |
| header { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 100px 0; | |
| font-size: 16px; | |
| background: radial-gradient(closest-side, lch(80% 82.34 80.104 / .3), transparent); | |
| display: grid; | |
| column-gap: 50px; | |
| grid-template-areas: "logo header" | |
| "logo subheader" | |
| ". links"; | |
| } | |
| header svg { | |
| filter: drop-shadow(0 0 5px var(--gold-shadow)) drop-shadow(0 0 20px var(--gold-shadow)); | |
| grid-area: logo; | |
| place-self: center end; | |
| width: 100px; | |
| } | |
| header svg .outer { | |
| stroke-width: 30px; | |
| stroke: var(--gold); | |
| } | |
| header svg .inner { | |
| fill: lch(100% 82.34 80.104); | |
| } | |
| header h1 { | |
| font-family: urbane-rounded; | |
| font-size: 100px; | |
| -webkit-text-stroke: 3px var(--gold-text); | |
| color: transparent; | |
| filter: drop-shadow(0 0 3px var(--gold-shadow)) drop-shadow(0 0 15px var(--gold)); | |
| padding: 20px 0; | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| } | |
| header h1::selection { | |
| -webkit-text-stroke-color: #fffddd; | |
| background-color: var(--gold-text); | |
| } | |
| header h2 { | |
| font-family: urbane-rounded; | |
| color: lch(65% 85 35); | |
| text-shadow: 0 0 20px lch(65% 85 35); | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| } | |
| header p { | |
| grid-area: links; | |
| } | |
| header a { | |
| font-family: urbane-rounded; | |
| font-size: 1.05em; | |
| color: lch(90% 50.34 80.104); | |
| filter: drop-shadow(0 0 8px lch(90% 50.34 80.104 / .7)); | |
| text-decoration-color: lch(90% 50.34 80.104 / 0); | |
| text-decoration-style: wavy; | |
| text-decoration-thickness: 2px; | |
| text-underline-offset: 2px; | |
| text-decoration-skip-ink: none; | |
| transition: text-decoration-color 150ms; | |
| } | |
| header a:hover { | |
| text-decoration-color: lch(90% 50.34 80.104); | |
| } | |
| @media (width < 950px) { | |
| header { | |
| column-gap: 30px; | |
| } | |
| header h1 { | |
| font-size: 80px; | |
| } | |
| header h2 { | |
| font-size: 20px; | |
| } | |
| header svg { | |
| width: 80px; | |
| } | |
| } | |
| @media (width < 800px) { | |
| header { | |
| column-gap: 15px; | |
| padding: 30px 0; | |
| } | |
| header h1 { | |
| font-size: 60px; | |
| } | |
| header h2 { | |
| font-size: 16px; | |
| } | |
| header a { | |
| font-size: 14px; | |
| } | |
| header svg { | |
| width: 60px; | |
| } | |
| } | |
| @media (width < 500px) { | |
| header { | |
| grid-template-areas: "logo" | |
| "header" | |
| "subheader" | |
| "links"; | |
| place-items: center; | |
| text-align: center; | |
| gap: 8px; | |
| } | |
| header h1 { | |
| font-size: 38px; | |
| -webkit-text-stroke-width: 1.5px; | |
| padding: 0; | |
| } | |
| header h2 { | |
| font-size: 14px; | |
| } | |
| header a { | |
| font-size: 13px; | |
| } | |
| header svg { | |
| place-self: center; | |
| } | |
| } | |
| main { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| main section { | |
| --padding: 60px; | |
| padding: var(--padding); | |
| margin: 60px; | |
| font-size: 22px; | |
| --radius: 50px; | |
| border-radius: var(--radius); | |
| } | |
| main section h3 { | |
| margin-top: 0; | |
| font-size: 1.8em; | |
| } | |
| main section p { | |
| line-height: 1.4em; | |
| } | |
| main p a { | |
| font-weight: bold; | |
| font-size: 0.9em; | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| main p a:hover { | |
| text-decoration: underline; | |
| } | |
| figure { | |
| max-width: 800px; | |
| margin: 0; | |
| } | |
| figcaption { | |
| font-size: 10px; | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| figcaption a { | |
| color: inherit; | |
| } | |
| @media (width < 500px) { | |
| main section { | |
| margin: 20px 10px; | |
| --padding: 20px; | |
| --radius: 20px; | |
| font-size: 16px; | |
| } | |
| } | |
| .warp { | |
| background: black; | |
| color: white; | |
| background-image: radial-gradient(rgb(10 3 34 / .2), rgb(10 3 34 / .7)), url(lightspeed.svg); | |
| background-size: cover; | |
| background-position: center center; | |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15); | |
| } | |
| .warp h3 { | |
| color: var(--gold-text); | |
| text-shadow: 0 0 15px var(--gold-shadow); | |
| } | |
| .warp p { | |
| max-width: 900px; | |
| } | |
| .warp figcaption { | |
| color: #aaa; | |
| } | |
| .warp p a { | |
| color: var(--gold-text); | |
| text-shadow: 0 0 7px var(--gold-shadow); | |
| } | |
| .crush { | |
| background-image: url(crush.svg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='rgb(0 0 0 / .2)' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"), linear-gradient(to bottom right, lch(75% 82.34 80.104), lch(68% 82.34 80.104)); | |
| background-size: 600px auto, auto, auto; | |
| background-repeat: no-repeat, repeat; | |
| background-position: bottom right; | |
| color: black; | |
| padding-right: 550px; | |
| } | |
| .crush h3 { | |
| font-size: 3em; | |
| margin-bottom: 0; | |
| color: lch(42.758% 73.588 34.159); | |
| -webkit-text-stroke: 1px black; | |
| text-shadow: 3px 3px 0 black; | |
| text-transform: uppercase; | |
| width: fit-content; | |
| word-spacing: .1em; | |
| } | |
| .crush figcaption { | |
| color: #222; | |
| } | |
| .crush p a { | |
| color: lch(30% 73.588 34.159); | |
| } | |
| @media (width < 1200px) { | |
| .crush { | |
| padding-right: var(--padding); | |
| padding-bottom: 500px; | |
| background-position: bottom right; | |
| background-size: auto 500px, auto, auto; | |
| } | |
| } | |
| @media (width < 500px) { | |
| .crush { | |
| padding-bottom: 300px; | |
| background-size: auto 300px, auto, auto; | |
| } | |
| } | |
| .future { | |
| background: #215178; | |
| color: white; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='rgba(255,255,255,0.05)' fill-opacity='1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), radial-gradient(#1F4D97, #030B16); | |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); | |
| position: relative; | |
| --color: lch(85% 58 205); | |
| } | |
| .future .title { | |
| font-family: din-1451-lt-pro-engschrift, sans-serif; | |
| text-transform: uppercase; | |
| position: absolute; | |
| --height: 1.2em; | |
| top: calc(var(--height) * -.5); | |
| left: calc(var(--height) * 1.5); | |
| margin-left: -5px; | |
| background: var(--color); | |
| filter: drop-shadow(0 0 8px var( --color)); | |
| width: fit-content; | |
| color: #030B16; | |
| margin-top: 0; | |
| } | |
| .future h3.title { | |
| font-size: 1.6em; | |
| line-height: var(--height); | |
| } | |
| .future h4.title { | |
| font-size: 16px; | |
| line-height: var(--height); | |
| } | |
| .future .title:before { | |
| content: ''; | |
| display: inline-block; | |
| position: absolute; | |
| right: 100%; | |
| width: 0; | |
| height: 0; | |
| border-top: var(--height) solid var( --color); | |
| border-left: var(--height) solid transparent; | |
| } | |
| .future .title:after { | |
| content: ''; | |
| display: inline-block; | |
| position: absolute; | |
| left: 100%; | |
| width: 0; | |
| height: 0; | |
| border-bottom: var(--height) solid var( --color); | |
| border-right: var(--height) solid transparent; | |
| } | |
| .future .inner { | |
| border: 2px solid var(--color); | |
| box-shadow: 0 0 15px var( --color), inset 0 0 15px var( --color); | |
| border-radius: 20px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: row; | |
| position: relative; | |
| } | |
| .future .description { | |
| margin: 40px; | |
| } | |
| .future .description p:first-child { | |
| margin-top: 0; | |
| } | |
| .future .description p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .future .example { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| flex-shrink: 0; | |
| } | |
| .future .box { | |
| --color: lch(64% 103 0); | |
| border: 2px solid var(--color); | |
| background: lch(64% 103 0 / .15); | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px var(--color), inset 0 0 10px var(--color); | |
| padding: 15px; | |
| text-shadow: 0 0 8px var(--color); | |
| position: relative; | |
| width: fit-content; | |
| margin-left: auto; | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| } | |
| .future .box code { | |
| font-size: 14px; | |
| display: block; | |
| overflow: visible auto; | |
| } | |
| .future .box .title { | |
| color: white | |
| } | |
| .future .box .property { | |
| color: white; | |
| } | |
| .future .box .keyword { | |
| color: var(--color); | |
| } | |
| .future .box .number { | |
| color: lch(71% 103 52); | |
| } | |
| .future .box .class { | |
| color: lch(87% 107 89); | |
| } | |
| .future .targets h4 { | |
| font-family: din-1451-lt-pro-engschrift, sans-serif; | |
| text-transform: uppercase; | |
| display: inline; | |
| vertical-align: middle; | |
| margin: 0; | |
| margin-right: 10px; | |
| color: lch(85% 58 205 / .7); | |
| } | |
| .future .targets { | |
| border: 2px solid lch(85% 58 205 / .5); | |
| box-shadow: 0 0 10px lch(85% 58 205 / .5); | |
| border-radius: 6px; | |
| padding: 8px; | |
| width: fit-content; | |
| margin-left: auto; | |
| font-size: 16px; | |
| } | |
| .future .targets code { | |
| font-size: 15px; | |
| } | |
| .future a { | |
| color: lch(85% 58 205); | |
| text-shadow: 0 0 10px lch(85% 58 205 / .6); | |
| } | |
| @media (width < 1200px) { | |
| .future .inner { | |
| flex-direction: column; | |
| } | |
| .future .box, .future .targets { | |
| margin-left: 0 | |
| } | |
| } | |
| @media (width < 500px) { | |
| .future .description { | |
| margin: 20px 4px; | |
| } | |
| .future .box { | |
| padding: 10px; | |
| } | |
| .future .targets h4 { | |
| display: block; | |
| } | |
| } | |
| .parser { | |
| background-image: linear-gradient(rgb(0 0 0 / .1), rgb(0 0 0 / .1)), image-set("metal.jpeg?as=webp&width=1200" 1x, "metal.jpeg?as=webp&width=2400" 2x); | |
| background-size: cover; | |
| color: black; | |
| text-shadow: inset 0 2px 5px black; | |
| position: relative; | |
| --inset: 35px; | |
| padding: calc(var(--padding) + var(--inset) * .6); | |
| display: flex; | |
| column-gap: 40px; | |
| row-gap: 20px; | |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); | |
| } | |
| .parser > * { | |
| z-index: 2; | |
| } | |
| .parser:before { | |
| content: ''; | |
| position: absolute; | |
| inset: calc(var(--inset) / 2); | |
| border-radius: calc(var(--radius) * .8); | |
| box-shadow: inset 2px 3px 10px rgb(0 0 0 / .7), 1px 1px 0 rgb(255 255 255 / .4); | |
| background: rgb(0 0 0 / .05); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .parser:after { | |
| content: ''; | |
| position: absolute; | |
| inset: var(--inset); | |
| border-radius: calc(var(--radius) * .4); | |
| box-shadow: inset 1px 1px 0 rgb(255 255 255 / .4), 2px 3px 10px rgb(0 0 0 / .7); | |
| background: rgb(255 255 255 / .25); | |
| pointer-events: none; | |
| z-index: 1; | |
| } | |
| .parser h3 { | |
| font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| text-shadow: 3px 3px 2px rgba(255,255,255,0.35); | |
| background-color: rgba(0 0 0 / .65); | |
| color: transparent; | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| } | |
| .parser p { | |
| text-shadow: 0 1px 0 white; | |
| } | |
| .parser p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .parser pre { | |
| padding: 20px; | |
| width: fit-content; | |
| margin: 0; | |
| margin-right: -40px; | |
| font-size: .6em; | |
| display: flex; | |
| align-items: end; | |
| text-shadow: 0 1px 0 rgb(255 255 255 / .6); | |
| font-weight: bold; | |
| overflow: auto; | |
| max-width: 100%; | |
| flex-shrink: 0; | |
| margin-top: auto; | |
| } | |
| .parser pre .ident { | |
| color: lch(30% 80 300); | |
| } | |
| .parser pre .string { | |
| color: lch(40% 108 144); | |
| } | |
| .parser pre .number { | |
| color: lch(35% 117 348); | |
| } | |
| .parser a { | |
| color: black; | |
| } | |
| .parser p:last-of-type a { | |
| font-size: 0.8em; | |
| } | |
| @media (width < 1200px) { | |
| .parser { | |
| flex-direction: column; | |
| } | |
| .parser pre { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| } | |
| @media (width < 500px) { | |
| .parser { | |
| --inset: 25px; | |
| } | |
| .parser p, .parser pre { | |
| text-shadow: 0 1px 0 rgb(255 255 255 / .6); | |
| } | |
| } | |
| .modules { | |
| background: black; | |
| box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 2px 2px 5px rgb(255 255 255 / .2); | |
| padding: 0; | |
| display: grid; | |
| grid-template-areas: "main input input" | |
| "main output json"; | |
| } | |
| .modules .compartment { | |
| padding: max(20px, calc(var(--padding) / 2)); | |
| border: 20px solid black; | |
| border-radius: 40px; | |
| --shadow-size: 20px; | |
| --inner-shadow-size: 2px; | |
| box-shadow: inset 0 0 0 1px rgb(255 255 255 / .15), inset -1px -1px var(--inner-shadow-size) rgb(255 255 255 / .3), inset 4px 8px var(--shadow-size) rgb(0 0 0 / .9); | |
| margin: 0; | |
| overflow: auto; | |
| background: #ba1921; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23fff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .modules .compartment.main { | |
| grid-area: main; | |
| border-top-left-radius: 50px; | |
| border-bottom-left-radius: 50px; | |
| padding: 60px 60px 50px 60px; | |
| margin-right: -20px; | |
| --shadow-size: 40px; | |
| --inner-shadow-size: 4px; | |
| } | |
| .modules .compartment.main p:last-child { | |
| margin-bottom: 0; | |
| } | |
| .modules .compartment:not(.main) { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modules h3 { | |
| text-transform: uppercase; | |
| font-size: 1.45em; | |
| border-top: 4px solid white; | |
| border-bottom: 4px solid white; | |
| line-height: 1.5em; | |
| width: fit-content; | |
| } | |
| .modules p { | |
| font-family: Georgia, 'Times New Roman', Times, serif; | |
| font-size: 0.87em; | |
| } | |
| .modules pre { | |
| font-size: 14px; | |
| } | |
| .modules .compartment.input { | |
| grid-area: input; | |
| border-top-right-radius: 50px; | |
| } | |
| .modules .compartment.output { | |
| grid-area: output; | |
| margin-top: -20px; | |
| } | |
| .modules .compartment.json { | |
| grid-area: json; | |
| margin-top: -20px; | |
| margin-left: -20px; | |
| border-bottom-right-radius: 50px; | |
| } | |
| @media (width < 1200px) { | |
| .modules { | |
| grid-template-areas: "main main" | |
| "input input" | |
| "output json"; | |
| } | |
| .modules .compartment.main { | |
| border-top-right-radius: 50px; | |
| margin-right: 0; | |
| } | |
| .modules .compartment.input { | |
| margin-top: -20px; | |
| } | |
| .modules .compartment.output { | |
| border-bottom-left-radius: 50px; | |
| } | |
| .modules .compartment:not(.main) { | |
| justify-content: start; | |
| } | |
| } | |
| @media (width < 500px) { | |
| .modules { | |
| grid-template-areas: "main" "input" "output" "json"; | |
| } | |
| .modules .compartment { | |
| border-radius: calc(var(--radius) * 1.5) !important; | |
| --shadow-size: 15px; | |
| } | |
| .modules .compartment.main { | |
| padding: 30px; | |
| --shadow-size: 25px; | |
| } | |
| .modules .compartment.json { | |
| margin: 0; | |
| margin-top: -20px; | |
| } | |
| .modules pre { | |
| font-size: 12px; | |
| } | |
| } | |
| footer { | |
| font-size: 12px; | |
| color: #666; | |
| text-align: center; | |
| padding-bottom: 20px; | |
| } | |
| @media (width < 600px) { | |
| .chart .line { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </body> | |
| </html> |