:root { --bg-color: #0d1117; --primary-color: #58a6ff; --secondary-color: #161b22; --border-color: #30363d; --text-primary: #e6edf3; --text-secondary: #8b949e; --card-bg: rgba(22, 27, 34, 0.7); --success-color: #3fb950; --error-color: #f85149; --accent-yellow: #f0b849; --accent-purple: #c778dd; --gradient-text: linear-gradient(90deg, var(--primary-color), #a2cfff); } html { scroll-behavior: smooth; } body { background-color: var(--bg-color); color: var(--text-primary); font-family: 'Inter', sans-serif; line-height: 1.7; } .container { max-width: 1100px; margin: auto; padding: 0 2rem; } section, aside { padding: 80px 0; overflow: hidden; position: relative; z-index: 2; } .background-animation { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } @keyframes move-stars { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
.stars { position: absolute; width: 1px; height: 1px; background: transparent; box-shadow: 695px 1569px var(--accent-yellow), 1599px 1234px var(--primary-color), 96px 1478px #FFF, 1039px 531px var(--accent-purple), 107px 1435px #FFF, 153px 1083px var(--success-color), 545px 339px var(--primary-color), 884px 1735px #FFF, 1756px 1381px var(--accent-yellow), 1373px 1863px var(--primary-color), 498px 182px #FFF, 1024px 1600px var(--accent-purple), 1827px 1133px var(--primary-color), 106px 1693px #FFF, 59px 1916px var(--primary-color), 1595px 653px var(--success-color), 1341px 726px #FFF, 915px 1275px var(--accent-yellow), 1216px 1282px #FFF, 1058px 1774px var(--primary-color), 200px 800px #FFF, 1800px 950px var(--primary-color), 450px 1300px var(--accent-yellow), 1100px 100px var(--success-color), 1900px 300px #FFF, 600px 1600px var(--accent-purple), 1400px 1400px var(--primary-color), 800px 500px #FFF, 250px 900px var(--primary-color), 1750px 800px var(--accent-yellow), 1350px 1800px #FFF, 400px 100px var(--accent-purple), 950px 1950px var(--success-color); animation: move-stars 150s linear infinite; }
.stars2 { width: 2px; height: 2px; background: transparent; box-shadow: 1982px 584px var(--success-color), 24px 1640px var(--primary-color), 1629px 1515px var(--accent-yellow), 1599px 243px #FFF, 1104px 145px var(--primary-color), 1430px 1063px var(--accent-purple), 1494px 1422px #FFF, 1421px 1195px var(--primary-color), 682px 1437px #FFF, 142px 1974px var(--success-color), 1491px 1897px var(--primary-color), 929px 1198px var(--accent-yellow), 300px 300px var(--primary-color), 1700px 800px #FFF, 500px 1850px var(--success-color), 1300px 1200px var(--accent-purple), 950px 600px #FFF, 750px 1000px #FFF, 1850px 1300px var(--primary-color), 1150px 1700px var(--accent-yellow), 250px 150px var(--success-color), 1950px 700px #FFF, 850px 400px var(--accent-purple); animation: move-stars 100s linear infinite; }
.stars3 { width: 3px; height: 3px; background: transparent; box-shadow: 1684px 109px var(--accent-purple), 1904px 1020px var(--primary-color), 68px 1459px #FFF, 1426px 1419px var(--success-color), 1238px 1957px var(--accent-yellow), 400px 600px #FFF, 1500px 400px var(--primary-color), 1000px 1800px var(--accent-yellow), 200px 1200px var(--success-color), 500px 200px var(--accent-purple), 1700px 1600px var(--primary-color), 800px 900px #FFF, 1300px 100px var(--accent-yellow); animation: move-stars 50s linear infinite; }
.stars4 { width: 1px; height: 1px; background: transparent; box-shadow: 923px 819px #FFF, 129px 421px var(--primary-color), 1982px 138px var(--accent-yellow), 1477px 928px var(--accent-purple), 382px 1837px #FFF, 1839px 1483px var(--success-color), 1092px 1283px #FFF, 492px 1029px var(--primary-color), 1233px 192px var(--accent-yellow), 182px 82px #FFF, 831px 1482px var(--success-color), 1832px 1902px #FFF, 293px 938px var(--accent-purple), 1823px 1023px #FFF; animation: move-stars 200s linear infinite; }
.section-header { text-align: center; margin-bottom: 4rem; } .section-header .section-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .section-title { font-family: 'Space Grotesk', sans-serif; font-size: 3rem; font-weight: 700; margin-bottom: 0.5rem; background: var(--gradient-text); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; } .section-subtitle { color: var(--text-secondary); font-weight: 500; max-width: 600px; margin: auto; } .section-subtitle a { color: var(--primary-color); font-weight: 500; text-decoration: none; border-bottom: 1px dotted var(--primary-color); transition: border-bottom .3s ease; } .section-subtitle a:hover { border-bottom-style: solid; } .header { position: fixed; top: 0; width: 100%; padding: 1rem 0; background: rgba(13, 17, 23, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); z-index: 1000; } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--text-primary); text-decoration: none; } .nav-links { display: flex; list-style: none; align-items: center; } .nav-links li { margin-left: 2rem; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: var(--primary-color); } .hamburger { display: none; cursor: pointer; font-size: 1.5rem; } #hero { min-height: 100vh; display: flex; align-items: center; padding: 20px 0; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: 100%;} .hero-text h1 { font-family: 'Space Grotesk', sans-serif; font-size: 3.5rem; margin-bottom: 1rem; overflow-wrap: break-word; } .hero-text .subtitle { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; } .typed-text { font-weight: 700; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-socials { margin-top: 2rem; } .hero-socials a { color: var(--text-secondary); font-size: 1.5rem; margin-right: 1.5rem; transition: color 0.3s, transform 0.3s; } .hero-socials a:hover { color: var(--primary-color); transform: translateY(-3px) scale(1.1); } .hero-image { position: relative; display: flex; justify-content: center; align-items: center; } .hero-blob { position: absolute; width: 400px; height: 400px; background: linear-gradient(135deg, var(--primary-color), #216eab); border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; animation: morph 8s ease-in-out infinite both alternate; opacity: 0.2; } .hero-image .hero-icon { font-size: 15rem; position: relative; z-index: 1; text-shadow: 0 0 40px rgba(88, 166, 255, 0.3); } @keyframes morph { 0% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; } 100% { border-radius: 70% 30% 42% 58% / 55% 55% 45% 45%; } } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 2.5rem; border-radius: 12px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; backdrop-filter: blur(10px); display: flex; flex-direction: column; } .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .card .card-icon { font-size: 2.5rem; margin-bottom: 1rem; transition: transform 0.3s; } .card:hover .card-icon { transform: scale(1.1); } .card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .card p { color: var(--text-secondary); font-size: 1rem; flex-grow: 1; } .card p a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; } .portfolio-card .results { margin-top: 1.5rem; font-size: 1rem; color: var(--success-color); font-weight: 700; } .portfolio-card ul { list-style-type: '✓'; padding-left: 1.2rem; color: var(--text-secondary); margin: 1rem 0 0 0; flex-grow: 1;} .portfolio-card ul li { padding-left: 0.5rem; margin-bottom: 0.5rem; } .portfolio-card ul li:first-child { list-style-type: none; margin-left: -1.2rem; margin-bottom: 0.8rem; } .portfolio-card ul strong { color: var(--text-primary); } .card .tags { margin-top: 1.5rem; } .tag { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; margin: 4px 2px; font-weight: 500; } .tag.tag-blue { background: rgba(88, 166, 255, 0.1); color: var(--primary-color); } .tag.tag-green { background: rgba(63, 185, 80, 0.15); color: var(--success-color); } .tag.tag-yellow { background: rgba(240, 184, 73, 0.1); color: var(--accent-yellow); } .tag.tag-purple { background: rgba(199, 120, 221, 0.1); color: var(--accent-purple); } .portfolio-link { color: var(--text-primary); text-decoration: none; font-weight: 500; transition: color 0.3s; margin-top: 1.5rem; display: inline-block; } .portfolio-link:hover { color: var(--primary-color); } .testimonial-card { background: var(--secondary-color); border-left: 5px solid var(--accent-yellow); padding: 2rem; border-radius: 8px; max-width: 700px; margin: 0 auto; } .testimonial-card figcaption { text-align: right; margin-top: 1rem; font-style: italic; color: var(--text-secondary); } .availability { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; text-align: center; } .status-dot { width: 10px; height: 10px; background: var(--success-color); border-radius: 50%; margin-right: 10px; animation: pulse 2s infinite; flex-shrink: 0; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(63, 185, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); } } .btn { display: inline-block; background: var(--primary-color); color: var(--bg-color); padding: 15px 40px; border-radius: 8px; text-decoration: none; font-size: 1.1rem; font-weight: 700; border: none; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; } .btn:hover:not(:disabled) { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(88, 166, 255, 0.3); } .section-divider { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), var(--border-color), rgba(255, 255, 255, 0)); margin: 0; } .footer { background: var(--secondary-color); text-align: center; padding: 3rem 0; color: var(--text-secondary); border-top: 1px solid var(--border-color); position: relative; z-index: 2; } .footer-socials a { color: var(--text-secondary); font-size: 1.3rem; margin: 0 0.75rem; transition: color 0.3s, transform 0.3s; } .footer-socials a:hover { color: var(--primary-color); transform: translateY(-3px); } .back-to-top { position: fixed; bottom: 30px; right: 30px; background: var(--primary-color); color: var(--bg-color); width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.4s; } .back-to-top.visible { opacity: 1; visibility: visible; } .footer-contact-link { color: var(--text-secondary); text-decoration: none; margin: 0 1rem; position: relative; transition: color 0.3s, transform 0.3s; } .footer-contact-link::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: var(--primary-color); bottom: -4px; left: 0; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease-in-out; } .footer-contact-link:hover { color: var(--primary-color); transform: translateY(-2px); } .footer-contact-link:hover::after { transform: scaleX(1); } .icon-blue { color: var(--primary-color); } .icon-green { color: var(--success-color); } .icon-yellow { color: var(--accent-yellow); } .icon-purple { color: var(--accent-purple); } .icon-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .card:hover { border-color: var(--primary-color); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; } .contact-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 2.5rem 2rem; border-radius: 12px; text-align: center; text-decoration: none; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .contact-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); } .contact-card i { font-size: 3rem; margin-bottom: 1.5rem; display: block; transition: transform 0.3s ease-in-out; } .contact-card:hover i { transform: scale(1.1) rotate(-5deg); } .contact-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.5rem; transition: color 0.3s; } .contact-card p { color: var(--text-secondary); font-size: 1rem; margin: 0; word-break: break-all; } .contact-card.email:hover { border-color: var(--accent-yellow); } .contact-card.email:hover h3 { color: var(--accent-yellow); } .contact-card.phone:hover { border-color: var(--success-color); } .contact-card.phone:hover h3 { color: var(--success-color); } .contact-card.linkedin:hover { border-color: var(--primary-color); } .contact-card.linkedin:hover h3 { color: var(--primary-color); } .faq-accordion { max-width: 800px; margin: 2rem auto; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; } .faq-item { border-bottom: 1px solid var(--border-color); } .faq-item:last-child { border-bottom: none; } .faq-question { background: transparent; border: none; width: 100%; text-align: left; padding: 1.5rem; font-size: 1.2rem; font-weight: 500; font-family: 'Space Grotesk', sans-serif; color: var(--text-primary); cursor: pointer; position: relative; display: flex; justify-content: space-between; align-items: center; } .faq-question::after { content: '\f067'; font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform 0.3s ease; } .faq-question.active::after { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; background: var(--secondary-color); } .faq-answer p { padding: 0 1.5rem 1.5rem; margin: 0; color: var(--text-secondary); } @media (max-width: 992px) { .hero-content { grid-template-columns: 1fr; text-align: center; } .hero-image { grid-row: 1; margin-bottom: 2rem; } .hero-socials { justify-content: center; display: flex; } } @media (max-width: 768px) { .container { padding: 0 1.5rem; } section, aside { padding: 60px 0; } .section-title { font-size: 2.2rem; } .hero-text h1 { font-size: 2.5rem; line-height: 1.3; } .card-grid, .contact-grid { grid-template-columns: 1fr; } #hero { min-height: auto; align-items: flex-start; padding-top: 120px; padding-bottom: 60px; } .hero-image { margin-top: 0; margin-bottom: 3rem; } .hero-blob { width: 300px; height: 300px; } .hero-image .hero-icon { font-size: 12rem; } .nav-links { position: fixed; top: 65px; right: 0; width: 100%; height: calc(100vh - 65px); flex-direction: column; justify-content: center; align-items: center; background: var(--bg-color); transform: translateX(100%); transition: transform 0.5s ease-in-out; margin: 0; padding: 0; } .nav-links.active { transform: translateX(0); } .nav-links li { margin: 1.5rem 0; } .hamburger { display: block; } .footer-contact-link { margin: 0.25rem 0; } .footer .container > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .footer .container > div:first-child span { display: none; } .faq-question { font-size: 1.1rem; padding: 1rem; } .faq-answer p { padding: 0 1rem 1rem; } }