Contact information

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Share+Tech+Mono&display=swap'); *{margin:0;padding:0;box-sizing:border-box} :root{ --orange:#F5A623; --orange-dim:rgba(245,166,35,.12); --orange-glow:rgba(245,166,35,.35); --bg:#0A0A0C; --bg2:#111114; --txt:#E0E0E0; --txt-dim:#666; --txt-dark:#444; --line:#1A1A1E; } body{ background:var(--bg); color:var(--txt); font-family:'Share Tech Mono',monospace; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; } .card{ position:relative; width:720px; height:400px; background:var(--bg); border:1px solid var(--line); overflow:hidden; } /* Grid background */ .grid{ position:absolute;inset:0; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:40px 40px; opacity:.35; } /* Scanline overlay */ .scanlines{ position:absolute;inset:0; background:repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,.08) 2px, rgba(0,0,0,.08) 4px ); pointer-events:none; z-index:10; } /* Corner brackets */ .corner{ position:absolute; width:24px;height:24px; border-color:var(--orange); border-style:solid; border-width:0; opacity:.6; z-index:5; } .corner.tl{top:8px;left:8px;border-top-width:2px;border-left-width:2px} .corner.tr{top:8px;right:8px;border-top-width:2px;border-right-width:2px} .corner.bl{bottom:8px;left:8px;border-bottom-width:2px;border-left-width:2px} .corner.br{bottom:8px;right:8px;border-bottom-width:2px;border-right-width:2px} /* Left accent bar */ .accent-bar{ position:absolute;left:0;top:60px; width:4px;height:280px; background:var(--orange); box-shadow:0 0 20px var(--orange-glow),4px 0 30px var(--orange-dim); z-index:3; } /* Bottom bar */ .bottom-bar{ position:absolute;bottom:0;left:0;right:0; height:4px; background:linear-gradient(90deg,var(--orange),var(--orange) 60%,transparent); box-shadow:0 0 16px var(--orange-glow); z-index:3; } /* Top status */ .status-top{ position:absolute;top:16px;left:40px;right:40px; display:flex;justify-content:space-between; font-size:9px;letter-spacing:2px; z-index:4; } .status-top .sys{color:var(--orange);opacity:.45} .status-top .region{color:var(--txt-dark)} .status-top .region span{margin:0 4px} /* Main brand area */ .brand{ position:absolute; top:70px;left:50px; z-index:4; } .brand-title{ font-family:'Orbitron',sans-serif; font-size:56px; font-weight:700; letter-spacing:10px; line-height:1; } .brand-title .mech{color:var(--orange);text-shadow:0 0 40px var(--orange-glow)} .brand-title .camp{color:var(--txt)} .scan-line{ margin-top:8px; height:2px; background:linear-gradient(90deg,var(--orange) 0%,var(--orange) 55%,transparent 55%,transparent 58%,rgba(245,166,35,.2) 58%,rgba(245,166,35,.2) 80%,transparent 80%); width:420px; animation:scanPulse 3s ease-in-out infinite; } .scan-line-sub{ margin-top:3px; height:1px; width:100px; background:var(--orange); opacity:.15; } .tagline{ margin-top:16px; font-size:11px; letter-spacing:5px; color:var(--txt-dim); } .tagline .diamond{ color:var(--orange); opacity:.5; margin:0 6px; } /* Info section */ .info{ position:absolute; bottom:50px;left:50px;right:50px; z-index:4; } .info-divider{ height:1px; background:var(--line); margin-bottom:20px; position:relative; } .info-divider::before{ content:''; position:absolute;left:0;top:-1px; width:20px;height:2px; background:var(--orange); opacity:.6; } .info-row{ display:flex; gap:60px; } .info-block .label{ font-size:9px; letter-spacing:2px; color:var(--orange); opacity:.5; margin-bottom:6px; } .info-block .value{ font-family:'Orbitron',sans-serif; font-size:13px; color:#CCC; letter-spacing:1px; } .info-block .value.email{ font-family:'Share Tech Mono',monospace; font-weight:400; color:#AAA; } /* Bottom status */ .status-bottom{ position:absolute; bottom:14px;left:50px;right:50px; display:flex;justify-content:space-between; font-size:8px;letter-spacing:2px; color:var(--txt-dark); z-index:4; } /* Right side decorations */ .right-deco{ position:absolute;right:40px;top:70px; z-index:4; display:flex;flex-direction:column;gap:3px; } .data-line{ height:1px; background:var(--orange); opacity:.12; } .hexagon{ position:absolute; right:50px;top:200px; width:36px;height:36px; z-index:4; } .hexagon svg{opacity:.2} /* Circuit nodes */ .circuit{ position:absolute; z-index:4; } .circuit-dot{ width:5px;height:5px; border-radius:50%; background:var(--orange); opacity:.5; animation:pulse 2s ease-in-out infinite; } .circuit-line{ background:var(--orange); opacity:.25; } .c1{left:16px;top:58px;display:flex;align-items:center;gap:0} .c1 .circuit-line{width:30px;height:1px} .c1 .circuit-dot{animation-delay:0s} .c2{left:16px;top:330px;display:flex;align-items:center;gap:0} .c2 .circuit-line{width:50px;height:1px} .c2 .circuit-dot{animation-delay:.6s} /* Animated glow ring */ .glow-ring{ position:absolute; right:44px;top:194px; width:48px;height:48px; border:1px solid var(--orange); opacity:.08; border-radius:50%; animation:ringPulse 4s ease-in-out infinite; z-index:2; } /* Flicker animation on brand title */ @keyframes scanPulse{ 0%,100%{opacity:1} 50%{opacity:.7} } @keyframes pulse{ 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.4)} } @keyframes ringPulse{ 0%,100%{opacity:.06;transform:scale(1)} 50%{opacity:.15;transform:scale(1.15)} } @keyframes fadeInUp{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} } @keyframes slideIn{ from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} } .brand{animation:slideIn .8s ease-out both} .info{animation:fadeInUp .6s ease-out .3s both} .status-top{animation:fadeInUp .4s ease-out .1s both} .status-bottom{animation:fadeInUp .4s ease-out .5s both} .accent-bar{animation:slideIn .5s ease-out .2s both} @media(max-width:760px){ .card{width:100%;height:auto;aspect-ratio:16/9;min-height:340px} .brand-title{font-size:36px;letter-spacing:6px} .scan-line{width:280px} .info-row{gap:30px} .right-deco,.hexagon,.glow-ring{display:none} }