/*! Xwin Surfaces — backgrounds, patterns and light for any box. Generated by design-lab/build.js from * design-lab/src/xwin-surfaces.css + src/surfaces-svg.js. Edit the source, not this file. * * One box = one base + at most one pattern + at most one light: *
…
* Everything reads the site's theme tokens, so a surface is right on all 22 themes. * Tuning (set on the box): --xs-x / --xs-y where light and rings sit (default 80% 50%) * --xs-p pattern strength (0–1) --xs-l light strength (0–1) * --xs-ink pattern colour (auto: dark on the theme colour, text colour elsewhere) */ /* ---------- the frame ---------- */ .xs{position:relative;isolation:isolate;--xs-x:80%;--xs-y:50%;--xs-p:.13;--xs-l:1;--xs-ink:var(--color-9);--xs-hi:#fff;--xs-fade:linear-gradient(#000,#000)} /* pattern and light paint above the box's own background and below its content (isolation + z-index -1), so the content needs no extra positioning and a figure may still stand out of the box */ .xs::before,.xs::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none} .xs::before{display:var(--xs-pd,none);background:var(--xs-ink);opacity:var(--xs-p); -webkit-mask:var(--xs-m) var(--xs-mp,center)/var(--xs-ms,auto) var(--xs-mr,repeat),var(--xs-fade) 0 0/100% 100% no-repeat;-webkit-mask-composite:source-in; mask:var(--xs-m) var(--xs-mp,center)/var(--xs-ms,auto) var(--xs-mr,repeat),var(--xs-fade) 0 0/100% 100% no-repeat;mask-composite:intersect} .xs::after{display:var(--xs-ld,none);background:var(--xs-light);opacity:var(--xs-l);mix-blend-mode:var(--xs-blend,normal)} /* ---------- bases ---------- */ /* the theme colour with depth: lighter at the top left, deeper at the bottom right */ .xs-b-accent{--xs-ink:#000;color:#000;background:linear-gradient(135deg,color-mix(in srgb,var(--mainColor) 82%,#fff) 0%,var(--mainColor) 42%,color-mix(in srgb,var(--mainColor) 76%,#000) 100%)} /* a card: the site's card surface with a quiet fall of light */ .xs-b-surface{background:linear-gradient(160deg,color-mix(in srgb,var(--color-3) 70%,var(--color-2)) 0%,var(--color-2) 55%,color-mix(in srgb,var(--color-2) 85%,var(--color-1)) 100%)} /* deep: the page ground with the theme colour glowing through */ .xs-b-deep{background:radial-gradient(120% 140% at var(--xs-x) var(--xs-y),color-mix(in srgb,var(--mainColor) 26%,var(--color-1)) 0%,var(--color-1) 62%),var(--color-1)} /* night: a fixed dark stage for pictures and hero lines, the same on light themes */ .xs-b-night{--xs-ink:#fff;color:#fff;background:radial-gradient(110% 130% at var(--xs-x) var(--xs-y),color-mix(in srgb,var(--mainColor) 30%,#0b0d0c) 0%,#0b0d0c 65%),#0b0d0c} /* clear: no base at all, for laying a pattern or light over a photo */ .xs-b-clear{--xs-ink:#fff;background:transparent} /* ---------- patterns ---------- */ .xs-p-brand{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10.8%206h2.4v4.8H18v2.4h-4.8V18h-2.4v-4.8H6v-2.4h4.8z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M36%2030.4%2041.6%2036%2036%2041.6%2030.4%2036z%22%2F%3E%3C%2Fsvg%3E");--xs-ms:48px 48px} .xs-p-net{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.3%22%20d%3D%22M0%2010%2010%200%2020%2010%2010%2020z%22%2F%3E%3C%2Fsvg%3E");--xs-ms:20px 20px} .xs-p-hex{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2248.5%22%20viewBox%3D%220%200%2028%2048.5%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%20d%3D%22M14%200%2028%208.08V24.25L14%2032.33%200%2024.25V8.08zM14%2032.33V48.5%22%2F%3E%3C%2Fsvg%3E");--xs-ms:28px 48.5px} .xs-p-dots{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%20viewBox%3D%220%200%2010%2010%22%3E%3Ccircle%20cx%3D%225%22%20cy%3D%225%22%20r%3D%221.7%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");--xs-ms:10px 10px;--xs-p:.2} .xs-p-chevrons{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20d%3D%22M10%207l8%208-8%208%22%2F%3E%3C%2Fsvg%3E");--xs-ms:30px 30px} .xs-p-confetti{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22120%22%20viewBox%3D%220%200%20180%20120%22%3E%3Cg%20fill%3D%22%23fff%22%3E%3Crect%20x%3D%2212%22%20y%3D%2214%22%20width%3D%229%22%20height%3D%223.4%22%20rx%3D%221%22%20transform%3D%22rotate(-28%2016%2016)%22%2F%3E%3Crect%20x%3D%2258%22%20y%3D%2242%22%20width%3D%2210%22%20height%3D%223.4%22%20rx%3D%221%22%20transform%3D%22rotate(35%2063%2044)%22%2F%3E%3Crect%20x%3D%22118%22%20y%3D%2212%22%20width%3D%228%22%20height%3D%223.2%22%20rx%3D%221%22%20transform%3D%22rotate(62%20122%2014)%22%2F%3E%3Crect%20x%3D%22150%22%20y%3D%2270%22%20width%3D%2210%22%20height%3D%223.4%22%20rx%3D%221%22%20transform%3D%22rotate(-15%20155%2072)%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%2288%22%20width%3D%229%22%20height%3D%223.2%22%20rx%3D%221%22%20transform%3D%22rotate(48%2034%2090)%22%2F%3E%3Crect%20x%3D%2296%22%20y%3D%2296%22%20width%3D%2210%22%20height%3D%223.4%22%20rx%3D%221%22%20transform%3D%22rotate(-50%20101%2098)%22%2F%3E%3Cpath%20d%3D%22M88%2020l6%202-4.5%204.4z%22%2F%3E%3Cpath%20d%3D%22M140%2036l6.5.8-3.8%205.2z%22%2F%3E%3Cpath%20d%3D%22M20%2052l5.8%203-5.2%203.4z%22%2F%3E%3Cpath%20d%3D%22M124%2092l6-1.4-1.8%206.1z%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2224%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2260%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%2222%22%20r%3D%221.8%22%2F%3E%3Ccircle%20cx%3D%2266%22%20cy%3D%22110%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%22112%22%20r%3D%221.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");--xs-ms:180px 120px;--xs-p:.34} .xs-p-pitch{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22300%22%20viewBox%3D%220%200%20600%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%223%22%3E%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22580%22%20height%3D%22280%22%2F%3E%3Cpath%20d%3D%22M300%2010v280%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%2248%22%2F%3E%3Cpath%20d%3D%22M10%2070h92v160H10M10%20112h32v76H10M590%2070h-92v160h92M590%20112h-32v76h32%22%2F%3E%3Cpath%20d%3D%22M102%20118a40%2040%200%200%201%200%2064M498%20118a40%2040%200%200%200%200%2064%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22150%22%20r%3D%224%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%22150%22%20r%3D%223%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%22528%22%20cy%3D%22150%22%20r%3D%223%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");--xs-ms:cover;--xs-mr:no-repeat;--xs-p:.16} /* rings are a gradient centred exactly on --xs-x/--xs-y (a picture's percentage position cannot centre it), fading outward */ .xs-p-rings{--xs-pd:block;--xs-m:repeating-radial-gradient(circle at var(--xs-x) var(--xs-y),transparent 0 20px,#000 20px 22.5px);--xs-ms:100% 100%;--xs-mr:no-repeat;--xs-p:.22;--xs-fade:radial-gradient(circle at var(--xs-x) var(--xs-y),#000 0,#000 90px,transparent 240px)} .xs-p-grain{--xs-pd:block;--xs-m:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200%200%200%201.6%20-.55%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E");--xs-ms:160px 160px;--xs-p:.16} /* speed lines are a gradient, no file */ .xs-p-speed{--xs-pd:block;--xs-m:repeating-linear-gradient(112deg,#000 0 3px,transparent 3px 16px);--xs-ms:100% 100%;--xs-mr:no-repeat;--xs-p:.12} /* a pattern's strength can fall away, so the text side stays calm */ .xs-fade-r{--xs-fade:linear-gradient(90deg,transparent 12%,#000 78%)} .xs-fade-l{--xs-fade:linear-gradient(270deg,transparent 12%,#000 78%)} .xs-fade-b{--xs-fade:linear-gradient(0deg,#000,transparent 85%)} .xs-fade-spot{--xs-fade:radial-gradient(70% 90% at var(--xs-x) var(--xs-y),#000 0,transparent 100%)} /* ---------- light ---------- */ /* glow: a soft light behind whatever stands at --xs-x/--xs-y (a figure, a number) */ .xs-l-glow{--xs-ld:block;--xs-light:radial-gradient(48% 110% at var(--xs-x) var(--xs-y),rgb(255 255 255/.66) 0,rgb(255 255 255/.18) 45%,rgb(255 255 255/0) 75%)} .xs-b-deep.xs-l-glow,.xs-b-surface.xs-l-glow,.xs-b-night.xs-l-glow{--xs-light:radial-gradient(55% 90% at var(--xs-x) var(--xs-y),color-mix(in srgb,var(--mainColor) 45%,transparent) 0,transparent 70%)} /* spot: one light from above */ .xs-l-spot{--xs-ld:block;--xs-light:radial-gradient(60% 120% at 50% -30%,rgb(255 255 255/.42) 0,rgb(255 255 255/0) 72%)} /* floodlights: beams fanning down from a mast at the top */ .xs-l-flood{--xs-ld:block;--xs-light:repeating-conic-gradient(from 150deg at var(--xs-x) -25%,rgb(255 255 255/.2) 0 3.5deg,rgb(255 255 255/0) 3.5deg 11deg)} .xs-l-flood::after{-webkit-mask:radial-gradient(90% 130% at var(--xs-x) -25%,#000 30%,transparent 95%);mask:radial-gradient(90% 130% at var(--xs-x) -25%,#000 30%,transparent 95%)} /* sheen: a gloss band across the box; add xs-move for a slow sweep */ .xs-l-sheen{--xs-ld:block;--xs-light:linear-gradient(115deg,rgb(255 255 255/0) 30%,rgb(255 255 255/.38) 46%,rgb(255 255 255/0) 62%) 0 0/250% 100% no-repeat} .xs-l-sheen.xs-move::after{animation:xs-sweep 5s cubic-bezier(.4,0,.2,1) infinite} @keyframes xs-sweep{0%,62%{background-position:130% 0}100%{background-position:-60% 0}} /* vignette: the edges fall into shade, the middle holds */ .xs-l-vignette{--xs-ld:block;--xs-light:radial-gradient(120% 120% at 50% 45%,rgb(0 0 0/0) 45%,rgb(0 0 0/.45) 100%)} /* rim: a lit top edge and a shaded foot, like the icons' tonal finish */ .xs-l-rim{--xs-ld:block;--xs-light:linear-gradient(180deg,rgb(255 255 255/.45) 0,rgb(255 255 255/0) 2px,rgb(255 255 255/0) 55%,rgb(0 0 0/.22) 100%)} /* ---------- on a photo ---------- */ /* A photo already has a subject and its own light. Rules: a pattern never crosses the subject (fade it to the empty side), light follows the direction the picture is already lit from, and text gets a scrim. A picture may carry two overlay layers — one for light, one scrim — as two .xs elements laid on it. */ .xs-blend-soft{--xs-blend:soft-light} .xs-blend-screen{--xs-blend:screen} .xs-blend-overlay::before{mix-blend-mode:overlay} /* scrim: the bottom of the picture darkens so a caption or button reads on any photo */ .xs-l-scrim{--xs-ld:block;--xs-light:linear-gradient(0deg,rgb(0 0 0/.78) 0,rgb(0 0 0/.45) 28%,rgb(0 0 0/0) 62%)} /* tint: the picture takes the theme colour — a wash from one corner, blended as colour, so a photo matches all 22 themes */ .xs-l-tint{--xs-ld:block;--xs-blend:color;--xs-l:.55;--xs-light:linear-gradient(115deg,var(--mainColor) 0%,color-mix(in srgb,var(--mainColor) 60%,transparent) 30%,transparent 58%)} /* beams: soft light shafts from where the stadium lights already are (--xs-x at the top), added with screen */ .xs-l-beams{--xs-ld:block;--xs-blend:screen;--xs-light:conic-gradient(from 118deg at var(--xs-x) -8%,transparent 0deg,rgb(255 244 214/.46) 6deg,transparent 14deg,transparent 20deg,rgb(255 244 214/.36) 25deg,transparent 33deg,transparent 40deg,rgb(255 244 214/.28) 44deg,transparent 52deg,transparent 360deg)} .xs-l-beams::after{-webkit-mask:linear-gradient(180deg,#000 0,#000 35%,transparent 92%);mask:linear-gradient(180deg,#000 0,#000 35%,transparent 92%);filter:blur(6px)} /* edge: the theme colour glowing in from the frame, the centre left clear */ .xs-l-edge{--xs-ld:block;--xs-blend:screen;--xs-light:radial-gradient(115% 110% at 50% 50%,transparent 48%,color-mix(in srgb,var(--mainColor) 55%,transparent) 80%,var(--mainColor) 100%)} /* ---------- where the theme says no ---------- */ /* the Flat pair keeps patterns but no light or gloss; paper keeps it quiet */ html[main-theme="theme5"] .xs,html[main-theme="theme17"] .xs{--xs-l:0} html[main-theme="theme11"] .xs,html[main-theme="theme12"] .xs{--xs-l:.6} @media (prefers-reduced-motion:reduce){.xs.xs-move::after{animation:none}}