/* Animated ambient background, ported from the /p/ projects hub. Everything is scoped under .ambient-page, so linking this file is inert until a page puts that class on . */ .ambient-page { --bg-dark: #000000; --hue-1: 200; /* site blue, #1ca7ec is about 199 */ --hue-2: 260; /* violet */ --hue-3: 185; /* cyan */ --hue-4: 225; /* deep blue */ --x-1: -10vw; --y-1: -10vw; --x-2: 60vw; --y-2: 60vh; --x-3: 30vw; --y-3: 20vh; --x-4: 80vw; --y-4: 10vh; } /* Fixed layer behind the content. .wrapper is z-index 20 (master.css:137) and the lightbox is 2000, so 0 keeps this underneath both. Offsets rather than 100vw/100vh on purpose: /p/ can use viewport units because its body sets overflow-x: hidden, the theme's body does not, and 100vw counts the scrollbar, which would leave this long page permanently scrollable sideways. */ .ambient-page .ambient-background { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden; background: var(--bg-dark); } .ambient-page .ambient-background::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 40%, #000000 100%); z-index: 1; pointer-events: none; } .ambient-page .blob-cont { position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: blur(40px); opacity: 0.5; z-index: 0; } .ambient-page .blob { position: absolute; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; mix-blend-mode: hard-light; animation: ambient-move 20s infinite alternate; } .ambient-page .blob-1 { background: hsl(var(--hue-1), 60%, 40%); width: 70vw; height: 70vw; left: var(--x-1); top: var(--y-1); animation-duration: 34s; animation-delay: -5s; } .ambient-page .blob-2 { background: hsl(var(--hue-2), 60%, 40%); width: 80vw; height: 80vw; left: var(--x-2); top: var(--y-2); animation-duration: 40s; animation-delay: -10s; animation-direction: alternate-reverse; } .ambient-page .blob-3 { background: hsl(var(--hue-3), 60%, 35%); width: 60vw; height: 60vw; left: var(--x-3); top: var(--y-3); animation-duration: 28s; } .ambient-page .blob-4 { background: hsl(var(--hue-4), 60%, 35%); width: 50vw; height: 50vw; left: var(--x-4); top: var(--y-4); animation-duration: 32s; animation-delay: -7s; } /* Named ambient-move, not move, so it cannot collide with anything in the 152K theme sheet */ @keyframes ambient-move { 0% { transform: translate(0, 0) rotate(0deg) scale(1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 33% { transform: translate(10vw, -10vh) rotate(50deg) scale(1.1); border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; } 66% { transform: translate(-10vw, 20vh) rotate(120deg) scale(0.9); border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; } 100% { transform: translate(5vw, 10vh) rotate(200deg) scale(1); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } } /* The full-bleed section wrappers keep their structural role but stop painting and stop carrying vertical padding. The panel inside owns both the fill and the spacing. Zeroing the padding utilities is required, not cosmetic: #tgbld carries only pb-120 with no top padding, so without this the #home and #tgbld panels would touch. */ .ambient-page .white-bg, .ambient-page .grey-bg { background-color: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Content column only, so the moving colour never sits directly behind body copy. Panel padding 40px, plus the .row -15px margin, plus the column 15px padding, lands content at a clean 40px inset. */ .ambient-page .content-panel { background-color: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; padding: 60px 60px; margin-bottom: 40px; } /* The navbar is fixed and transparent, so the first panel needs its own clearance now that pt-120 is gone */ .ambient-page #home .content-panel { margin-top: 110px; } .ambient-page #elsewhere .content-panel { margin-bottom: 80px; } /* Display-size page title. master.css:155 has h1 at 56px and responsive.css drops .section-title h1 to 35px/27px on narrow screens; this outranks all three, so the clamp has to cover the small end itself. 120px lands from about 1000px up. */ .ambient-page #home .section-title h1 { font-size: clamp(48px, 12vw, 120px); line-height: 1.05; margin: 0 0 28px; } /* Eyebrow above the title. At 18px Raleway it read as a cramped subheading fighting the 120px display type, so it becomes a small tracked label instead: the size contrast makes the pairing deliberate. The negative margin-right cancels the trailing letter-space that would otherwise push the centred text half a space to the left. */ .ambient-page #home .section-title h4 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; margin: 0 -.22em 22px 0; } @media (max-width: 767px) { .ambient-page #home .section-title h1 { margin-bottom: 20px; } .ambient-page #home .section-title h4 { font-size: 12px; letter-spacing: .18em; margin: 0 -.18em 16px 0; } } @media (max-width: 767px) { .ambient-page .content-panel { padding: 30px 20px; margin-bottom: 24px; border-radius: 6px; } .ambient-page #home .content-panel { margin-top: 90px; } /* blur(100px) across four animated blobs is expensive on phones */ .ambient-page .blob-cont { filter: blur(60px); } .ambient-page .blob-4 { display: none; } } @media (prefers-reduced-motion: reduce) { .ambient-page .blob { animation: none; } }