/* ======================================================================== IMPAIR-ID by ZXEREX — Sci-fi eye-scan background Updated to match the current zxerex.com treatment: a fixed, full-viewport layer with concentric rings (rotated via native SVG animateTransform), direction-indicator dots, an eye silhouette with iris striations — plain CSS/SVG, no images, no JS libraries beyond the small eye-tracking script each page includes near the end of . The older moving horizontal laser scan line has been removed. Every content panel gets a near-opaque frosted-glass treatment so body text stays fully legible over the animation. Load this file AFTER styles.css. ======================================================================== */ :root { --scifi-accent: #7cf9ff; --scifi-accent-dim: rgba(124,249,255,0.4); --scifi-bg-1: #050914; --scifi-bg-2: #160a2e; } html, body { background: var(--scifi-bg-1); } body { background: transparent; } /* ---------- fixed background layer ---------- */ .scifi-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(900px 700px at 50% 45%, rgba(255,255,255,0.03), transparent 60%), linear-gradient(180deg, var(--scifi-bg-1) 0%, var(--scifi-bg-2) 55%, var(--scifi-bg-1) 100%); } .scifi-svg { width: 100%; height: 100%; display: block; opacity: 0.56; } .ring circle { fill: none; stroke: var(--scifi-accent); stroke-width: 1; opacity: 0.68; } /* Static ring: no rotation, kept more visible so the direction dots have a clearly visible line to sit on. ring-c/d/e rotate via native SVG (not CSS animation) — CSS transform-origin on a nested, already-transformed SVG group causes the circle to visibly pulse in size instead of rotating cleanly in place. */ .ring-static circle, .ring-c circle { opacity: 0.45; } .eye-outline { fill: none; stroke: var(--scifi-accent); stroke-width: 2; opacity: 0.75; } /* ---------- direction indicator dots (on the static ring) ---------- Sit at the four cardinal points of the fixed ring. JS toggles the ".lit" class on the dot matching the eye's current look direction; a dot stays lit until the eye looks the opposite way. */ .dir-dot { fill: rgba(124,249,255,0.18); transition: fill 0.4s ease, filter 0.4s ease; } .dir-dot.lit { fill: #ffe600; filter: drop-shadow(0 0 3px rgba(255,230,0,0.85)); } .iris { fill: var(--scifi-accent-dim); stroke: var(--scifi-accent); stroke-width: 1.5; animation: scifi-pulse 5s ease-in-out infinite; } .pupil { fill: rgba(2,6,15,0.85); } .pupil-highlight { fill: rgba(255,255,255,0.65); } .iris-striations line { stroke: var(--scifi-accent); stroke-width: 1; opacity: 0.4; } /* eye-tracking movement: JS toggles .eye-inner's transform between center/right/left/up/down */ .eye-inner { transition: transform 2.6s ease-in-out; } @keyframes scifi-pulse { 0%, 100% { opacity: 0.55; r: 72; } 50% { opacity: 0.9; r: 78; } } /* ---------- legibility: frosted-glass panels over the animated background ---------- Panel backgrounds are pushed to near-opaque (0.92-0.97) so they read as clean, solid surfaces rather than a grey wash of the dark background bleeding through. */ .site-header { background: rgba(255,255,255,0.94) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .hero, .page-header { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .card, .tile { background: rgba(255,255,255,0.97) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .section-alt { background: rgba(247,249,252,0.95) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .section-navy { background: rgba(11,31,58,0.85) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } /* .card / .tile always have their own white background, even when placed inside a .section-navy block — so their headings/text must stay dark, overriding the white/light text color that .section-navy otherwise applies to text sitting directly on its dark background. */ .section-navy .tile h3, .section-navy .card h3 { color: var(--navy); } .section-navy .tile p, .section-navy .card p { color: var(--text-muted); } .cta-banner { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .cta-banner p { font-weight: 500; } /* Standalone heading / short-phrase panels: permanently transparent with white text, no hover toggle. Used for headline-only or brief-copy panels — the hover-swap treatment below is reserved for boxes with substantial descriptive/paragraph text. */ .cta-clear { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cta-clear h1, .cta-clear h2 { color: #fff; } .cta-clear p { color: rgba(255,255,255,0.92); font-weight: 500; } .site-footer { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; } .footer-brand .brand-logo-chip { background: #fff !important; } /* Footer text sits directly on the animated background now that the footer panel is transparent — a text-shadow keeps it legible no matter what part of the animation (bright ring line, glow, etc.) happens to be behind it. */ .footer-grid h4 { font-weight: 800; text-shadow: 0 1px 4px rgba(0,0,0,0.75); } .footer-grid a, .footer-brand p, .footer-bottom, .footer-brand .brand { text-shadow: 0 1px 3px rgba(0,0,0,0.7); } .text-panel, .quote, .faq-list { background: rgba(255,255,255,0.95) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .footnote { background: transparent !important; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } /* --------------------------------------------------------------------- Generic hover-toggle text panel: transparent + white text by default, fades to a solid white card with dark text on hover. Opt-in via .hover-clear so it only applies to panels explicitly tagged with it — boxes with real descriptive/paragraph content — rather than every .card / .section-head / two-col box. Placed after the frosted-panel rules above (.card, .text-panel/.faq-list, etc.) so it wins the !important vs !important tie by source order. */ .hover-clear { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background 0.3s ease, box-shadow 0.3s ease; cursor: default; } .hover-clear h2, .hover-clear h3, .hover-clear p, .hover-clear li, p.hover-clear { color: #fff; transition: color 0.3s ease; } .hover-clear .faq-item { border-bottom-color: rgba(255,255,255,0.2); transition: border-color 0.3s ease; } /* A .tile/.card nested INSIDE a .hover-clear panel keeps its own permanent opaque white background regardless of the parent's state — so its text must stay dark, not inherit the parent's white/transparent treatment. */ .hover-clear .tile h3, .hover-clear .card h3 { color: var(--navy); } .hover-clear .tile p, .hover-clear .card p { color: var(--text-muted); } .hover-clear:hover { background: rgba(255,255,255,0.97) !important; box-shadow: 0 8px 30px rgba(2,6,15,0.35); } .hover-clear:hover h2, .hover-clear:hover h3 { color: var(--navy); } .hover-clear:hover p, .hover-clear:hover li, p.hover-clear:hover { color: var(--text-muted); } .hover-clear:hover .faq-item { border-bottom-color: var(--border); } /* Two-column text blocks and section-head blocks that normally sit directly on the white page background need the same frosted treatment by default — but ONLY inside plain sections. Inside .hero / .page-header / .section-navy the text is meant to read directly against that section's own dark backdrop (white/light type), so those are explicitly excluded here to avoid painting a light panel behind light-colored text. */ section:not(.section-navy):not(.hero) > .container.two-col > div:not(.card):not(.grid):not(.step-list), section:not(.section-alt):not(.section-navy):not(.hero) > .container:not(.two-col) > div:not(.grid):not(.step-list):not(.cta-banner):not(.stat-band):not(.form-card):not(.card) { background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; padding: 28px; } section:not(.section-alt):not(.section-navy):not(.hero) .section-head { background: rgba(255,255,255,0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 16px; padding: 28px; }