File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090027/01_portfolio/style.css

Back
/* ------------------------------------------------------------- * Custom Cyberpunk / Tech-Futuristic Stylesheet (style.css) * Designed for: Suraphot Yakanmoon (Computer Technology Portfolio) * ------------------------------------------------------------- / / Variables and Base Theme Configuration / :root { --neon-cyan: #00f0ff; --neon-blue: #0055ff; --neon-green: #39ff14; --neon-pink: #ff007f; --bg-dark: #0a0a0f; --bg-card: #0d0d16; --font-orbitron: 'Orbitron', sans-serif; --font-share: 'Share Tech Mono', monospace; --font-inter: 'Inter', sans-serif; --cyber-glow-cyan: 0 0 10px rgba(0, 240, 255, 0.4), 0 0 20px rgba(0, 240, 255, 0.2); --cyber-glow-green: 0 0 10px rgba(57, 255, 20, 0.4), 0 0 20px rgba(57, 255, 20, 0.2); --cyber-glow-blue: 0 0 10px rgba(0, 85, 255, 0.4), 0 0 20px rgba(0, 85, 255, 0.2); } / Custom Scrollbar / ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-dark); border-left: 1px solid rgba(0, 240, 255, 0.1); } ::-webkit-scrollbar-thumb { background: var(--neon-blue); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); box-shadow: var(--cyber-glow-cyan); } / Background Cyber Grid Pattern / .grid-lines { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(0, 240, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 240, 255, 0.04) 1px, transparent 1px); background-position: center; } / Animated CRT Scanlines / .scanlines { background: linear-gradient( rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50% ); background-size: 100% 4px; z-index: 100; opacity: 0.15; background-repeat: repeat; } / Cyberpunk Clip-Paths / .clip-triangle { clip-path: polygon(100% 0, 0 0, 100% 100%); } .clip-triangle-left { clip-path: polygon(0 0, 100% 0, 0 100%); } .clip-card-corner { clip-path: polygon(100% 0, 0 100%, 100% 100%); } / Cyberpunk Buttons / .cyber-btn { position: relative; display: inline-flex; padding: 1px; / border offset / background: transparent; transition: all 0.3s ease; cursor: pointer; overflow: hidden; } .cyber-btn-inner { display: flex; align-items: center; padding: 10px 24px; background: rgba(13, 13, 22, 0.85); color: #ffffff; font-weight: 600; letter-spacing: 0.1em; font-size: 13px; width: 100%; transition: all 0.3s ease; } / Button Variants / .cyber-btn.primary { clip-path: polygon(0 0, 85% 0, 100% 35%, 100% 100%, 15% 100%, 0 65%); background: var(--neon-cyan); } .cyber-btn.primary:hover { box-shadow: var(--cyber-glow-cyan); } .cyber-btn.primary .cyber-btn-inner { clip-path: polygon(0 0, 85% 0, 100% 35%, 100% 100%, 15% 100%, 0 65%); } .cyber-btn.primary:hover .cyber-btn-inner { background: var(--neon-cyan); color: #000000; } .cyber-btn.secondary { clip-path: polygon(15% 0, 100% 0, 100% 65%, 85% 100%, 0 100%, 0 35%); background: var(--neon-blue); } .cyber-btn.secondary:hover { box-shadow: var(--cyber-glow-blue); } .cyber-btn.secondary .cyber-btn-inner { clip-path: polygon(15% 0, 100% 0, 100% 65%, 85% 100%, 0 100%, 0 35%); } .cyber-btn.secondary:hover .cyber-btn-inner { background: var(--neon-blue); color: #ffffff; } / Navigation Links / .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--neon-cyan); box-shadow: var(--cyber-glow-cyan); transition: width 0.3s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 240, 255, 0.4); } / Mobile Hamburger Animation / #mobile-menu-btn.open .line-1 { transform: rotate(45deg); } #mobile-menu-btn.open .line-2 { opacity: 0; } #mobile-menu-btn.open .line-3 { transform: rotate(-45deg); } / Cyber Card Glows & Cuts / .cyber-card { border-radius: 2px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); } / Glitch Text Effect / .glitch-text { position: relative; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-dark); } .glitch-text::before { left: 2px; text-shadow: -2px 0 var(--neon-pink); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 5s infinite linear alternate-reverse; } .glitch-text::after { left: -2px; text-shadow: -2px 0 var(--neon-cyan), 0 2px var(--neon-green); clip: rect(85px, 450px, 140px, 0); animation: glitch-anim-2 5s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip: rect(15px, 9999px, 66px, 0); } 10% { clip: rect(85px, 9999px, 5px, 0); } 20% { clip: rect(34px, 9999px, 87px, 0); } 30% { clip: rect(5px, 9999px, 52px, 0); } 40% { clip: rect(98px, 9999px, 14px, 0); } 50% { clip: rect(61px, 9999px, 83px, 0); } 60% { clip: rect(12px, 9999px, 48px, 0); } 70% { clip: rect(74px, 9999px, 91px, 0); } 80% { clip: rect(3px, 9999px, 64px, 0); } 90% { clip: rect(53px, 9999px, 32px, 0); } 100% { clip: rect(91px, 9999px, 78px, 0); } } @keyframes glitch-anim-2 { 0% { clip: rect(65px, 9999px, 14px, 0); } 10% { clip: rect(4px, 9999px, 98px, 0); } 20% { clip: rect(87px, 9999px, 34px, 0); } 30% { clip: rect(52px, 9999px, 5px, 0); } 40% { clip: rect(14px, 9999px, 98px, 0); } 50% { clip: rect(83px, 9999px, 61px, 0); } 60% { clip: rect(48px, 9999px, 12px, 0); } 70% { clip: rect(91px, 9999px, 74px, 0); } 80% { clip: rect(64px, 9999px, 3px, 0); } 90% { clip: rect(32px, 9999px, 53px, 0); } 100% { clip: rect(78px, 9999px, 91px, 0); } } / Typing Indicator Animation / @keyframes blink { from, to { border-color: transparent } 50% { border-color: var(--neon-green); } } #typing-text { animation: blink 0.75s step-end infinite; } / Project Filter Buttons / .project-filter-btn { padding: 6px 16px; background: rgba(13, 13, 22, 0.6); border: 1px solid rgba(0, 240, 255, 0.15); color: #a0aec0; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.3s ease; clip-path: polygon(0 0, 92% 0, 100% 25%, 100% 100%, 8% 100%, 0 75%); } .project-filter-btn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.05); } .project-filter-btn.active { color: #000000; background: var(--neon-cyan); border-color: var(--neon-cyan); font-weight: 700; box-shadow: var(--cyber-glow-cyan); } / Custom transitions and transforms for portfolio cards / .project-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0, 240, 255, 0.15), 0 8px 10px -6px rgba(0, 240, 255, 0.15); } / Quick Glow helper utilities */ .glow-cyan-hover:hover { box-shadow: var(--cyber-glow-cyan); } .glow-green-hover:hover { box-shadow: var(--cyber-glow-green); }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.32 | proxy | phpinfo | Settings