/*! * TBOT Interactive Mesh Background — presentation layer * The canvas is painted by mesh-bg.js and parked behind all page content. * We give the document a true-black base so the mesh reads as a living grid, * and bake in a touch of transparency on the large structural wrappers so the * effect breathes through the layout on every page. */ /* True-black canvas backdrop. Body stays transparent so the fixed canvas (z-index:-1) shows through wherever content doesn't paint its own bg. */ html { background-color: #050507; } body { background-color: transparent; } /* The Kenta theme's main wrapper paints an opaque base colour (#000) on top of everything with z-index:1 — that completely hides a z-index:-1 canvas. Make the wrapper transparent so the fixed mesh canvas behind it shows through. */ .kenta-site-wrap { background-color: transparent !important; background-image: none !important; /* keep all site content above the fixed mesh canvas (z-index:0) */ position: relative; z-index: 1; } #tbot-mesh-bg { position: fixed; inset: 0; width: 100vw; height: 100vh; /* z-index:0 (not negative): a negative z-index fixed canvas behind an opaque background is hidden on iOS Safari. The Kenta wrapper is positioned with z-index:1, so all content still paints above this canvas. */ z-index: 0; pointer-events: none; display: block; /* a hair of transparency so it melts into the black base */ opacity: 0.92; } /* Let the mesh breathe through the major structural shells. These wrappers in the Kenta theme normally inherit a solid base colour; making them transparent reveals the moving grid in the margins and gutters without touching the readable content blocks (covers / cards keep their own bg). */ .kenta-content-area, .kenta-page-content, .site-content, .kenta-site-content, #main, .kenta-main { background-color: transparent !important; } /* Footer + header become semi-transparent so the grid keeps moving behind the chrome — tasteful, not distracting. */ .kenta-footer, .site-footer { background-color: rgba(5, 5, 7, 0.62) !important; backdrop-filter: blur(3px); } /* Keep text-forward content legible over the live grid: give the constrained text groups a subtle dark scrim with a soft edge. Scoped to avoid covers and media blocks that already own a background. */ .tbot-bg-scrim { background: rgba(8, 8, 12, 0.55); backdrop-filter: blur(4px); border-radius: 14px; } /* ---- Home page hero ------------------------------------------------------ The hero is the first full-bleed cover block. Give it a solid base colour so the moving mesh never shows through behind it, and add a soft bottom shadow + inner gradient fade so its hard edge blends into the live grid below. */ body.home .wp-block-cover.alignfull:first-of-type { /* opaque backing: mesh cannot render underneath the hero */ background-color: #050507; /* outset shadow blends the bottom edge down into the mesh area */ box-shadow: 0 44px 90px -24px #050507, 0 18px 44px -12px rgba(5, 5, 7, 0.92); } /* Inner gradient that fades the hero imagery into the page background at the bottom, so there's no hard photographic seam against the moving grid. */ body.home .wp-block-cover.alignfull:first-of-type::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; z-index: 1; background: linear-gradient( to bottom, rgba(5, 5, 7, 0) 0%, rgba(5, 5, 7, 0.45) 55%, rgba(5, 5, 7, 0.9) 88%, #050507 100% ); } /* Keep the hero headline/content above the fade gradient. */ body.home .wp-block-cover.alignfull:first-of-type > .wp-block-cover__inner-container { position: relative; z-index: 2; } /* Respect users who ask for less motion: the JS renders a single static frame, and we drop the opacity a touch further. */ @media (prefers-reduced-motion: reduce) { #tbot-mesh-bg { opacity: 0.7; } } /* ---- Site frame ---------------------------------------------------------- A thin animated gradient border ringing the whole viewport, colour-matched to the mesh palette (indigo → magenta → cyan). The mask trick hollows out the centre so only the border ring is painted. Purely decorative. */ #tbot-site-frame { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; padding: 3px; /* frame thickness */ border-radius: 4px; background: linear-gradient( 120deg, #7b8cff, #b07bff, #ff7bd5, #5ad1ff, #7b8cff ); background-size: 320% 320%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0.85; animation: tbot-frame-shift 16s linear infinite; } @keyframes tbot-frame-shift { 0% { background-position: 0% 50%; } 100% { background-position: 320% 50%; } } @media (prefers-reduced-motion: reduce) { #tbot-site-frame { animation: none; } }