/* ============================================================ HIVE COSMIC DESIGN LAW (assets/hive-cosmic.css) One shared system. Load this on EVERY page after the page's own :root so these tokens win. Enforces: 1. Headline heartbeat: aurora gradient + slow sweep + shimmer-on-load/hover across ALL h1/h2 (opt-in class). 2. Heavier, glowing box outlines (agentic / cosmic). 3. Electric green (#34D399) mandatory on status, outputs, success, and as the headline gradient endpoint. Palette lock: gold = logo only. blue #2F80FF = system. green #34D399 = live / output / success. ============================================================ */ :root{ --hv-blue:#2F80FF; --hv-blue-hi:#5B9BFF; --hv-green:#34D399; --hv-green-hi:#5FE6B4; --hv-violet:#8B7BFF; /* aurora third stop, used sparingly */ --hv-glow-blue:rgba(47,128,255,.35); --hv-glow-green:rgba(52,211,153,.35); } /* ---------- 1. HEADLINE HEARTBEAT ---------- */ /* Apply .hv-live-head to any h1/h2/heading you want alive. Combines: a moving aurora gradient (blue->green->violet->blue), a slow continuous drift, and a brighter shimmer band that runs once on load and again on hover. */ @keyframes hvAurora{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes hvShimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} } .hv-live-head{ background-image:linear-gradient( 100deg, #ffffff 0%, var(--hv-blue-hi) 22%, var(--hv-green-hi) 44%, #ffffff 60%, var(--hv-violet) 78%, var(--hv-blue-hi) 100% ); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:hvAurora 11s ease-in-out infinite; will-change:background-position; /* subtle cosmic bloom behind the text */ filter:drop-shadow(0 0 18px rgba(47,128,255,.12)); } /* nested spans (e.g. ) must inherit the clip so the whole headline shares one moving gradient instead of a solid word. */ .hv-live-head *{ -webkit-text-fill-color:transparent!important; color:transparent!important; background:none!important; } /* shimmer band overlay: a second layer that sweeps once on load and on hover. Uses ::after so it does not fight the aurora clip. */ .hv-live-head{position:relative} .hv-live-head::after{ content:attr(data-shine); position:absolute;left:0;top:0;right:0;bottom:0; background-image:linear-gradient(100deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); background-size:200% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; pointer-events:none; animation:hvShimmer 2.6s ease-out 1; /* run once on load */ } .hv-live-head:hover::after{animation:hvShimmer 1.8s ease-out 1} @media (prefers-reduced-motion:reduce){ .hv-live-head{animation:none;background-position:20% 50%} .hv-live-head::after{display:none} } /* ---------- 2. HEAVY GLOWING BOXES ---------- */ /* Add .hv-box to any card/panel/outline that currently reads as a thin 1px mistake. Heavier border + cosmic glow + faint inner lift. */ .hv-box{ border:1.5px solid rgba(47,128,255,.34)!important; border-radius:16px; background: radial-gradient(120% 140% at 50% 0%, rgba(47,128,255,.06), transparent 60%), rgba(255,255,255,.02); box-shadow: 0 0 0 1px rgba(47,128,255,.10), 0 0 28px -6px var(--hv-glow-blue), inset 0 1px 0 rgba(255,255,255,.05); transition:border-color .25s ease, box-shadow .25s ease; } .hv-box:hover{ border-color:rgba(52,211,153,.5)!important; box-shadow: 0 0 0 1px rgba(52,211,153,.14), 0 0 34px -4px var(--hv-glow-green), inset 0 1px 0 rgba(255,255,255,.06); } /* green variant for live/output containers */ .hv-box.live{ border-color:rgba(52,211,153,.4)!important; box-shadow:0 0 0 1px rgba(52,211,153,.12), 0 0 30px -6px var(--hv-glow-green), inset 0 1px 0 rgba(255,255,255,.05); } /* ---------- 3. ELECTRIC GREEN: STATUS / OUTPUT / SUCCESS ---------- */ /* Status pill: any live/ready/signed/verified state. */ .hv-status{ display:inline-flex;align-items:center;gap:8px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600; color:var(--hv-green); background:rgba(52,211,153,.09); border:1px solid rgba(52,211,153,.4); border-radius:8px;padding:5px 12px; box-shadow:0 0 16px -4px var(--hv-glow-green); } .hv-status .dot{ width:8px;height:8px;border-radius:50%;background:var(--hv-green); box-shadow:0 0 0 3px rgba(52,211,153,.22); animation:hvPulse 2s ease-in-out infinite; } @keyframes hvPulse{0%,100%{opacity:1}50%{opacity:.45}} /* Model output / receipt values: green mono accents. */ .hv-output{color:var(--hv-green-hi)} .hv-receipt-id,.hv-signed{ font-family:'IBM Plex Mono',ui-monospace,monospace; color:var(--hv-green); } /* Success confirmation flash (copied / submitted / passed). */ .hv-ok{color:var(--hv-green)!important;border-color:rgba(52,211,153,.55)!important} @keyframes hvOkFlash{0%{color:var(--hv-green-hi)}100%{color:var(--hv-green)}} .hv-ok{animation:hvOkFlash .4s ease-out 1} /* ---------- index checkbox tooltip + info line ---------- */ .hv-opt-index{position:relative} .hv-optinfo{ display:inline-flex;align-items:center;justify-content:center; width:16px;height:16px;margin-left:7px;border-radius:50%; font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;font-style:italic;font-weight:700; color:var(--hv-green);background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.5);cursor:help; box-shadow:0 0 10px -3px var(--hv-glow-green);position:relative;transition:background .2s ease,box-shadow .2s ease; } .hv-optinfo:hover,.hv-optinfo:focus{background:rgba(52,211,153,.2);box-shadow:0 0 14px -2px var(--hv-glow-green);outline:none} .hv-tip{ position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px); width:320px;max-width:78vw;box-sizing:border-box;white-space:normal;word-break:normal;overflow-wrap:break-word;z-index:60; background:#0a0d12;border:1.5px solid rgba(52,211,153,.4);border-radius:12px;padding:14px 16px; box-shadow:0 0 34px -8px var(--hv-glow-green),0 18px 40px rgba(0,0,0,.6); font-family:'Space Grotesk',system-ui,sans-serif;font-style:normal;font-weight:400; font-size:14px;line-height:1.55;color:#c7ccd4;letter-spacing:0;text-transform:none;text-align:left; opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease; } .hv-tip b{display:block;color:#fff;font-family:'Michroma',ui-sans-serif,sans-serif;font-weight:700;font-size:15px;margin:0 0 6px} .hv-optinfo:hover .hv-tip,.hv-optinfo:focus .hv-tip{opacity:1;transform:translateX(-50%) translateY(0)} .hv-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%); border:7px solid transparent;border-top-color:rgba(52,211,153,.4)} @media(max-width:560px){.hv-tip{left:0;transform:translateX(0) translateY(6px)}.hv-optinfo:hover .hv-tip,.hv-optinfo:focus .hv-tip{transform:translateX(0) translateY(0)}.hv-tip::after{left:20px}} /* index-checked badge on results */ .hv-index-badge{ display:inline-flex;align-items:center;gap:6px; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:14px;letter-spacing:.05em;font-weight:600; color:var(--hv-green);background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.45);border-radius:8px;padding:4px 10px; box-shadow:0 0 14px -4px var(--hv-glow-green); } .hv-index-badge svg{width:13px;height:13px;stroke:var(--hv-green);fill:none;stroke-width:2.4} /* ---------- utility: cosmic star drift background ---------- */ /* Optional. Add .hv-cosmic-bg to a section for a very subtle drifting starfield. No literal shooting stars unless asked. */ @keyframes hvStarDrift{from{background-position:0 0,0 0}to{background-position:-600px 300px,-300px 150px}} .hv-cosmic-bg{ position:relative; background-color:#04070d; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 70% 60%, rgba(120,180,255,.5), transparent), radial-gradient(1px 1px at 40% 80%, rgba(95,230,180,.4), transparent), radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,.4), transparent); background-size:600px 600px,600px 600px,600px 600px,600px 600px; animation:hvStarDrift 60s linear infinite; } @media (prefers-reduced-motion:reduce){.hv-cosmic-bg{animation:none}}