/* ============================================================ lifestream.css Drop in css/ folder. Import in every page's : (or href="css/lifestream.css" from index.html) ============================================================ */ /* ── The three canvas layers ──────────────────────────────── */ #ls-deep { position: fixed; inset: 0; z-index: 1; pointer-events: none; } #ls-mid { position: fixed; inset: 0; z-index: 2; pointer-events: none; } #ls-surface { position: fixed; inset: 0; z-index: 3; pointer-events: none; } /* ── Vignette overlay ─────────────────────────────────────── */ /* Darkens the edges so the stream feels deep, not flat. */ /* Content area reads as a window INTO the Lifestream. */ .ls-vignette { position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient( ellipse 120% 100% at 50% 50%, transparent 30%, rgba(0, 5, 3, 0.55) 65%, rgba(0, 3, 2, 0.88) 100% ); } /* ── Bottom fog ───────────────────────────────────────────── */ /* Content feels like it rises out of the deep stream below. */ .ls-fog { position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; z-index: 5; pointer-events: none; background: linear-gradient( to top, rgba(0, 8, 5, 0.9) 0%, rgba(0, 12, 7, 0.5) 40%, transparent 100% ); } /* ── Energy pulse overlay ─────────────────────────────────── */ /* Occasional full-screen breathe - the stream surging. */ .ls-pulse { position: fixed; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient( ellipse 80% 60% at 50% 50%, rgba(0, 255, 140, 0.04) 0%, transparent 70% ); animation: ls-breathe 8s ease-in-out infinite; } @keyframes ls-breathe { 0% { opacity: 0; } 15% { opacity: 1; } 40% { opacity: 0.3; } 55% { opacity: 0.8; } 80% { opacity: 0.1; } 100% { opacity: 0; } } /* ── Page content sits above all layers ──────────────────── */ .page-wrap { position: relative; z-index: 10; } /* ── Glass card ───────────────────────────────────────────── */ /* THE key class. Semi-transparent so the stream shows through. */ /* Use this on any content card. Replaces your old .char-card, */ /* .build-card, .mat-card etc - or just add it alongside them. */ .glass-card { background: rgba(2, 14, 8, 0.65); border: 1px solid rgba(0, 255, 170, 0.12); border-radius: 8px; padding: 1.75rem; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; } /* Lifestream light follows mouse cursor inside the card */ .glass-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at var(--mx, 50%) var(--my, 30%), rgba(0, 255, 170, 0.07) 0%, transparent 60% ); opacity: 0; transition: opacity 0.4s; pointer-events: none; } /* Top edge light on hover - stream bleeding in from above */ .glass-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 255, 170, 0.45), transparent ); opacity: 0; transition: opacity 0.3s; } .glass-card:hover { border-color: rgba(0, 255, 170, 0.3); box-shadow: 0 8px 40px rgba(0, 255, 170, 0.08), inset 0 1px 0 rgba(0, 255, 170, 0.1); transform: translateY(-3px); } .glass-card:hover::before { opacity: 1; } .glass-card:hover::after { opacity: 1; } /* ── Glass card color variants ────────────────────────────── */ /* Add these alongside .glass-card for type-specific coloring */ .glass-card-green { border-color: rgba(0, 255, 100, 0.1); } .glass-card-green:hover { border-color: rgba(0, 255, 100, 0.3); box-shadow: 0 8px 40px rgba(0, 200, 80, 0.1); } .glass-card-blue { border-color: rgba(68, 170, 255, 0.1); } .glass-card-blue:hover { border-color: rgba(68, 170, 255, 0.3); box-shadow: 0 8px 40px rgba(50, 140, 255, 0.1); } .glass-card-red { border-color: rgba(255, 68, 80, 0.1); } .glass-card-red:hover { border-color: rgba(255, 68, 80, 0.3); box-shadow: 0 8px 40px rgba(220, 40, 60, 0.1); } .glass-card-gold { border-color: rgba(200, 168, 75, 0.1); } .glass-card-gold:hover { border-color: rgba(200, 168, 75, 0.3); box-shadow: 0 8px 40px rgba(180, 140, 50, 0.12); } .glass-card-purple { border-color: rgba(200, 80, 255, 0.1); } .glass-card-purple:hover { border-color: rgba(200, 80, 255, 0.3); box-shadow: 0 8px 40px rgba(170, 50, 230, 0.1); } /* ── Lifestream section divider ───────────────────────────── */ /* Drop between sections for an energy line effect */ .ls-divider { width: 100%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(0, 255, 170, 0.25) 20%, rgba(0, 255, 170, 0.08) 50%, rgba(0, 255, 170, 0.25) 80%, transparent ); margin: 3rem 0; position: relative; } /* Bright center point on the divider */ .ls-divider::after { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: radial-gradient( ellipse at center, rgba(0, 255, 170, 0.6) 0%, transparent 100% ); border-radius: 50%; } /* ── Lifestream text glow ─────────────────────────────────── */ /* Add to headings or labels for the stream-lit look */ .ls-glow { color: #00ffaa; text-shadow: 0 0 20px rgba(0, 255, 170, 0.6), 0 0 40px rgba(0, 255, 170, 0.2); } .ls-glow-white { color: #ffffff; text-shadow: 0 0 30px rgba(0, 255, 170, 0.4), 0 0 60px rgba(0, 255, 170, 0.15), 0 2px 4px rgba(0, 0, 0, 0.8); } /* ── Body background ──────────────────────────────────────── */ /* Base color underneath all canvas layers */ body { background: #010905; }