Show background decoration at every width

The gradients, sphere, glows, wave artwork and G-code were hidden below
the 1024px breakpoint, so narrow or zoomed browser windows got a plain
black page. Add stacked-layout variants of the decoration and lower the
full-design breakpoint to 960px.

src/_includes/home.pug

@@ -5,6 +5,13 @@
 mixin gcode(style, color, align)
   pre(aria-hidden="true" class="hidden lg:block absolute w-[214px] m-0 font-poppins text-[14px] leading-[1.2] whitespace-pre select-none pointer-events-none " + (align === "right" ? "text-right" : "text-left") style=style + ";color:" + color)= gcode
 
+//- Mobile-only (stacked layout) variants. Position comes from Tailwind classes.
+mixin gcodeM(cls, color, align)
+  pre(aria-hidden="true" class="pointer-events-none absolute m-0 w-[214px] select-none whitespace-pre font-poppins text-[14px] leading-[1.2] lg:hidden " + (align === "right" ? "text-right " : "text-left ") + cls style="color:" + color)= gcode
+
+mixin glowM(cls, w, h, rot)
+  div(aria-hidden="true" class="pointer-events-none absolute rounded-full blur-[50px] lg:hidden " + cls style=`width:${w}px;height:${h}px;transform:rotate(${rot}deg);background:linear-gradient(148.5deg,#5272d3 0%,#15164e 42%,#15164e 96%)`)
+
 //- Decorative blurred glow ellipse.
 mixin glow(left, top, w, h, rot)
   div(aria-hidden="true" class="hidden lg:block absolute rounded-full pointer-events-none blur-[60px]" style=`left:${left}px;top:${top}px;width:${w}px;height:${h}px;transform:rotate(${rot}deg);background:linear-gradient(148.5deg,#5272d3 0%,#15164e 42%,#15164e 96%)`)
@@ -29,7 +36,9 @@ main(id="top" class="relative overflow-x-clip font-poppins")
     //- Hero
     section(class="relative px-10 py-24 lg:h-[552px] lg:p-0")
       +gcode("right:19px;top:37px", "rgb(116 139 215 / 0.3)", "right")
-      h1(class="m-0 font-roboto-flex text-[22px] font-normal leading-[56px] tracking-[0.2em] sm:text-[28px] sm:leading-[72px] sm:tracking-[0.22em] text-white lg:absolute lg:left-[162px] lg:top-[186px] lg:text-[36px] lg:tracking-[8px]")
+      div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
+        +gcodeM("right-[-90px] top-4", "rgb(116 139 215 / 0.3)", "right")
+      h1(class="relative z-10 m-0 font-roboto-flex text-[22px] font-normal leading-[56px] tracking-[0.2em] sm:text-[28px] sm:leading-[72px] sm:tracking-[0.22em] text-white lg:absolute lg:left-[162px] lg:top-[186px] lg:text-[36px] lg:tracking-[8px]")
         span(class="block lg:w-[475px] lg:text-center")= t.hero_line_1
         span(class="block lg:ml-[166px] lg:mt-[-3px] lg:w-[475px] lg:text-center")= t.hero_line_2
 
@@ -37,8 +46,11 @@ main(id="top" class="relative overflow-x-clip font-poppins")
     section(id="about" class="relative px-10 py-16 lg:h-[390px] lg:p-0")
       +gcode("left:62px;top:-62px", "rgb(82 114 211 / 0.4)", "left")
       div(aria-hidden="true" class="absolute hidden rounded-full lg:block" style="left:117px;top:21px;width:318px;height:318px;background:linear-gradient(150deg,#000 0%,#15164e 42%,#000 100%)")
+      div(aria-hidden="true" class="absolute left-[-70px] top-8 h-[220px] w-[220px] rounded-full lg:hidden" style="background:linear-gradient(150deg,#000 0%,#15164e 42%,#000 100%)")
+      +glowM("right-[-150px] top-6", 286, 101, 301)
       +glow(780, 111, 286, 101, 301)
       +glow(852, 269, 230, 107, 40)
+      +glowM("bottom-0 left-[-150px]", 286, 101, 350)
       +glow(-112, 315, 286, 101, 350)
       div(class="relative z-10 lg:absolute lg:left-[464px] lg:top-[100px] lg:w-[387px]")
         h2(class="m-0 text-[18px] font-normal leading-[1.2] text-[#c0ceff]")= t.about_title
@@ -47,6 +59,11 @@ main(id="top" class="relative overflow-x-clip font-poppins")
     //- Products
     section(id="products" class="relative px-10 py-16 text-center lg:h-[577px] lg:p-0")
       div(aria-hidden="true" class="absolute hidden lg:block pointer-events-none blur-[70px]" style="left:-83px;top:2px;width:1069px;height:138px;transform:rotate(3deg);background:linear-gradient(180deg,#7186c6 0%,#15164e 28%,#15164e 46%,#000 100%)")
+      div(aria-hidden="true" class="pointer-events-none absolute inset-x-[-40px] top-0 h-[100px] blur-[50px] lg:hidden" style="background:linear-gradient(180deg,#7186c6 0%,#15164e 28%,#15164e 46%,#000 100%)")
+      div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
+        img(src="/assets/img/wave.svg" alt="" aria-hidden="true" class="absolute max-w-none" style="right:-360px;top:-10px;width:760px")
+        +gcodeM("bottom-[-250px] left-[-110px]", "rgb(116 139 215 / 0.3)", "left")
+      +glowM("right-[-130px] top-28", 286, 101, 350)
       +glow(595, 49, 286, 101, 350)
       img(src="/assets/img/wave.svg" alt="" aria-hidden="true" class="pointer-events-none absolute hidden max-w-none lg:block" style="left:166px;top:-156px;width:1034px;height:775px")
       +gcode("left:62px;top:283px", "rgb(116 139 215 / 0.3)", "left")
@@ -57,6 +74,10 @@ main(id="top" class="relative overflow-x-clip font-poppins")
 
     //- Contact
     section(id="contact" class="relative px-10 py-16 lg:h-[429px] lg:p-0")
+      div(aria-hidden="true" class="absolute inset-0 lg:hidden" style="background:linear-gradient(90deg,rgb(82 114 211 / 0.3) 0%,rgb(82 114 211 / 0) 100%)")
+      +glowM("bottom-[-30px] left-[-150px]", 286, 101, 58)
+      div(aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden lg:hidden")
+        +gcodeM("bottom-[-300px] right-[-100px]", "rgb(116 139 215 / 0.3)", "right")
       div(aria-hidden="true" class="absolute inset-0 hidden overflow-hidden lg:block")
         div(class="absolute" style="left:38px;top:0;width:1088px;height:429px;background:linear-gradient(90deg,rgb(82 114 211 / 0.3) 0%,rgb(82 114 211 / 0) 100%)")
         +glow(-39, 248, 286, 101, 58)

tailwind.config.js

@@ -2,6 +2,7 @@ module.exports = {
   content: ["./src/**/*.pug"],
   theme: {
     extend: {
+      screens: { lg: "960px" },
       colors: {
         accent: "#5272d3",
         deep: "#15164e",