:root:has(body[data-theme="terminus"]) { --accent-color: #ff00ff !important; } /* The rift sits behind every page. Terminus makes itself the 864px centred column, so body::before is exactly the content column and nothing else — the rift stays at full strength in the margins either side. html needs its own background: without one, body's background propagates to the root canvas and paints below everything, including the negative-z-index layers below. */ html { background: #000; } body { position: relative; background: transparent; } body::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); z-index: -1; } /* Ensure any other elements that might be using the default color fallback to magenta too */ ::selection { background: #ff00ff; color: #000; } /* Soundwave Header Bar: Morse code bars for "adimension", full colour spectrum. The morse pattern is the mask (alpha stencil); the background underneath is a hue-wheel gradient sized to one 202px pattern repeat. soundwave-drift animates background-position, so the spectrum flows through the static bars. */ @keyframes soundwave-drift { 0% { background-position: 0 0; } 100% { background-position: 202px 0; } } .header-logo-container::after { background: linear-gradient( 90deg, hsl(0, 90%, 62%), hsl(45, 90%, 58%), hsl(90, 80%, 55%), hsl(135, 75%, 55%), hsl(180, 80%, 55%), hsl(225, 85%, 62%), hsl(270, 85%, 65%), hsl(315, 90%, 62%), hsl(360, 90%, 62%) ) !important; background-size: 202px 100% !important; -webkit-mask-image: repeating-linear-gradient( to right, #000 0px, #000 2px, transparent 2px, transparent 5px, #000 5px, #000 11px, transparent 11px, transparent 19px, #000 19px, #000 25px, transparent 25px, transparent 28px, #000 28px, #000 30px, transparent 30px, transparent 33px, #000 33px, #000 35px, transparent 35px, transparent 43px, #000 43px, #000 45px, transparent 45px, transparent 48px, #000 48px, #000 50px, transparent 50px, transparent 58px, #000 58px, #000 64px, transparent 64px, transparent 67px, #000 67px, #000 73px, transparent 73px, transparent 81px, #000 81px, #000 83px, transparent 83px, transparent 91px, #000 91px, #000 97px, transparent 97px, transparent 100px, #000 100px, #000 102px, transparent 102px, transparent 110px, #000 110px, #000 112px, transparent 112px, transparent 115px, #000 115px, #000 117px, transparent 117px, transparent 120px, #000 120px, #000 122px, transparent 122px, transparent 130px, #000 130px, #000 132px, transparent 132px, transparent 135px, #000 135px, #000 137px, transparent 137px, transparent 145px, #000 145px, #000 151px, transparent 151px, transparent 154px, #000 154px, #000 160px, transparent 160px, transparent 163px, #000 163px, #000 169px, transparent 169px, transparent 177px, #000 177px, #000 183px, transparent 183px, transparent 186px, #000 186px, #000 188px, transparent 188px, transparent 202px ); mask-image: repeating-linear-gradient( to right, #000 0px, #000 2px, transparent 2px, transparent 5px, #000 5px, #000 11px, transparent 11px, transparent 19px, #000 19px, #000 25px, transparent 25px, transparent 28px, #000 28px, #000 30px, transparent 30px, transparent 33px, #000 33px, #000 35px, transparent 35px, transparent 43px, #000 43px, #000 45px, transparent 45px, transparent 48px, #000 48px, #000 50px, transparent 50px, transparent 58px, #000 58px, #000 64px, transparent 64px, transparent 67px, #000 67px, #000 73px, transparent 73px, transparent 81px, #000 81px, #000 83px, transparent 83px, transparent 91px, #000 91px, #000 97px, transparent 97px, transparent 100px, #000 100px, #000 102px, transparent 102px, transparent 110px, #000 110px, #000 112px, transparent 112px, transparent 115px, #000 115px, #000 117px, transparent 117px, transparent 120px, #000 120px, #000 122px, transparent 122px, transparent 130px, #000 130px, #000 132px, transparent 132px, transparent 135px, #000 135px, #000 137px, transparent 137px, transparent 145px, #000 145px, #000 151px, transparent 151px, transparent 154px, #000 154px, #000 160px, transparent 160px, transparent 163px, #000 163px, #000 169px, transparent 169px, transparent 177px, #000 177px, #000 183px, transparent 183px, transparent 186px, #000 186px, #000 188px, transparent 188px, transparent 202px ); animation: soundwave-drift 30s linear infinite; transition: filter 0.3s ease, animation-duration 0.3s ease; } .header-logo-container:hover::after { animation-duration: 10s; filter: drop-shadow(0 0 3px var(--accent-color)); } /* Title & Section Dividers: Dual-track soundwave frequency pulse */ @keyframes frequency-phase { 0% { background-position: 0 0; } 100% { background-position: 120px 0; } } .post-title::after { height: 3px; border-bottom: none !important; background: repeating-linear-gradient( to right, var(--accent-color) 0px, var(--accent-color) 2px, transparent 2px, transparent 6px, var(--accent-color) 6px, var(--accent-color) 12px, transparent 12px, transparent 15px, var(--accent-color) 15px, var(--accent-color) 17px, transparent 17px, transparent 24px, var(--accent-color) 24px, var(--accent-color) 32px, transparent 32px, transparent 40px ) !important; animation: frequency-phase 20s linear infinite; opacity: 0.85; transition: opacity 0.3s ease, filter 0.3s ease; } .post-title:hover::after { opacity: 1; filter: drop-shadow(0 0 2px var(--accent-color)); } /* Logo, nav links, post titles share the homepage .btn look */ .logo, .main-menu-items a, .post-title a { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.03); color: #fff; border-radius: 2px; transition: all 0.4s ease; } .main-menu-items a, .post-title a { display: inline-block; padding: 5px 10px; text-decoration: none; } .post-title { color: #fff; } .logo:hover, .main-menu-items a:hover, .post-title a:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 0 20px rgba(255, 255, 255, 0.05); transform: translateY(-2px); } /* Blog list: rift window. Excerpts (article.post without .content) are stripped to title, one dim meta line, description. On hover the article's backdrop is brightened, lifting body::before's 82% black so the rift glows through behind the post. */ .post:not(.content) { padding: 30px 20px; margin-inline: -20px; border-radius: 2px; backdrop-filter: brightness(1) saturate(1); transition: backdrop-filter 0.6s ease; } .post:not(.content):hover { backdrop-filter: brightness(2.6) saturate(1.3); } .post:not(.content) .post-title { padding-bottom: 0; margin-bottom: 8px; border-bottom: none; } .post:not(.content) .post-title::after, .post:not(.content) .post-tags, .post:not(.content) .read-more, .post:not(.content) li[title="Author"], .post:not(.content) li[title="Author"] + li { display: none; } .post:not(.content) .post-title a { border: none; background: none; padding: 0; box-shadow: none; transform: none; } .post:not(.content) ul.post-meta { font-size: 0.85em; color: color-mix(in srgb, var(--text-color) 45%, transparent); } .post:not(.content) p { margin-bottom: 0; color: color-mix(in srgb, var(--text-color) 70%, transparent); } /* Blog list: spectrum spine. 2px rule on each excerpt's left edge; --hue is set per post in base.html (index across the wheel), same idea as the rift laying the full spectrum down the viewport. Glows on hover. */ .post:not(.content) { position: relative; } .post:not(.content)::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 0; width: 2px; background: hsl(var(--hue, 300) 100% 60%); opacity: 0.7; transition: opacity 0.6s ease, filter 0.6s ease; } .post:not(.content):hover::before { opacity: 1; filter: drop-shadow(0 0 4px hsl(var(--hue, 300) 100% 60%)); } /* Blog list: hollow title. Echoes the landing h1 — stroked, transparent fill so the rift shows through the letters; fills solid on hover. */ .post:not(.content) .post-title { font-size: 1.6em; } .post:not(.content) .post-title a { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55); transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease; } .post:not(.content):hover .post-title a { color: #fff; -webkit-text-stroke-color: transparent; }