File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090005/Portfolio/style.css

Back
/* --- Fonts & Typography --- / @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap'); :root { font-family: 'Inter', sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: 'Outfit', sans-serif; } / --- Smooth Scrolling --- / html { scroll-behavior: smooth; } / --- Theme Transition Rule --- / / Target background and color transitions smoothly without affecting hover transform animations / body, header, section, footer, div, p, span, a, button, input, textarea, label { transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); } / --- Custom Slim Scrollbar --- / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-track { background: #000000; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb { background: #27272a; } ::-webkit-scrollbar-thumb:hover { background: #a855f7; / Kwangya Neon Purple / } .dark ::-webkit-scrollbar-thumb:hover { background: #a855f7; } / --- Floating Animation --- / @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } } .animate-float { animation: float 5s ease-in-out infinite; } / --- Secondary Floating Animation (Offset) --- / @keyframes float-slow { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(8px) scale(1.03); } } .animate-float-slow { animation: float-slow 7s ease-in-out infinite; } / --- Rotating Animation --- / @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin-slow { animation: spin-slow 20s linear infinite; } / --- Glassmorphic Hover Card Effect --- / .glass-card { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } / --- Active ScrollSpy Navigation Class --- / .active-nav-link { color: #a855f7 !important; / Kwangya Neon Purple / position: relative; } .dark .active-nav-link { color: #a855f7 !important; } .active-nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: currentColor; border-radius: 9999px; transform: scaleX(1); transition: transform 0.3s ease; } / --- Responsive Timeline Line --- / @media (min-width: 768px) { .timeline-line { left: 50%; transform: translateX(-50%); } } / --- Form Input Custom Highlights --- / .custom-input { background-color: rgba(255, 255, 255, 0.4); } .dark .custom-input { background-color: rgba(9, 9, 11, 0.3); } .custom-input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15); background-color: #ffffff; } .dark .custom-input:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15); background-color: #030303; } / --- Skill Category Active Tab --- / .skill-tab-active { background-color: #a855f7; color: #ffffff !important; } .dark .skill-tab-active { background-color: #a855f7; color: #030303 !important; } / --- Cyber Glow Card Effect (aespa Theme) --- / .cyber-glow-card { position: relative; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } / Light Mode: subtle elegant shadow / .cyber-glow-card:hover { box-shadow: 0 12px 30px rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.25); } / Dark Mode: Neon Purple Glow / .dark .cyber-glow-card { box-shadow: 0 0 20px rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.15); } .dark .cyber-glow-card:hover { box-shadow: 0 0 25px rgba(168, 85, 247, 0.35), 0 0 10px rgba(0, 210, 255, 0.2); border-color: rgba(168, 85, 247, 0.6); } / Border Gradient overlay on hover / .cyber-glow-card::before { content: ''; position: absolute; inset: -1px; border-radius: 1rem; padding: 1.5px; background: linear-gradient(135deg, transparent, transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; transition: background 0.4s ease; z-index: 1; } .dark .cyber-glow-card:hover::before { background: linear-gradient(135deg, #a855f7, #00d2ff); / Neon Purple to Electric Blue / } / --- Cyber Grid Background Overlay --- / .cyber-grid { background-size: 60px 60px; background-image: linear-gradient(to right, rgba(168, 85, 247, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(168, 85, 247, 0.03) 1px, transparent 1px); } .dark .cyber-grid { background-image: linear-gradient(to right, rgba(168, 85, 247, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(168, 85, 247, 0.05) 1px, transparent 1px); } / --- Dynamic Slow Glow Animations --- / @keyframes slow-move-1 { 0%, 100% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(5%, -4%) scale(1.05); } 66% { transform: translate(-3%, 6%) scale(0.95); } } @keyframes slow-move-2 { 0%, 100% { transform: translate(0px, 0px) scale(1.05); } 33% { transform: translate(-6%, 5%) scale(0.95); } 66% { transform: translate(4%, -5%) scale(1.03); } } .animate-slow-glow-1 { animation: slow-move-1 25s ease-in-out infinite; } .animate-slow-glow-2 { animation: slow-move-2 30s ease-in-out infinite; } / --- Full Screen Intro Overlay --- / body.intro-active { overflow: hidden !important; } .intro-overlay { position: fixed; inset: 0; background-color: #000000; / Deep absolute black / z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), visibility 1s; } .intro-ambient-glow { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%); filter: blur(100px); opacity: 0; transform: scale(0.6); transition: opacity 2.5s ease-out, transform 2.5s ease-out; pointer-events: none; z-index: 1; } .intro-ambient-glow.active { opacity: 1; transform: scale(1); } / Big Logo J Stage / .intro-logo-j { font-family: 'Outfit', sans-serif; font-size: 8rem; font-weight: 900; color: #ffffff; position: relative; text-shadow: 0 0 20px rgba(168, 85, 247, 0.7), 0 0 40px rgba(168, 85, 247, 0.4); opacity: 0; transform: scale(0.85); transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; display: none; } .intro-logo-j.visible { display: block; opacity: 1; transform: scale(1); } .intro-logo-j.glitching::before, .intro-logo-j.glitching::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; } .intro-logo-j.glitching::before { left: 3px; text-shadow: -2px 0 #ff00c8; clip: rect(10px, 9999px, 85px, 0); animation: glitch-anim-j1 1.2s infinite linear alternate-reverse; } .intro-logo-j.glitching::after { left: -3px; text-shadow: -2px 0 #00d2ff, 0 2px #a855f7; clip: rect(60px, 9999px, 140px, 0); animation: glitch-anim-j2 1.2s infinite linear alternate-reverse; } @keyframes glitch-anim-j1 { 0% { clip: rect(15px, 9999px, 45px, 0); } 25% { clip: rect(50px, 9999px, 95px, 0); } 50% { clip: rect(5px, 9999px, 30px, 0); } 75% { clip: rect(75px, 9999px, 120px, 0); } 100% { clip: rect(20px, 9999px, 60px, 0); } } @keyframes glitch-anim-j2 { 0% { clip: rect(55px, 9999px, 105px, 0); } 25% { clip: rect(10px, 9999px, 40px, 0); } 50% { clip: rect(70px, 9999px, 135px, 0); } 75% { clip: rect(15px, 9999px, 50px, 0); } 100% { clip: rect(35px, 9999px, 85px, 0); } } / Full Logo JEERAPAT.S Stage / .glitch-logo { font-family: 'Outfit', sans-serif; font-size: 4rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: #ffffff; position: relative; text-shadow: 0 0 15px rgba(168, 85, 247, 0.6), 0 0 30px rgba(168, 85, 247, 0.4); opacity: 0; transform: scale(0.95); transition: opacity 0.8s ease, transform 0.8s ease; z-index: 10; display: none; } .glitch-logo.visible { display: block; opacity: 1; transform: scale(1); } / MP4 Video Player Element / .intro-video-container { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .intro-video-container.active { opacity: 1; } .intro-video-container video { width: 100%; height: 100%; object-fit: cover; } / Welcome Text Stage / .intro-welcome-container { position: relative; z-index: 12; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(15px); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .intro-welcome-container.visible { opacity: 1; transform: translateY(0); } .intro-welcome-title { font-family: 'Outfit', sans-serif; font-size: 3.5rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; text-shadow: 0 0 20px rgba(168, 85, 247, 0.8), 0 0 40px rgba(168, 85, 247, 0.5); background: linear-gradient(135deg, #ffffff 40%, #c084fc 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; } .intro-welcome-cursor { border-right: 3px solid #a855f7; animation: blink-caret 0.75s step-end infinite; } / Skip Button */ .intro-skip-btn { position: absolute; bottom: 2rem; right: 2rem; padding: 0.5rem 1.25rem; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(168, 85, 247, 0.3); color: #a78bfa; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; transition: all 0.3s ease; z-index: 10000; cursor: pointer; opacity: 0; transform: translateY(10px); backdrop-filter: blur(8px); } .intro-skip-btn.visible { opacity: 1; transform: translateY(0); } .intro-skip-btn:hover { background: rgba(168, 85, 247, 0.2); color: #ffffff; border-color: #a855f7; box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); }

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