/* ════════════════════════════════════════════════════════════════════ * WELALGO · AURORA GREEN DEEP — Dynamic Theme Overlay * Drop-in stylesheet that adds: * 1. Animated terminal scanlines + sweep beam * 2. Ambient circuit grid behind everything * 3. Glowing corner-bracket frames on cards (HUD aesthetic) * 4. Mono-digit glow for numeric values * 5. Pulse animations on live indicators * 6. "Data stream" header line * Differentiates the theme from generic dark-glass templates. * * Apply by adding ONE line in the of every HTML page: * * ════════════════════════════════════════════════════════════════════ */ /* ═══ 1. Terminal scanline overlay (subtle, 0.04 opacity) ═══════════ */ body::before, body::after { /* coexist with whatever each page already defined */ } html::after { content: ''; position: fixed; inset: 0; z-index: 99; pointer-events: none; background-image: repeating-linear-gradient( 0deg, transparent 0, transparent 2px, rgba(0, 229, 140, 0.025) 2px, rgba(0, 229, 140, 0.025) 3px ); mix-blend-mode: screen; opacity: 0.65; } /* ═══ 2. Ambient circuit-grid background (anchored at -3, behind body's own bg) */ html::before { content: ''; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: linear-gradient(rgba(0, 229, 140, 0.085) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 140, 0.085) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 25%, transparent 85%); animation: gridDrift 30s linear infinite; } @keyframes gridDrift { to { background-position: -57px -57px; } } /* ═══ 3. A wandering aurora-sweep beam (diagonal, slow) ═════════════ */ @keyframes auroraSweep { 0% { transform: translate(-30%, -30%) rotate(15deg); opacity: 0; } 10% { opacity: 0.45; } 90% { opacity: 0.45; } 100% { transform: translate(120%, 120%) rotate(15deg); opacity: 0; } } .welalgo-sweep { position: fixed; top: 0; left: 0; width: 60vw; height: 60vh; z-index: -2; pointer-events: none; background: linear-gradient( 115deg, transparent 35%, rgba(62, 230, 158, 0.08) 50%, rgba(0, 229, 140, 0.10) 52%, transparent 65% ); filter: blur(20px); animation: auroraSweep 22s ease-in-out infinite; } /* ═══ 4. HUD corner brackets (auto-applied to common card classes) ═ */ .sc-card, .showcase, .sig-card, .plan, .stat, .hud-panel { position: relative; } .sc-card::before, .sc-card::after, .showcase::before, .showcase::after, .sig-card::before, .sig-card::after, .hud-panel::before, .hud-panel::after { /* preserve any orb effects already declared by ::before with content */ } /* Use unique helper class on cards we explicitly upgrade */ .hud-frame { position: relative; } .hud-frame::before, .hud-frame::after { content: ''; position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(0, 229, 140, 0.55); pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 229, 140, 0.45)); } .hud-frame::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 6px; } .hud-frame::after { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 6px; } .hud-frame > .hud-corner-tr, .hud-frame > .hud-corner-bl { position: absolute; width: 16px; height: 16px; border: 1.5px solid rgba(0, 229, 140, 0.55); pointer-events: none; filter: drop-shadow(0 0 6px rgba(0, 229, 140, 0.45)); } .hud-frame > .hud-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 6px; } .hud-frame > .hud-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 6px; } /* ═══ 5. Glowing mono digits ═══════════════════════════════════════ */ .glow-digits, .sc-prob-num, .stat-val, .hud-readout { text-shadow: 0 0 8px rgba(0, 229, 140, 0.45), 0 0 22px rgba(0, 229, 140, 0.18); } /* ═══ 6. Live-pulse pip (animated outer ring, used on .live, .dot) ═ */ .live-pip, .sc-pill::before, .hero-badge::before { position: relative; } .live-pip::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(0, 229, 140, 0.6); animation: livePing 1.6s cubic-bezier(0, 0, 0.2, 1) infinite; pointer-events: none; } @keyframes livePing { 0% { transform: scale(0.7); opacity: 1; } 80% { transform: scale(2.0); opacity: 0; } 100% { transform: scale(2.0); opacity: 0; } } /* ═══ 7. Data-stream top border (animated gradient that flows) ════ */ .data-stream-top { position: relative; } .data-stream-top::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent 0%, rgba(62, 230, 158, 0.0) 20%, rgba(62, 230, 158, 0.95) 50%, rgba(62, 230, 158, 0.0) 80%, transparent 100% ); background-size: 200% 100%; animation: streamFlow 3s linear infinite; filter: drop-shadow(0 0 6px rgba(62, 230, 158, 0.7)); } @keyframes streamFlow { from { background-position: -100% 0; } to { background-position: 100% 0; } } /* ═══ 8. Subtle CRT vignette ═══════════════════════════════════════ */ body { position: relative; } @keyframes crtFlicker { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.46; } } /* ═══ 9. Card hover lift (compounds with whatever card already had) */ .sc-card, .sig-card, .plan, .inst-card { transition: transform .28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .28s, border-color .28s; } .sc-card:hover, .sig-card:hover, .plan:hover, .inst-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px -8px rgba(0, 184, 112, 0.45), 0 0 0 1px rgba(0, 229, 140, 0.45), inset 0 0 30px -10px rgba(0, 229, 140, 0.12); } /* ═══ 10. Number tabular-nums by default (HUD-feel) ═══════════════ */ .sc-prob-num, .sig-prob-num, .stat-val, .hud-readout, .price, .sc-tp-v, .sig-tp-v { font-variant-numeric: tabular-nums; letter-spacing: 0; } /* ═══ 11. Micro accents — bracket annotations on section titles ═══ */ .section-title::before, .hero h1.section-flag::before { content: '⌐'; display: inline-block; margin-right: 8px; color: rgba(0, 229, 140, 0.55); font-family: 'JetBrains Mono', monospace; font-weight: 400; } /* ═══ 12. SHORT badge gets a pink HUD glow to match reference ════ */ .sc-pill.short, .sig-pill.short, .sc-dir.short { box-shadow: 0 0 0 1px rgba(255, 107, 157, 0.45), 0 0 16px rgba(255, 107, 157, 0.30); } .sc-pill.long, .sig-pill.long, .sc-dir.long { box-shadow: 0 0 0 1px rgba(0, 229, 140, 0.45), 0 0 16px rgba(0, 229, 140, 0.30); } /* ═══ 13. Reduced-motion respect ═══════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html::before, html::after, .welalgo-sweep, .data-stream-top::before, .live-pip::after { animation: none !important; } } /* ═══ 14. Small screens: keep grid lighter so it doesn't busy out */ @media (max-width: 720px) { html::before { background-size: 36px 36px; opacity: 0.6; } html::after { opacity: 0.4; } } /* ═══ 15. Hero signal panel — animated emerald border-sweep ═════════ */ .hud-panel, .showcase { position: relative; isolation: isolate; } .hud-panel::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient( from 0deg, transparent 0deg, rgba(0, 229, 140, 0.0) 80deg, rgba(0, 229, 140, 0.85) 140deg, rgba(62, 230, 158, 0.95) 160deg, rgba(0, 229, 140, 0.85) 180deg, rgba(0, 229, 140, 0.0) 240deg, transparent 360deg ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderSweep 6s linear infinite; pointer-events: none; z-index: -1; } @keyframes borderSweep { to { transform: rotate(360deg); } } /* ═══ 16. Brand-mark — pulse glow rings ═══════════════════════════ */ .brand-mark { filter: drop-shadow(0 0 8px rgba(0, 229, 140, 0.5)); animation: markPulse 3.5s ease-in-out infinite, markSpin 8s linear infinite !important; } @keyframes markPulse { 0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 229, 140, 0.45)); } 50% { filter: drop-shadow(0 0 14px rgba(0, 229, 140, 0.85)) drop-shadow(0 0 28px rgba(62, 230, 158, 0.4)); } } /* ═══ 17. CTA buttons get a soft "data shimmer" on hover ═════════════ */ .btn-pill.primary, .btn-pill.lime, .btn-primary { position: relative; overflow: hidden; } .btn-pill.primary::after, .btn-pill.lime::after, .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70% ); transform: translateX(-100%); transition: transform .55s cubic-bezier(0.2, 0.8, 0.2, 1); } .btn-pill.primary:hover::after, .btn-pill.lime:hover::after, .btn-primary:hover::after { transform: translateX(100%); } /* ═══ 18. Section anchors get an upper-left bracket "[" ═══════════ */ .section-eyebrow::before { content: '◢ '; color: rgba(62, 230, 158, 0.7); font-family: 'JetBrains Mono', monospace; margin-right: 4px; } /* ═══ 19. Hero badge breathing ring ════════════════════════════════ */ .hero-badge, .eyebrow { position: relative; overflow: hidden; } .hero-badge::after, .eyebrow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 90deg, transparent 0%, rgba(0, 229, 140, 0.18) 50%, transparent 100% ); background-size: 200% 100%; animation: streamFlow 3.5s linear infinite; pointer-events: none; opacity: 0.55; } /* ═══ 20. Mouse-tracking spotlight on cards ═══════════════════════════════ The card listens to its own mouseenter/mousemove via CSS variables set inline by JS (welalgo-dynamic.js). Card lights up where the cursor is. */ .sc-card, .sig-card, .plan, .inst-card, .feat-card, .step, .hud-card { --mx: 50%; --my: 50%; } .sc-card::after, .sig-card::after, .plan::after, .inst-card::after, .feat-card::after, .step::after, .hud-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle 220px at var(--mx) var(--my), rgba(0, 229, 140, 0.15), transparent 60% ); opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0; } .sc-card:hover::after, .sig-card:hover::after, .plan:hover::after, .inst-card:hover::after, .feat-card:hover::after, .step:hover::after, .hud-card:hover::after { opacity: 1; } /* keep card content above the spotlight glow */ .sc-card > *, .sig-card > *, .plan > *, .inst-card > *, .feat-card > *, .step > *, .hud-card > * { position: relative; z-index: 1; } /* ═══ 21. Page-level cursor halo (subtle, only desktop) ═══════════════════ Fades in only over interactive zones; ignores reduced-motion users. */ @media (hover: hover) and (pointer: fine) { .cursor-halo { position: fixed; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle, rgba(0, 229, 140, 0.10), rgba(0, 229, 140, 0.04) 40%, transparent 70% ); transform: translate(-50%, -50%); z-index: -1; transition: opacity .35s; opacity: 0; mix-blend-mode: screen; } body.has-halo .cursor-halo { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cursor-halo { display: none !important; } } /* ═══ 22. Number-ticker (used by JS to animate stats counting up) ═══════ */ .tick-num { font-variant-numeric: tabular-nums; letter-spacing: -0.5px; } .tick-num.tick-active { animation: tickGlow 0.4s ease-out; } @keyframes tickGlow { 0% { text-shadow: 0 0 0 transparent; transform: translateY(0); } 40% { text-shadow: 0 0 22px rgba(0, 229, 140, 0.8); transform: translateY(-1px); } 100% { text-shadow: 0 0 8px rgba(0, 229, 140, 0.45); transform: translateY(0); } } /* ═══ 23. Boot-up reveal — entire page fades in like a terminal ═══════════ */ @keyframes pageBoot { 0% { opacity: 0; filter: brightness(0.4) blur(8px); } 60% { opacity: 1; filter: brightness(1.05) blur(0.5px); } 100% { opacity: 1; filter: none; } } body { animation: pageBoot 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* ═══ 24. Card border color-shift on hover (legacy compat) ═══════════════ */ .sc-card, .sig-card, .plan, .inst-card, .feat-card, .step, .hud-card { --hover-border: rgba(0, 229, 140, 0.55); } /* ═══ 25. KPI/Stat tickers — green underline that draws on view ═════════ */ .stat::before, .feat-card::before { background: linear-gradient(90deg, transparent, var(--primary), var(--tertiary), transparent); background-size: 200% 100%; animation: streamFlow 4s linear infinite; filter: drop-shadow(0 0 4px rgba(0, 229, 140, 0.5)); } /* ═══ 26. Hero badge — running underline below the eyebrow ═══════════════ */ .hero-badge, .eyebrow, .section-eyebrow { letter-spacing: 1.6px; } /* ═══ 27. Reduce on touch devices for performance ═══════════════════════ */ @media (hover: none) { .cursor-halo { display: none; } .sc-card::after, .sig-card::after, .plan::after, .inst-card::after, .feat-card::after, .step::after, .hud-card::after { display: none; } }