File manager

File manager - Edit - /home/webapp69.cm.in.th/u69319090024/Portfolio/css/styles.css

Back
/* Custom variables and utilities to augment Tailwind CSS / @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap'); :root { --font-sans: 'Plus Jakarta Sans', sans-serif; --font-display: 'Outfit', sans-serif; scroll-behavior: smooth; } body { font-family: var(--font-sans); transition: background-color 0.3s ease, color 0.3s ease; } / Custom Scrollbar / ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: transparent; } .dark ::-webkit-scrollbar-track { background: #0f172a; / Slate 900 / } ::-webkit-scrollbar-thumb { background: #cbd5e1; / Slate 300 / border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; / Slate 400 / } .dark ::-webkit-scrollbar-thumb { background: #334155; / Slate 700 / } .dark ::-webkit-scrollbar-thumb:hover { background: #475569; / Slate 600 / } / Glassmorphism helpers / .glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.4); } .dark .glass { background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } / Animations / @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 4s ease-in-out infinite; } @keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } .animate-pulse-glow { animation: pulse-glow 6s ease-in-out infinite; } / Scroll reveal initial states / .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-left.active { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-right.active { opacity: 1; transform: translateX(0); } / Staggered animation delay / .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; } / Dynamic Glow Card Effect / .glow-card { position: relative; overflow: hidden; } .glow-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 1px; background: linear-gradient(to bottom right, rgba(99, 102, 241, 0.5), rgba(168, 85, 247, 0.5)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .glow-card:hover::before { opacity: 1; } / Timeline vertical line */ .timeline-line::before { content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #6366f1, #a855f7); } @media (min-width: 768px) { .timeline-line::before { left: 50%; transform: translateX(-50%); } }

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