:root:has(body[data-theme="terminus"]) { --accent-color: #c77dba !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: #0a192f; } body { position: relative; background: transparent; } body::before { content: ""; position: absolute; inset: 0; background: rgba(10, 25, 47, 0.82); z-index: -1; } /* Ensure any other elements that might be using the default color fallback to magenta too */ ::selection { background: #c77dba; color: #fff; } /* Soundwave Header Bar: Morse code spectrum for "adimension" */ @keyframes soundwave-drift { 0% { background-position: 0 0; } 100% { background-position: 202px 0; } } .header-logo-container::after { background: repeating-linear-gradient( to right, var(--accent-color) 0px, var(--accent-color) 2px, transparent 2px, transparent 5px, var(--accent-color) 5px, var(--accent-color) 11px, transparent 11px, transparent 19px, var(--accent-color) 19px, var(--accent-color) 25px, transparent 25px, transparent 28px, var(--accent-color) 28px, var(--accent-color) 30px, transparent 30px, transparent 33px, var(--accent-color) 33px, var(--accent-color) 35px, transparent 35px, transparent 43px, var(--accent-color) 43px, var(--accent-color) 45px, transparent 45px, transparent 48px, var(--accent-color) 48px, var(--accent-color) 50px, transparent 50px, transparent 58px, var(--accent-color) 58px, var(--accent-color) 64px, transparent 64px, transparent 67px, var(--accent-color) 67px, var(--accent-color) 73px, transparent 73px, transparent 81px, var(--accent-color) 81px, var(--accent-color) 83px, transparent 83px, transparent 91px, var(--accent-color) 91px, var(--accent-color) 97px, transparent 97px, transparent 100px, var(--accent-color) 100px, var(--accent-color) 102px, transparent 102px, transparent 110px, var(--accent-color) 110px, var(--accent-color) 112px, transparent 112px, transparent 115px, var(--accent-color) 115px, var(--accent-color) 117px, transparent 117px, transparent 120px, var(--accent-color) 120px, var(--accent-color) 122px, transparent 122px, transparent 130px, var(--accent-color) 130px, var(--accent-color) 132px, transparent 132px, transparent 135px, var(--accent-color) 135px, var(--accent-color) 137px, transparent 137px, transparent 145px, var(--accent-color) 145px, var(--accent-color) 151px, transparent 151px, transparent 154px, var(--accent-color) 154px, var(--accent-color) 160px, transparent 160px, transparent 163px, var(--accent-color) 163px, var(--accent-color) 169px, transparent 169px, transparent 177px, var(--accent-color) 177px, var(--accent-color) 183px, transparent 183px, transparent 186px, var(--accent-color) 186px, var(--accent-color) 188px, transparent 188px, transparent 202px ) !important; 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)); }