/*====================================================================================== ███████╗██╗ ██╗███████╗██╗ ██╗ ██╗███╗ ██╗ ██╔════╝██║ ██║██╔════╝██║ ██║ ██║████╗ ██║ █████╗ ██║ ██║█████╗ ███████║ ██║██╔██╗ ██║ ██╔══╝ ╚██╗ ██╔╝██╔══╝ ██╔══██║ ██║██║╚██╗██║ ███████╗ ╚████╔╝ ███████╗██║ ██║██╗██║██║ ╚████║ ╚══════╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝╚═╝╚═╝╚═╝ ╚═══╝ STYLE.CSS PARTE 2.1 ✔ Variáveis ✔ Reset ✔ Body ✔ Scroll ✔ Background Tecnológico ✔ Grid Animado ✔ Glow ✔ Container ✔ Tipografia ✔ Classes Globais ======================================================================================*/ /*====================================================================================== IMPORTAÇÃO ======================================================================================*/ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap'); /*====================================================================================== VARIÁVEIS ======================================================================================*/ :root{ /*========================================================== CORES PRINCIPAIS ==========================================================*/ --background:#050505; --background-secondary:#0B0B0B; --background-card:rgba(255,255,255,.04); --background-glass:rgba(255,255,255,.06); --background-menu:rgba(8,8,8,.60); /*========================================================== BORDAS ==========================================================*/ --border-color:rgba(255,255,255,.08); --border-glow:rgba(255,20,147,.45); /*========================================================== TEXTO ==========================================================*/ --white:#FFFFFF; --text:#E8E8E8; --text-secondary:#A0A0A0; /*========================================================== NEON ==========================================================*/ --pink:#FF1493; --pink-light:#FF4DB8; --purple:#8A2BE2; --blue:#00CFFF; --green:#00FFAE; /*========================================================== GLOWS ==========================================================*/ --shadow-pink:0 0 15px #ff1493, 0 0 35px #ff1493, 0 0 80px rgba(255,20,147,.35); --shadow-blue:0 0 20px #00CFFF; --shadow-card:0 20px 60px rgba(0,0,0,.45); /*========================================================== TRANSIÇÕES ==========================================================*/ --transition:.35s ease; --transitionSlow:.8s ease; /*========================================================== FONTES ==========================================================*/ --title:'Space Grotesk',sans-serif; --textFont:'Inter',sans-serif; --code:'JetBrains Mono',monospace; /*========================================================== TAMANHOS ==========================================================*/ --container:1400px; } /*====================================================================================== RESET ======================================================================================*/ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--background); color:var(--white); font-family:var(--textFont); overflow-x:hidden; position:relative; } /*====================================================================================== SELEÇÃO DE TEXTO ======================================================================================*/ ::selection{ background:var(--pink); color:white; } /*====================================================================================== LINKS ======================================================================================*/ a{ text-decoration:none; color:inherit; } /*====================================================================================== IMAGENS ======================================================================================*/ img{ display:block; max-width:100%; } /*====================================================================================== LISTAS ======================================================================================*/ ul{ list-style:none; } /*====================================================================================== CONTAINER GLOBAL ======================================================================================*/ .container{ width:min(92%,1400px); margin:auto; } /*====================================================================================== TITULOS GLOBAIS ======================================================================================*/ h1, h2, h3, h4{ font-family:var(--title); font-weight:700; } /*====================================================================================== PARÁGRAFOS ======================================================================================*/ p{ color:var(--text-secondary); line-height:1.8; } /*====================================================================================== BACKGROUND PRINCIPAL ======================================================================================*/ body::before{ content:""; position:fixed; inset:0; background: radial-gradient(circle at 20% 20%, rgba(255,20,147,.12), transparent 35%), radial-gradient(circle at 85% 15%, rgba(0,207,255,.10), transparent 30%), radial-gradient(circle at 70% 80%, rgba(138,43,226,.12), transparent 35%); z-index:-6; } /*====================================================================================== GRID TECNOLÓGICO ======================================================================================*/ body::after{ content:""; position:fixed; inset:0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:60px 60px; opacity:.35; animation:gridMove 18s linear infinite; z-index:-5; } /*====================================================================================== GLOW ESQUERDO ======================================================================================*/ .pink-light{ position:absolute; width:500px; height:500px; background:var(--pink); border-radius:50%; filter:blur(220px); opacity:.22; left:-150px; top:100px; animation:pulseGlow 6s infinite ease-in-out; pointer-events:none; } /*====================================================================================== GLOW DIREITO ======================================================================================*/ .purple-light{ position:absolute; width:500px; height:500px; background:var(--purple); border-radius:50%; filter:blur(220px); opacity:.20; right:-180px; top:250px; animation:pulseGlow 7s infinite ease-in-out; pointer-events:none; } /*====================================================================================== GRID DA HERO ======================================================================================*/ .grid-background{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to bottom,black,transparent); opacity:.6; } /*====================================================================================== LINHAS DIGITAIS ======================================================================================*/ .lines{ position:absolute; inset:0; overflow:hidden; pointer-events:none; } .lines span{ position:absolute; width:1px; height:240px; background: linear-gradient( transparent, rgba(255,20,147,.8), transparent ); animation:lineMove 10s linear infinite; } /* posições */ .lines span:nth-child(1){ left:15%; animation-delay:0s; } .lines span:nth-child(2){ left:40%; animation-delay:2s; } .lines span:nth-child(3){ left:70%; animation-delay:5s; } .lines span:nth-child(4){ left:88%; animation-delay:7s; } /*====================================================================================== SCROLLBAR ======================================================================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background:#050505; } ::-webkit-scrollbar-thumb{ background:linear-gradient( var(--pink), var(--purple) ); border-radius:50px; } ::-webkit-scrollbar-thumb:hover{ background:var(--pink-light); } /*====================================================================================== BOTÕES GLOBAIS ======================================================================================*/ button{ font-family:var(--title); cursor:pointer; border:none; } /*====================================================================================== CLASSE GLASS ======================================================================================*/ .glass{ background:var(--background-glass); backdrop-filter:blur(25px); -webkit-backdrop-filter:blur(25px); border:1px solid var(--border-color); } /*====================================================================================== CLASSE GLOW ROSA ======================================================================================*/ .neon{ box-shadow:var(--shadow-pink); } /*====================================================================================== HOVER PADRÃO ======================================================================================*/ .hover-up{ transition:var(--transition); } .hover-up:hover{ transform:translateY(-8px); } /*====================================================================================== ANIMAÇÕES ======================================================================================*/ @keyframes gridMove{ from{ transform:translateY(0); } to{ transform:translateY(60px); } } @keyframes pulseGlow{ 0%{ transform:scale(1); opacity:.18; } 50%{ transform:scale(1.15); opacity:.35; } 100%{ transform:scale(1); opacity:.18; } } @keyframes lineMove{ 0%{ transform:translateY(-300px); } 100%{ transform:translateY(120vh); } } /*====================================================================================== ██████╗ ███████╗ █████╗ ██████╗ ███████╗██████╗ ██╔══██╗██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗ ██████╔╝█████╗ ███████║██║ ██║█████╗ ██████╔╝ ██╔══██╗██╔══╝ ██╔══██║██║ ██║██╔══╝ ██╔══██╗ ██║ ██║███████╗██║ ██║██████╔╝███████╗██║ ██║ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝╚═════╝ ╚══════╝╚═╝ ╚═╝ HEADER FUTURISTA PARTE 2.2.1 ======================================================================================*/ /*====================================================== HEADER ======================================================*/ .header{ position:fixed; top:20px; left:50%; transform:translateX(-50%); width:94%; max-width:1400px; height:82px; z-index:99999; border-radius:22px; display:flex; align-items:center; transition:.45s ease; } /*============================== CURSOR ==============================*/ .logo, .menu-desktop a, .btn-header, .menu-mobile-btn{ cursor:pointer; } /*====================================================== EFEITO VIDRO ======================================================*/ .header::before{ content:""; position:absolute; inset:0; border-radius:22px; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.08); z-index:-2; } /*====================================================== BORDA ILUMINADA ======================================================*/ .header::after{ content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; background:linear-gradient( 90deg, transparent, rgba(255,20,147,.45), rgba(138,43,226,.45), transparent ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; } /*====================================================== CONTAINER ======================================================*/ .header .container{ position: relative; z-index: 10; display:flex; align-items:center; justify-content:space-between; width:100%; } /*====================================================== LOGO ======================================================*/ .logo{ display:flex; align-items:center; gap:5px; font-family:var(--title); font-size:24px; font-weight:700; color:white; position:relative; } /*====================================================== < ======================================================*/ .logo-bracket{ color:var(--pink); font-family:var(--code); transition:.4s; } /*====================================================== NOME ======================================================*/ .logo-name{ letter-spacing:.8px; transition:.4s; } /*====================================================== PONTO ROSA ======================================================*/ .logo-dot{ color:var(--pink); font-size:28px; transition:.4s; } /*====================================================== HOVER LOGO ======================================================*/ .logo:hover .logo-dot{ text-shadow: 0 0 12px var(--pink), 0 0 25px var(--pink), 0 0 45px var(--pink); } .logo:hover .logo-bracket{ transform:translateY(-3px); } .logo:hover .logo-name{ letter-spacing:2px; } /*====================================================== MENU ======================================================*/ .menu-desktop{ display:flex; align-items:center; gap:45px; } /*====================================================== LINKS ======================================================*/ .menu-desktop a{ position:relative; display:flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:12px; color:#d9d9d9; font-size:15px; font-family:var(--title); font-weight:500; transition:.35s ease; cursor:pointer; } .menu-desktop a::before{ content:""; position:absolute; inset:0; border-radius:12px; background:linear-gradient( 135deg, rgba(255,20,147,.18), rgba(138,43,226,.10) ); opacity:0; transition:.35s; } .menu-desktop a.active{ color:white; } .menu-desktop a.active::after{ width:100%; } .menu-desktop a:hover{ color:#fff; transform:translateY(-3px); text-shadow: 0 0 8px #ff1493, 0 0 18px #ff1493; } .menu-desktop a:hover::before{ opacity:1; } .menu-desktop a::after{ content:""; position:absolute; bottom:4px; left:15%; width:70%; height:2px; background:linear-gradient( 90deg, transparent, var(--pink), transparent ); transform:scaleX(0); transition:.4s; } .menu-desktop a:hover::after{ transform:scaleX(1); } .menu-desktop a.active{ color:#fff; background:rgba(255,20,147,.08); border:1px solid rgba(255,20,147,.25); text-shadow: 0 0 12px #ff1493; } /*====================================================== EFEITO LINHA ======================================================*/ .menu-desktop a::after{ content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); width:0; height:2px; background:linear-gradient( 90deg, transparent, var(--pink), transparent ); transition:.4s; } /*====================================================== HOVER LINK ======================================================*/ .menu-desktop a:hover{ color:white; text-shadow: 0 0 12px rgba(255,20,147,.6); } .menu-desktop a:hover::after{ width:100%; } /*====================================================== BOTÃO ======================================================*/ .btn-header{ position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:15px 34px; border-radius:14px; background:linear-gradient( 135deg, rgba(255,20,147,.15), rgba(138,43,226,.15) ); border:1px solid rgba(255,20,147,.35); color:white; font-weight:600; font-family:var(--title); transition:.4s; } /*====================================================== LUZ DO BOTÃO ======================================================*/ .btn-header span{ position:absolute; width:40px; height:180%; background:rgba(255,255,255,.35); transform:rotate(25deg); left:-120px; } /*====================================================== HOVER BOTÃO ======================================================*/ .btn-header:hover{ transform:translateY(-4px); box-shadow: 0 0 20px rgba(255,20,147,.5), 0 0 40px rgba(255,20,147,.25); } .btn-header:hover span{ left:140%; transition:1s; } /*====================================================== MENU MOBILE ======================================================*/ .menu-mobile-btn{ display:none; width:55px; height:55px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); cursor:pointer; } /*====================================================== LINHAS DO MENU ======================================================*/ .menu-mobile-btn span{ display:block; width:24px; height:2px; background:white; margin:5px auto; transition:.4s; } /*====================================================== LUZ ACIMA DO HEADER ======================================================*/ .header-glow{ position:absolute; top:-90px; left:50%; transform:translateX(-50%); width:420px; height:160px; background:var(--pink); filter:blur(140px); opacity:.18; pointer-events:none; } /*====================================================== HEADER AO ROLAR (JS adicionará a classe .scrolled) ======================================================*/ .header.scrolled{ top:10px; height:74px; } .header.scrolled::before{ background:rgba(5,5,5,.82); backdrop-filter:blur(30px); } /*====================================================================================== HEADER FUTURISTA PARTE 2.2.2 Hover Premium • Efeito Neon • Link Ativo • Botão Holográfico ======================================================================================*/ /*========================================================= HEADER ENTRANDO NA TELA =========================================================*/ .header{ animation:headerFade .9s ease; } /*========================================================= ANIMAÇÃO DA LOGO =========================================================*/ .logo{ position:relative; overflow:hidden; } /*========================================================= BRILHO PASSANDO =========================================================*/ .logo::before{ content:""; position:absolute; top:-50%; left:-120%; width:80px; height:220%; background: linear-gradient( transparent, rgba(255,255,255,.55), transparent ); transform:rotate(20deg); } .logo:hover::before{ animation:logoLight 1.2s ease; } /*========================================================= TEXTO DA LOGO =========================================================*/ .logo-name{ transition:.45s; } .logo:hover .logo-name{ color:white; text-shadow: 0 0 15px var(--pink), 0 0 30px var(--pink), 0 0 60px var(--pink); } /*========================================================= LINKS =========================================================*/ .menu-desktop a{ overflow:hidden; } /*========================================================= GLOW HOVER =========================================================*/ .menu-desktop a::before{ content:""; position:absolute; inset:0; border-radius:20px; background: radial-gradient(circle, rgba(255,20,147,.22), transparent 70%); transform:scale(0); transition:.45s; z-index:-1; } .menu-desktop a:hover::before{ transform:scale(2.8); } /*========================================================= LINK ATIVO =========================================================*/ .menu-desktop a.active{ color:white; } .menu-desktop a.active::after{ width:100%; } .menu-desktop a.active{ text-shadow: 0 0 12px var(--pink); } /*========================================================= BOTÃO =========================================================*/ .btn-header{ overflow:hidden; } /*========================================================= FUNDO ANIMADO =========================================================*/ .btn-header::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,20,147,.25), rgba(138,43,226,.25), rgba(0,207,255,.18) ); opacity:0; transition:.4s; } .btn-header:hover::before{ opacity:1; } /*========================================================= BORDA BRILHANDO =========================================================*/ .btn-header::after{ content:""; position:absolute; inset:-2px; border-radius:15px; background: linear-gradient( 90deg, var(--pink), var(--purple), var(--blue), var(--pink) ); z-index:-2; filter:blur(10px); opacity:0; transition:.4s; } .btn-header:hover::after{ opacity:1; } /*========================================================= TEXTO BOTÃO =========================================================*/ .btn-header{ letter-spacing:.6px; } .btn-header:hover{ letter-spacing:1.6px; } /*========================================================= MENU MOBILE =========================================================*/ .menu-mobile-btn{ transition:.35s; } .menu-mobile-btn:hover{ border-color:var(--pink); box-shadow: 0 0 20px rgba(255,20,147,.35); } .menu-mobile-btn:hover span{ background:var(--pink); } /*========================================================= HEADER HOVER =========================================================*/ .header:hover::before{ border-color:rgba(255,20,147,.22); } /*========================================================= BRILHO GERAL =========================================================*/ .header:hover{ box-shadow: 0 15px 50px rgba(0,0,0,.55); } /*========================================================= GLOW SUPERIOR =========================================================*/ .header-glow{ animation:headerGlow 7s ease infinite; } /*========================================================= ANIMAÇÕES =========================================================*/ @keyframes logoLight{ from{ left:-120%; } to{ left:180%; } } @keyframes headerGlow{ 0%{ transform:translateX(-50%) scale(1); opacity:.12; } 50%{ transform:translateX(-50%) scale(1.25); opacity:.30; } 100%{ transform:translateX(-50%) scale(1); opacity:.12; } } @keyframes headerFade{ from{ opacity:0; transform: translateX(-50%) translateY(-30px); } to{ opacity:1; transform: translateX(-50%) translateY(0); } } /*====================================================================================== HEADER FUTURISTA PARTE 2.2.3 Responsividade • Scroll • Microinterações • Estado Mobile ======================================================================================*/ /*========================================================= HEADER AO SCROLL (classe adicionada pelo JavaScript) =========================================================*/ .header.scrolled{ height:72px; top:12px; border-radius:18px; transition:.45s; } .header.scrolled::before{ background:rgba(5,5,5,.88); backdrop-filter:blur(30px); } .header.scrolled .logo{ transform:scale(.95); } .header.scrolled .btn-header{ padding:13px 30px; } /*========================================================= LINKS MOBILE =========================================================*/ .mobile-menu a{ color:white; font-family:var(--title); font-size:22px; margin:18px 0; transition:.35s; position:relative; } .mobile-menu a:hover{ color:var(--pink); transform:translateX(12px); } .mobile-menu a::before{ content:""; position:absolute; left:-18px; top:50%; width:8px; height:8px; border-radius:50%; background:var(--pink); transform:translateY(-50%) scale(0); transition:.35s; } .mobile-menu a:hover::before{ transform:translateY(-50%) scale(1); } /*========================================================= OVERLAY =========================================================*/ .menu-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:.45s; z-index:999998; } .menu-overlay.active{ opacity:1; visibility:visible; } /*========================================================= BOTÃO MOBILE =========================================================*/ .menu-mobile-btn.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .menu-mobile-btn.active span:nth-child(2){ opacity:0; } .menu-mobile-btn.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /*========================================================= RESPONSIVIDADE =========================================================*/ @media(max-width:1100px){ .menu-desktop{ display:none; } .btn-header{ display:none; } .menu-mobile-btn{ display:block; } } @media(max-width:900px){ .header{ width:95%; height:75px; } .logo{ font-size:21px; } } @media(max-width:600px){ .header{ top:10px; border-radius:18px; padding:0 10px; } .logo{ font-size:18px; } } /*========================================================= EFEITO GLASS =========================================================*/ .header::before{ box-shadow: inset 0 1px rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.45); } /*========================================================= REFLEXO SUTIL =========================================================*/ .header::after{ animation:borderAnimation 10s linear infinite; } /*========================================================= ANIMAÇÕES =========================================================*/ @keyframes borderAnimation{ 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(360deg); } } @keyframes menuOpen{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:translateX(0); } } .mobile-menu.active a{ animation:menuOpen .5s ease forwards; } .mobile-menu.active a:nth-child(1){ animation-delay:.10s; } .mobile-menu.active a:nth-child(2){ animation-delay:.18s; } .mobile-menu.active a:nth-child(3){ animation-delay:.26s; } .mobile-menu.active a:nth-child(4){ animation-delay:.34s; } .mobile-menu.active a:nth-child(5){ animation-delay:.42s; } /*========================================================= PREPARAÇÃO PARA O JS =========================================================*/ body.menu-open{ overflow:hidden; } /*====================================================================================== ██████╗ ███████╗██████╗ ██████╗ ██╔══██╗██╔════╝██╔══██╗██╔═══██╗ ██████╔╝█████╗ ██████╔╝██║ ██║ ██╔══██╗██╔══╝ ██╔══██╗██║ ██║ ██║ ██║███████╗██║ ██║╚██████╔╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝ ╚═════╝ HERO PARTE 2.3.1 Estrutura principal ======================================================================================*/ /*==================================================== HERO ====================================================*/ .hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; padding-top:140px; padding-bottom:100px; } /*==================================================== CONTAINER ====================================================*/ .hero-container{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; position:relative; z-index:5; } /*==================================================== CONTEÚDO ====================================================*/ .hero-content{ display:flex; flex-direction:column; } /*==================================================== TAG SUPERIOR ====================================================*/ .hero-tag{ display:inline-flex; align-items:center; gap:12px; width:max-content; padding:10px 18px; margin-bottom:30px; border-radius:50px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(15px); } .hero-tag span{ width:10px; height:10px; border-radius:50%; background:#00ff84; box-shadow: 0 0 12px #00ff84, 0 0 25px #00ff84; } .hero-tag{ font-size:14px; color:#d7d7d7; font-family:var(--code); } /*==================================================== TÍTULO ====================================================*/ .hero h1{ font-size:72px; line-height:1.05; color:white; margin-bottom:20px; } .hero h1 span{ display:block; margin-top:10px; color:var(--pink); text-shadow: 0 0 25px rgba(255,20,147,.45); } /*==================================================== TEXTO DIGITANDO ====================================================*/ .hero h2{ display:flex; align-items:center; gap:3px; margin-bottom:35px; font-size:28px; color:#e8e8e8; min-height:45px; } .cursor{ color:var(--pink); font-weight:bold; animation:cursorBlink .7s infinite; } /*==================================================== PARÁGRAFO ====================================================*/ .hero p{ max-width:620px; font-size:18px; line-height:1.9; margin-bottom:45px; } /*==================================================== BOTÕES ====================================================*/ .hero-buttons{ display:flex; gap:20px; margin-bottom:60px; } /*==================================================== BOTÃO PRINCIPAL ====================================================*/ .btn-primary{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:18px 38px; border-radius:14px; background:linear-gradient( 135deg, var(--pink), var(--purple) ); color:white; font-weight:600; font-family:var(--title); transition:.35s; } .btn-primary:hover{ transform:translateY(-6px); box-shadow: 0 15px 40px rgba(255,20,147,.45); } /*==================================================== BOTÃO SECUNDÁRIO ====================================================*/ .btn-secondary{ display:flex; align-items:center; justify-content:center; padding:18px 38px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); color:white; transition:.35s; } .btn-secondary:hover{ background:rgba(255,20,147,.08); border-color:rgba(255,20,147,.45); transform:translateY(-6px); } /*==================================================== INFORMAÇÕES ====================================================*/ .hero-infos{ display:flex; gap:22px; flex-wrap:wrap; } /*==================================================== CARD ====================================================*/ .info-card{ min-width:170px; padding:24px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(20px); transition:.35s; } .info-card:hover{ transform:translateY(-10px); border-color:rgba(255,20,147,.35); box-shadow: 0 15px 35px rgba(255,20,147,.15); } .info-card h3{ font-size:28px; color:white; margin-bottom:10px; } .info-card span{ color:#b7b7b7; font-size:14px; } /*==================================================== SCROLL ====================================================*/ .scroll-indicator{ position:absolute; bottom:35px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px; } .scroll-indicator span{ font-size:13px; color:#bdbdbd; letter-spacing:3px; text-transform:uppercase; } .mouse{ width:32px; height:54px; border-radius:50px; border:2px solid rgba(255,255,255,.25); display:flex; justify-content:center; padding-top:8px; } .wheel{ width:5px; height:10px; border-radius:20px; background:var(--pink); animation:wheelMove 1.5s infinite; } /*==================================================== ANIMAÇÕES ====================================================*/ @keyframes cursorBlink{ 50%{ opacity:0; } } @keyframes wheelMove{ 0%{ transform:translateY(0); opacity:1; } 100%{ transform:translateY(18px); opacity:0; } } /*====================================================================================== ██████╗ ██╗ ██╗ ██████╗ ████████╗ ██████╗ ██╔══██╗██║ ██║██╔═══██╗╚══██╔══╝██╔═══██╗ ██████╔╝███████║██║ ██║ ██║ ██║ ██║ ██╔═══╝ ██╔══██║██║ ██║ ██║ ██║ ██║ ██║ ██║ ██║╚██████╔╝ ██║ ╚██████╔╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═════╝ HERO PARTE 2.3.2 FOTO • HEXÁGONO • GLOW • SCANNER ======================================================================================*/ /*================================================== COLUNA DA FOTO ==================================================*/ .hero-image{ position:relative; display:flex; justify-content:center; align-items:center; min-height:720px; } /*================================================== GLOW PRINCIPAL ==================================================*/ .image-glow{ position:absolute; width:620px; height:620px; border-radius:50%; background:radial-gradient(circle, rgba(255,20,147,.35), transparent 70% ); filter:blur(60px); animation:glowPulse 6s ease-in-out infinite; z-index:1; } /*================================================== GLOW SECUNDÁRIO ==================================================*/ .glow-two{ width:420px; height:420px; background:radial-gradient(circle, rgba(138,43,226,.30), transparent 70% ); animation-delay:2.5s; } /*================================================== HEXÁGONO ==================================================*/ .hexagon{ position:relative; width:420px; height:480px; display:flex; justify-content:center; align-items:center; overflow:hidden; clip-path:polygon( 25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50% ); z-index:10; } /*================================================== BORDA EXTERNA ==================================================*/ .hexagon::before{ content:""; position:absolute; inset:-3px; background:linear-gradient( 45deg, var(--pink), var(--purple), var(--blue), var(--pink) ); animation:borderRotate 8s linear infinite; } /*================================================== BORDA INTERNA ==================================================*/ .hexagon::after{ content:""; position:absolute; inset:3px; background:#070707; clip-path:inherit; z-index:1; } /*================================================== FOTO ==================================================*/ .hexagon img{ position:relative; width:100%; height:100%; object-fit:cover; z-index:2; transition:.8s; filter: contrast(1.05) saturate(1.08) brightness(1.03); } .hexagon:hover img{ transform:scale(1.06); } /*================================================== SCANNER ==================================================*/ .hexagon .scanner{ position:absolute; left:0; width:100%; height:90px; background: linear-gradient( transparent, rgba(255,20,147,.20), rgba(255,255,255,.45), rgba(255,20,147,.20), transparent ); filter:blur(10px); animation:scannerMove 4s linear infinite; z-index:5; } /*================================================== REFLEXO ==================================================*/ .hexagon .reflection{ position:absolute; width:120%; height:120%; background: linear-gradient( 120deg, transparent 35%, rgba(255,255,255,.12), transparent 70% ); transform:translateX(-120%) rotate(18deg); animation:reflectionMove 6s infinite; z-index:6; } /*================================================== AURA EXTERNA ==================================================*/ .hexagon-shadow{ position:absolute; width:480px; height:540px; border-radius:50%; filter:blur(90px); background: radial-gradient(circle, rgba(255,20,147,.22), transparent 70%); z-index:0; } /*================================================== CÍRCULO 01 ==================================================*/ .circle-light{ position:absolute; width:18px; height:18px; border-radius:50%; background:var(--pink); box-shadow: 0 0 20px var(--pink), 0 0 45px var(--pink); animation:floatCircle 7s infinite ease-in-out; } .circle-light:nth-child(1){ top:40px; left:50px; } .circle-light:nth-child(2){ right:60px; bottom:90px; animation-delay:2s; } .circle-light:nth-child(3){ top:140px; right:-10px; animation-delay:3.5s; } .circle-light:nth-child(4){ bottom:50px; left:-20px; animation-delay:5s; } /*================================================== ANIMAÇÕES ==================================================*/ @keyframes glowPulse{ 0%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.18); opacity:.55; } 100%{ transform:scale(1); opacity:.35; } } @keyframes scannerMove{ from{ top:-120px; } to{ top:580px; } } @keyframes reflectionMove{ 0%{ transform:translateX(-150%) rotate(20deg); } 100%{ transform:translateX(180%) rotate(20deg); } } @keyframes borderRotate{ 0%{ filter:hue-rotate(0deg); } 100%{ filter:hue-rotate(360deg); } } @keyframes floatCircle{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-30px); } 100%{ transform:translateY(0); } } /*====================================================================================== HERO PARTE 2.3.3 FOTO • EFEITO 3D • CARDS FLUTUANTES • ORBITAS • PARTÍCULAS ======================================================================================*/ /*========================================================== FOTO EM 3D ==========================================================*/ .hero-image{ perspective:1800px; } .hexagon{ transform-style:preserve-3d; transition: transform .6s ease, box-shadow .6s ease; } .hero-image:hover .hexagon{ transform: rotateX(8deg) rotateY(-8deg) translateY(-10px) scale(1.02); } .hero-image:hover .hexagon img{ transform:scale(1.08); } /*========================================================== BRILHO ATRÁS ==========================================================*/ .hero-image::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background: radial-gradient( circle, rgba(255,20,147,.25), transparent 70% ); filter:blur(120px); animation:heroLight 8s infinite ease-in-out; } .hero-image::after{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; background: radial-gradient( circle, rgba(0,207,255,.15), transparent 70% ); filter:blur(90px); animation:heroLight2 10s infinite ease-in-out; } /*========================================================== CARDS ==========================================================*/ .floating-card{ position:absolute; display:flex; align-items:center; justify-content:center; padding:15px 22px; border-radius:16px; backdrop-filter:blur(25px); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:white; font-weight:600; font-family:var(--code); letter-spacing:1px; transition:.45s; overflow:hidden; z-index:30; } .floating-card::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,20,147,.18), rgba(138,43,226,.12) ); opacity:0; transition:.4s; } .floating-card:hover::before{ opacity:1; } .floating-card:hover{ transform: translateY(-10px) scale(1.06); border-color: rgba(255,20,147,.4); } .floating-card span{ position:relative; z-index:2; } /*========================================================== POSIÇÕES ==========================================================*/ .html{ top:60px; left:-10px; animation:floatOne 6s infinite ease-in-out; } .css{ top:150px; right:-30px; animation:floatTwo 7s infinite ease-in-out; } .js{ bottom:120px; left:-40px; animation:floatThree 5.5s infinite ease-in-out; } .react{ bottom:40px; right:10px; animation:floatFour 8s infinite ease-in-out; } /*========================================================== ORBITA ==========================================================*/ .hero-image .orbit{ position:absolute; width:620px; height:620px; border-radius:50%; border: 1px solid rgba(255,255,255,.05); animation:orbitRotate 18s linear infinite; } .hero-image .orbit::before{ content:""; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--pink); box-shadow: 0 0 18px var(--pink), 0 0 40px var(--pink); } .hero-image .orbit-two{ width:760px; height:760px; animation-direction:reverse; animation-duration:26s; } .hero-image .orbit-two::before{ background:var(--blue); box-shadow: 0 0 18px var(--blue), 0 0 35px var(--blue); } /*========================================================== PARTÍCULAS ==========================================================*/ .hero-particle{ position:absolute; width:5px; height:5px; border-radius:50%; background:white; opacity:.7; animation:particleFloat 8s linear infinite; } .hero-particle:nth-child(1){ left:12%; top:30%; } .hero-particle:nth-child(2){ left:75%; top:18%; } .hero-particle:nth-child(3){ left:85%; top:72%; } .hero-particle:nth-child(4){ left:18%; top:78%; } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes heroLight{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.18); } } @keyframes heroLight2{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-30px); } } @keyframes orbitRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes floatOne{ 50%{ transform:translateY(-18px); } } @keyframes floatTwo{ 50%{ transform:translateY(22px); } } @keyframes floatThree{ 50%{ transform:translateY(-15px); } } @keyframes floatFour{ 50%{ transform:translateY(20px); } } @keyframes particleFloat{ 0%{ transform: translateY(0) scale(1); opacity:0; } 20%{ opacity:1; } 100%{ transform: translateY(-220px) scale(.2); opacity:0; } } /*====================================================================================== HERO PARTE 2.3.4 EFEITOS PREMIUM • LUZ DINÂMICA • BOTÕES • TÍTULO • CARDS ======================================================================================*/ /*========================================================== HERO CONTENT ==========================================================*/ .hero-content{ position:relative; z-index:50; } /*========================================================== TÍTULO ==========================================================*/ .hero h1{ position:relative; overflow:hidden; } .hero h1 span{ position:relative; } .hero h1 span::after{ content:""; position:absolute; left:-15%; top:50%; width:130%; height:2px; background: linear-gradient( 90deg, transparent, rgba(255,20,147,.9), transparent ); opacity:.18; } /*========================================================== TEXTO ==========================================================*/ .hero p{ position:relative; } .hero p::before{ content:""; position:absolute; left:-25px; top:8px; width:4px; height:80%; border-radius:10px; background: linear-gradient( var(--pink), transparent ); } /*========================================================== BOTÕES ==========================================================*/ .hero-buttons{ position:relative; } /*========================================================== BOTÃO PRINCIPAL ==========================================================*/ .btn-primary{ isolation:isolate; } .btn-primary::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; background: linear-gradient( 90deg, var(--pink), var(--purple), var(--blue), var(--pink) ); background-size:300%; z-index:-2; animation:borderFlow 6s linear infinite; } .btn-primary::after{ content:""; position:absolute; inset:2px; background:#111; border-radius:inherit; z-index:-1; } .btn-primary:hover{ box-shadow: 0 0 25px rgba(255,20,147,.55), 0 0 80px rgba(255,20,147,.18); } /*========================================================== BRILHO ==========================================================*/ .btn-primary span{ position:absolute; width:50px; height:180%; background: rgba(255,255,255,.45); transform:rotate(25deg); left:-120px; } .btn-primary:hover span{ left:150%; transition:1s; } /*========================================================== BOTÃO SECUNDÁRIO ==========================================================*/ .btn-secondary{ overflow:hidden; } .btn-secondary::before{ content:""; position:absolute; inset:0; background: radial-gradient( circle at center, rgba(255,20,147,.22), transparent 70% ); transform:scale(0); transition:.45s; } .btn-secondary:hover::before{ transform:scale(2.2); } .btn-secondary:hover{ box-shadow: 0 0 20px rgba(255,20,147,.25); } /*========================================================== HERO TAG ==========================================================*/ .hero-tag{ overflow:hidden; } .hero-tag::before{ content:""; position:absolute; width:80px; height:180%; background: rgba(255,255,255,.25); transform:rotate(20deg); left:-120px; } .hero-tag:hover::before{ left:160%; transition:1s; } /*========================================================== INFO CARDS ==========================================================*/ .info-card{ position:relative; overflow:hidden; } .info-card::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,20,147,.08), transparent ); opacity:0; transition:.4s; } .info-card:hover::before{ opacity:1; } .info-card::after{ content:""; position:absolute; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, rgba(255,20,147,.20), transparent); top:-90px; right:-90px; } /*========================================================== NÚMEROS ==========================================================*/ .info-card h3{ transition:.35s; } .info-card:hover h3{ color:var(--pink); text-shadow: 0 0 12px var(--pink); } /*========================================================== HOVER FOTO ==========================================================*/ .hero-image:hover .image-glow{ filter:blur(120px); } .hero-image:hover .circle-light{ transform:scale(1.4); } .hero-image:hover .orbit{ animation-duration:10s; } .hero-image:hover .orbit-two{ animation-duration:14s; } /*========================================================== BACKGROUND HERO ==========================================================*/ .hero::before{ content:""; position:absolute; left:-15%; bottom:-300px; width:700px; height:700px; border-radius:50%; background: radial-gradient(circle, rgba(255,20,147,.12), transparent 70% ); filter:blur(120px); } .hero::after{ content:""; position:absolute; right:-15%; top:-250px; width:650px; height:650px; border-radius:50%; background: radial-gradient(circle, rgba(138,43,226,.10), transparent 70% ); filter:blur(120px); } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes borderFlow{ 0%{ background-position:0%; } 100%{ background-position:300%; } } /*====================================================================================== HERO PARTE 2.3.5 EFEITOS CINEMATOGRÁFICOS • LINHAS • GRID • BACKGROUND ======================================================================================*/ /*========================================================== HERO ==========================================================*/ .hero{ isolation:isolate; } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes lineDown{ from{ transform:translateY(-300px); } to{ transform:translateY(120vh); } } @keyframes lightFloat{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } } @keyframes lightFloat2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-70px,-50px); } } @keyframes lightPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.25); } } @keyframes ringRotate{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } } @keyframes ringRotateReverse{ from{ transform:translate(-50%,-50%) rotate(360deg); } to{ transform:translate(-50%,-50%) rotate(0deg); } } /*====================================================================================== HERO PARTE 2.3.6 EFEITO PREMIUM DOS BOTÕES • TYPING • GLASS • PARALLAX ======================================================================================*/ /*========================================================== HERO CONTENT ==========================================================*/ .hero-content{ animation:heroContent 1.2s ease; } /*========================================================== TÍTULO ==========================================================*/ .hero h1{ animation:titleReveal 1s ease; } .hero h1 span{ background: linear-gradient( 90deg, #ffffff, #ffd3eb, var(--pink), #ffffff ); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:gradientText 8s linear infinite; } /*========================================================== TYPING ==========================================================*/ .hero h2{ font-family:var(--code); color:#f2f2f2; letter-spacing:1px; } .cursor{ text-shadow: 0 0 10px var(--pink), 0 0 25px var(--pink); } /*========================================================== BOTÕES ==========================================================*/ .hero-buttons{ display:flex; flex-wrap:wrap; } .btn-primary, .btn-secondary{ position:relative; overflow:hidden; } /*========================================================== SHINE ==========================================================*/ .btn-primary .shine, .btn-secondary .shine{ position:absolute; top:-50%; left:-120%; width:70px; height:220%; background: rgba(255,255,255,.35); transform:rotate(25deg); } .btn-primary:hover .shine, .btn-secondary:hover .shine{ left:170%; transition:1.2s; } /*========================================================== SOMBRA ==========================================================*/ .btn-primary:hover{ transform: translateY(-8px) scale(1.03); } .btn-secondary:hover{ transform: translateY(-8px); } /*========================================================== HERO TAG ==========================================================*/ .hero-tag{ position:relative; } .hero-tag::after{ content:""; position:absolute; inset:0; border-radius:50px; border:1px solid rgba(255,20,147,.25); animation:tagPulse 3s infinite; } /*========================================================== CARDS ==========================================================*/ .info-card{ cursor:pointer; } .info-card:hover{ background: rgba(255,255,255,.06); } .info-card h3{ transition:.35s; } .info-card:hover h3{ transform:translateY(-3px); } /*========================================================== HERO IMAGE ==========================================================*/ .hero-image{ transition: transform .5s ease; } .hero-image:hover{ transform:translateY(-10px); } /*========================================================== HEXÁGONO ==========================================================*/ .hexagon{ box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 40px rgba(255,20,147,.15); } .hexagon:hover{ box-shadow: 0 40px 100px rgba(0,0,0,.55), 0 0 60px rgba(255,20,147,.35); } /*========================================================== LINHAS ==========================================================*/ .hero-line{ opacity:.22; } .hero:hover .hero-line{ opacity:.55; } /*========================================================== GRID ==========================================================*/ .hero-grid{ opacity:.5; transition:.5s; } .hero:hover .hero-grid{ opacity:.8; } /*========================================================== ORBITAS ==========================================================*/ .tech-ring{ transition:.5s; } .hero:hover .tech-ring{ border-color: rgba(255,20,147,.12); } /*========================================================== FOTO ==========================================================*/ .hexagon img{ transition: transform .8s, filter .8s; } .hero:hover img{ filter: brightness(1.05) contrast(1.08) saturate(1.1); } /*========================================================== SCROLL ==========================================================*/ .scroll-indicator{ animation: scrollFloat 3s ease-in-out infinite; } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes heroContent{ from{ opacity:0; transform: translateY(60px); } to{ opacity:1; transform: translateY(0); } } @keyframes titleReveal{ from{ opacity:0; transform: translateY(40px); } to{ opacity:1; transform: translateY(0); } } @keyframes gradientText{ from{ background-position:0%; } to{ background-position:300%; } } @keyframes tagPulse{ 0%{ transform:scale(1); opacity:.4; } 50%{ transform:scale(1.06); opacity:0; } 100%{ transform:scale(1); opacity:.4; } } @keyframes scrollFloat{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(-12px); } } /*====================================================================================== SOBRE PARTE 3.1 ✔ Estrutura ✔ Grid ✔ Layout ✔ Responsividade Base ======================================================================================*/ /*========================================================== SECTION ==========================================================*/ .about{ position:relative; padding:140px 0; overflow:hidden; } /*========================================================== CONTAINER ==========================================================*/ .about-container{ display:grid; grid-template-columns:480px 1fr; align-items:center; gap:90px; } /*========================================================== FOTO ==========================================================*/ .about-image{ display:flex; justify-content:center; align-items:center; } /*========================================================== PLACEHOLDER FOTO ==========================================================*/ .about-photo{ width:500px; aspect-ratio:1; } .about-photo img { width: 70%; height: 100%; object-fit: cover; /* Mantém a proporção correta */ transition: transform 0.4s ease; /* Define a velocidade e suavidade do efeito */ border-radius: 30px; } /*========================================================== CONTEÚDO ==========================================================*/ .about-content{ display:flex; flex-direction:column; gap:28px; } /*========================================================== TAG ==========================================================*/ .section-tag{ width:max-content; } /*========================================================== TÍTULO ==========================================================*/ .about-content h2{ max-width:700px; font-size:clamp(2.3rem,4vw,3.4rem); line-height:1.15; } /*========================================================== PARÁGRAFOS ==========================================================*/ .about-content p{ max-width:700px; } /*========================================================== BOTÕES ==========================================================*/ .about-buttons{ display:flex; flex-wrap:wrap; gap:20px; margin-top:10px; } /*========================================================== CARDS ==========================================================*/ .about-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:25px; margin-top:90px; } /*========================================================== CARD ==========================================================*/ .about-card{ padding:35px; } /*========================================================== TÍTULO CARD ==========================================================*/ .about-card h3{ margin-bottom:18px; font-size:1.35rem; } /*========================================================== RESPONSIVO ==========================================================*/ @media(max-width:1100px){ .about-container{ grid-template-columns:1fr; text-align:center; gap:70px; } .about-image{ order:-1; } .about-content{ align-items:center; } .section-tag{ margin:auto; } .about-buttons{ justify-content:center; } .about-cards{ grid-template-columns:repeat(2,1fr); } } @media(max-width:700px){ .about{ padding:100px 0; } .about-photo{ width:320px; margin: 0 auto; align-items: center; display: flex; justify-content: center; /* Centraliza no meio horizontal */ align-items: center; /* Centraliza no meio vertical (se houver altura definida) */ } .about-cards{ grid-template-columns:1fr; } } /*====================================================================================== SOBRE PARTE 3 EFEITOS VISUAIS ======================================================================================*/ /*========================================================== FUNDO DA SEÇÃO ==========================================================*/ .sobre{ position:relative; overflow:hidden; } /*========================================================== GLOW ESQUERDO ==========================================================*/ .sobre::before{ content:""; position:absolute; width:550px; height:550px; left:-220px; top:120px; border-radius:50%; background: radial-gradient( circle, rgba(255,20,147,.12), transparent 70% ); filter:blur(120px); pointer-events:none; } /*========================================================== GLOW DIREITO ==========================================================*/ .sobre::after{ content:""; position:absolute; width:500px; height:500px; right:-180px; bottom:-80px; border-radius:50%; background: radial-gradient( circle, rgba(0,207,255,.08), transparent 70% ); filter:blur(120px); pointer-events:none; } /*========================================================== FOTO GLASS ==========================================================*/ .sobre-photo{ position:relative; overflow:hidden; } .sobre-photo::before{ content:""; position:absolute; inset:0; border-radius:32px; background: linear-gradient( 135deg, rgba(255,255,255,.05), rgba(255,255,255,.01) ); pointer-events:none; } .sobre-photo::after{ content:""; position:absolute; inset:-1px; border-radius:32px; padding:1px; background: linear-gradient( 140deg, rgba(255,20,147,.35), transparent, rgba(0,207,255,.20) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } /*========================================================== HOVER FOTO ==========================================================*/ .sobre-photo{ transition: transform .45s ease, box-shadow .45s ease; } .sobre-photo:hover{ transform: translateY(-10px); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 45px rgba(255,20,147,.18); } /*========================================================== BRILHO DA FOTO ==========================================================*/ .photo-placeholder{ position:relative; } .photo-placeholder::before{ content:""; position:absolute; width:240px; height:240px; border-radius:50%; background: radial-gradient( circle, rgba(255,20,147,.15), transparent ); filter:blur(70px); animation:photoGlow 7s ease-in-out infinite; } /*========================================================== TÍTULO ==========================================================*/ .sobre-title span{ background: linear-gradient( 90deg, #ffffff, #ffd2ea, var(--pink), #ffffff ); background-size:300%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:titleGradient 8s linear infinite; } /*========================================================== CARDS ==========================================================*/ .skill-card{ position:relative; overflow:hidden; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; } .skill-card::before{ content:""; position:absolute; inset:0; background: linear-gradient( 135deg, rgba(255,20,147,.12), transparent ); opacity:0; transition:.4s; } .skill-card:hover::before{ opacity:1; } .skill-card:hover{ transform: translateY(-8px); border-color: rgba(255,20,147,.30); box-shadow: 0 15px 45px rgba(0,0,0,.35), 0 0 25px rgba(255,20,147,.10); } .skill-card strong{ transition:.35s; } .skill-card:hover strong{ color:var(--pink); } .card-icon{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-bottom:22px; font-size:28px; border-radius:18px; background:rgba(255,20,147,.08); border:1px solid rgba(255,20,147,.18); box-shadow: 0 0 25px rgba(255,20,147,.08); transition:.45s ease; } .about-card:hover .card-icon{ transform: rotate(-6deg) scale(1.08); background:rgba(255,20,147,.18); border-color:rgba(255,20,147,.45); box-shadow: 0 0 18px rgba(255,20,147,.35), 0 0 50px rgba(255,20,147,.20); } .about-card:hover{ transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 35px rgba(255,20,147,.18); } .about-card{ position:relative; overflow:hidden; } .about-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient( 135deg, rgba(255,20,147,.4), transparent, rgba(138,43,226,.35) ); opacity:0; transition:.45s; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .about-card:hover::before{ opacity:1; } .about-card::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:3px; transform:translateX(-50%); background: linear-gradient( 90deg, transparent, var(--pink), transparent ); transition:.45s; } .about-card:hover::after{ width:80%; } .about-card:hover{ background: linear-gradient( 180deg, rgba(255,20,147,.09), rgba(255,255,255,.04) ); } /*========================================================== LISTA ==========================================================*/ .sobre-list li{ transition:.35s; } .sobre-list li:hover{ color:white; transform:translateX(8px); } /*========================================================== BOTÃO ==========================================================*/ .sobre-buttons .btn-primary{ transition: transform .35s, box-shadow .35s; } .sobre-buttons .btn-primary:hover{ transform: translateY(-6px); } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes titleGradient{ from{ background-position:0%; } to{ background-position:300%; } } @keyframes photoGlow{ 0%{ transform:scale(1); opacity:.35; } 50%{ transform:scale(1.15); opacity:.55; } 100%{ transform:scale(1); opacity:.35; } } /*====================================================================================== SKILLS PARTE 4.1 ✔ Estrutura ✔ Layout ✔ Grid ✔ Responsividade ======================================================================================*/ /*========================================================== SECTION ==========================================================*/ .skills{ padding:140px 0; position:relative; } /*========================================================== TÍTULO ==========================================================*/ .section-title{ max-width:750px; margin:0 auto 80px; text-align:center; } .section-tag{ display:inline-flex; align-items:center; justify-content:center; padding:10px 22px; border-radius:50px; font-size:14px; font-weight:600; } .section-title h2{ margin:25px 0; font-size:52px; line-height:1.2; } .section-title p{ font-size:18px; max-width:650px; margin:auto; } /*========================================================== FUNDO DA SEÇÃO ==========================================================*/ .skills{ position:relative; overflow:hidden; } .skills::before{ content:""; position:absolute; width:650px; height:650px; left:-220px; top:-150px; border-radius:50%; background: radial-gradient(circle, rgba(255,20,147,.10), transparent 70%); filter:blur(130px); pointer-events:none; } .skills::after{ content:""; position:absolute; width:500px; height:500px; right:-180px; bottom:-180px; border-radius:50%; background: radial-gradient(circle, rgba(0,207,255,.08), transparent 70%); filter:blur(120px); pointer-events:none; } /*========================================================== SKILLS CAROUSEL ==========================================================*/ .skills-carousel{ --theme:#ff1493; --theme2:#ff69c7; position: relative; margin-top: 80px; } /* HTML */ .skills-carousel.html{ --theme:#ff6b00; --theme2:#ffb347; } /* CSS */ .skills-carousel.css{ --theme:#2196f3; --theme2:#64b5ff; } /* JavaScript */ .skills-carousel.javascript{ --theme:#ffd600; --theme2:#fff176; } /* React */ .skills-carousel.react{ --theme:#00d8ff; --theme2:#84ffff; } /* PHP */ .skills-carousel.php{ --theme:#777BB4; --theme2:#9FA8DA; } /* Node */ .skills-carousel.node{ --theme:#47c94a; --theme2:#8be28d; } /* Python */ .skills-carousel.python{ --theme:#3776AB; --theme2:#FFD43B; } /* SQL */ .skills-carousel.sql{ --theme:#007ACC; --theme2:#55b7ff; } /* Next */ .skills-carousel.next{ --theme:#ffffff; --theme2:#999999; } /* API */ .skills-carousel.api{ --theme:#ff1493; --theme2:#9c27ff; } /*========================================================== CARD PRINCIPAL ==========================================================*/ .skills-slider{ position: relative; overflow: hidden; max-width: 900px; margin: auto; padding: 55px; border-radius: 32px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(22px); text-align: center; transition: .45s; } .skills-slider:hover{ transform: translateY(-10px) perspective(1200px) rotateX(3deg); } /*========================================================== GLOW ==========================================================*/ .skills-glow{ position:absolute; width:380px; height:380px; border-radius:50%; background: radial-gradient( circle, var(--theme), transparent 70% ); filter:blur(90px); opacity:.22; transition:.6s; } /*========================================================== ÍCONE ==========================================================*/ .slider-icon{ display:flex; justify-content:center; align-items:center; margin-bottom:25px; } .slider-icon img{ width:95px; height:95px; transition:.5s; } /*========================================================== TÍTULO ==========================================================*/ #skill-title{ font-size:2rem; font-weight:700; margin-bottom:18px; color:#fff; } /*========================================================== BADGE ==========================================================*/ .skill-badge{ display:inline-flex; align-items:center; justify-content:center; padding:10px 24px; border-radius:40px; font-size:.85rem; font-weight:700; letter-spacing:.5px; margin-bottom:35px; } .skill-badge.advanced{ color:#00ffb3; border:1px solid rgba(0,255,179,.25); background:rgba(0,255,179,.10); } .skill-badge.intermediate{ color:#ffd54f; border:1px solid rgba(255,213,79,.25); background:rgba(255,213,79,.10); } .skill-badge.learning{ color:#9f8cff; border:1px solid rgba(159,140,255,.25); background:rgba(159,140,255,.10); } /*========================================================== BARRA ==========================================================*/ .slider-progress{ width:100%; height:16px; border-radius:30px; overflow:hidden; margin:25px 0 18px; background:rgba(255,255,255,.06); } .slider-fill{ height:100%; width:0%; border-radius:40px; transition:width 1s ease; background: linear-gradient( 90deg, var(--theme), var(--theme2) ); box-shadow: 0 0 25px var(--theme); } /*========================================================== PERCENTUAL ==========================================================*/ .slider-percent{ font-size:2rem; font-weight:700; margin-bottom:35px; } /*========================================================== TAGS ==========================================================*/ .slider-tags{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:45px; } .slider-tags span{ padding:12px 20px; border-radius:40px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:.9rem; transition:.35s; } .slider-tags span:hover{ background:var(--theme); color:#fff; box-shadow: 0 0 18px var(--theme); } /*========================================================== NAVEGAÇÃO ==========================================================*/ .slider-navigation{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; } /*========================================================== SETAS ==========================================================*/ .slider-arrow{ width:55px; height:55px; border:none; cursor:pointer; border-radius:50%; font-size:1.4rem; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:.35s; } .slider-arrow:hover{ background:var(--theme); box-shadow: 0 0 20px var(--theme); } /*========================================================== DOTS ==========================================================*/ .slider-dots{ display:flex; gap:12px; } .dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.25); transition:.35s; } .dot.active{ background:var(--theme); box-shadow: 0 0 18px var(--theme); } /*========================================================== RESPONSIVO ==========================================================*/ @media(max-width:768px){ .skills-slider{ padding:35px 25px; } #skill-title{ font-size:1.6rem; } .slider-icon img{ width:75px; height:75px; } .slider-navigation{ gap:18px; } .slider-tags{ gap:10px; } } /*========================================================== CORES DAS TECNOLOGIAS ==========================================================*/ .skill-carousel{ --theme:#ff1493; --theme2:#ff69c7; } .skill-carousel.html{ --theme:#ff6b00; --theme2:#ffb347; } .skill-carousel.css{ --theme:#2196f3; --theme2:#64b5ff; } .skill-carousel.javascript{ --theme:#ffd600; --theme2:#fff176; } .skill-carousel.react{ --theme:#00d8ff; --theme2:#84ffff; } .skill-carousel.php{ --theme:#777BB4; --theme2:#9FA8DA; } .skill-carousel.node{ --theme:#3cb043; --theme2:#8bc34a; } .skill-carousel.python{ --theme:#3776AB; --theme2:#FFD43B; } .skill-carousel.sql{ --theme:#007ACC; --theme2:#55b7ff; } .skill-carousel.next{ --theme:#ffffff; --theme2:#999999; } .skill-carousel.api{ --theme:#ff1493; --theme2:#9c27ff; } /*========================================================== CARD GLASS ==========================================================*/ .skill-carousel{ position:relative; overflow:hidden; background: linear-gradient( 135deg, rgba(255,255,255,.08), rgba(255,255,255,.03) ); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,.08); box-shadow: 0 25px 60px rgba(0,0,0,.45), 0 0 45px color-mix(in srgb, var(--theme) 35%, transparent); } .skill-carousel::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; top:-180px; right:-150px; background: radial-gradient( circle, color-mix(in srgb,var(--theme) 45%,transparent), transparent 70% ); filter:blur(70px); } .skill-carousel::after{ content:""; position:absolute; inset:0; background: linear-gradient( 120deg, transparent 15%, rgba(255,255,255,.05) 50%, transparent 85% ); pointer-events:none; } /*========================================================== ÍCONE ==========================================================*/ .tech-icon{ width:120px; height:120px; margin:auto; display:flex; align-items:center; justify-content:center; border-radius:50%; background: radial-gradient( circle, rgba(255,255,255,.08), transparent ); box-shadow: inset 0 0 25px rgba(255,255,255,.05), 0 0 40px color-mix(in srgb,var(--theme) 50%,transparent); } .tech-icon img{ width:82px; transition:.6s; } .skill-carousel:hover .tech-icon img{ transform: rotate(10deg) scale(1.08); } /*========================================================== BARRA ==========================================================*/ .tech-progress{ position:relative; width:100%; height:16px; border-radius:50px; overflow:hidden; background:rgba(255,255,255,.06); } .tech-progress-fill{ position:relative; height:100%; border-radius:50px; background: linear-gradient( 90deg, var(--theme), var(--theme2) ); box-shadow: 0 0 18px var(--theme), 0 0 40px color-mix(in srgb,var(--theme) 60%,transparent); } .tech-progress-fill::after{ content:""; position:absolute; top:-8px; left:-90px; width:90px; height:30px; background: rgba(255,255,255,.55); transform:rotate(22deg); animation:shineProgress 2.8s linear infinite; } /*========================================================== CHIPS ==========================================================*/ .tech-tags{ display:flex; flex-wrap:wrap; gap:12px; } .tech-tags span{ padding:10px 18px; border-radius:40px; font-size:.9rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); transition:.35s; } .tech-tags span:hover{ background:var(--theme); color:#fff; transform: translateY(-5px); box-shadow: 0 0 20px var(--theme); } /*========================================================== SETAS ==========================================================*/ .carousel-btn{ width:56px; height:56px; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.05); color:#fff; transition:.35s; } .carousel-btn:hover{ background:var(--theme); transform:scale(1.12); box-shadow: 0 0 25px var(--theme); } /*========================================================== DOTS ==========================================================*/ .carousel-dots{ display:flex; justify-content:center; gap:12px; } .carousel-dot{ width:12px; height:12px; border-radius:50%; background:rgba(255,255,255,.25); transition:.35s; } .carousel-dot.active{ width:36px; border-radius:30px; background:var(--theme); box-shadow: 0 0 18px var(--theme); } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes shineProgress{ from{ left:-100px; } to{ left:120%; } } /*========================================================== PROJECTS ==========================================================*/ .projects{ padding:140px 0; position:relative; } .projects .container{ max-width:1250px; } .projects-title{ text-align:center; margin-bottom:70px; } .projects-title h2{ font-size:3rem; margin:20px 0; } .projects-title p{ color:#bdbdbd; max-width:700px; margin:auto; line-height:1.8; } /*========================================================== SLIDER ==========================================================*/ .projects-slider{ position:relative; overflow:hidden; } .project-card{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:center; padding:40px; border-radius:30px; background:rgba(255,255,255,.03); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.35); transition:.45s; } .project-card:hover{ transform: translateY(-10px) perspective(1200px) rotateX(2deg); box-shadow: 0 35px 80px rgba(255,20,147,.18); } /*========================================================== IMAGE ==========================================================*/ .project-image{ height:650px; overflow:hidden; border-radius:24px; position:relative; background:#0f0f0f; border:1px solid rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 20px 40px rgba(0,0,0,.45); } .project-image::before{ content:""; position:absolute; inset:-2px; border-radius:24px; background: linear-gradient( 135deg, #ff1493, transparent, #7b2cff ); opacity:0; transition:.45s; pointer-events:none; } .project-image:hover::before{ opacity:.45; } .project-image::after{ content:""; position:absolute; top:0; left:-120%; width:45%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.18), transparent ); transition:1.2s; } .project-image:hover::after{ left:180%; } .project-image img{ width:100%; display:block; filter: brightness(.98) contrast(1.03) saturate(1.05); transition: transform 12s linear, filter .5s; } .project-image:hover img{ transform:translateY(calc(-100% + 650px)); filter: brightness(1.03) contrast(1.08) saturate(1.12); } .project-image:hover img{ transform:translateY(calc(-100% + 650px)); } .project-info{ display:flex; flex-direction:column; gap:28px; } .project-category{ color:#ff1493; font-weight:700; letter-spacing:2px; text-transform:uppercase; } .project-title{ font-size:2.6rem; } .project-description{ color:#c8c8c8; line-height:1.8; } .project-tech{ display:flex; flex-wrap:wrap; gap:12px; } .project-tech span{ padding:10px 18px; border-radius:50px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px); transition:.35s; cursor:default; } .project-tech span:hover{ background:#ff1493; border-color:#ff1493; color:#fff; transform:translateY(-3px); box-shadow: 0 0 18px rgba(255,20,147,.45); } .project-buttons{ display:flex; gap:18px; margin-top:15px; } .project-buttons a{ transition:.35s; } .project-buttons a:hover{ transform: translateY(-4px) scale(1.03); } .project-navigation{ display:flex; justify-content:center; align-items:center; gap:30px; margin-top:50px; } .project-arrow{ width:58px; height:58px; border:none; border-radius:50%; cursor:pointer; color:white; font-size:22px; background:rgba(255,255,255,.06); transition:.35s; } .project-arrow:hover{ background:#ff1493; transform:scale(1.1); box-shadow: 0 0 25px rgba(255,20,147,.45); } .project-dot{ transition:.35s; } .project-dot:hover{ background:#ff1493; transform:scale(1.4); } .project-dots{ display:flex; gap:12px; } .project-dot{ width:12px; height:12px; border-radius:50%; background:#444; cursor:pointer; transition:.35s; } .project-dot.active{ width:34px; border-radius:20px; background:#ff1493; } @media(max-width:1000px){ .project-card{ grid-template-columns:1fr; } .project-image{ height:500px; } .project-image:hover img{ transform:translateY(calc(-100% + 500px)); } .project-title{ font-size:2rem; } } /*========================================================== CONTACT ==========================================================*/ .contact{ padding:140px 0; position:relative; } .contact .container{ max-width:1250px; } /*========================================================== WRAPPER ==========================================================*/ .contact-wrapper{ margin-top:70px; display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; } /*========================================================== INFO ==========================================================*/ .contact-info{ padding:40px; border-radius:28px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); } .contact-info h3{ font-size:2rem; margin-bottom:20px; } .contact-info p{ color:#c8c8c8; line-height:1.8; margin-bottom:40px; } /*========================================================== ITEM ==========================================================*/ .contact-item{ display:flex; align-items:center; gap:20px; margin-bottom:28px; padding:18px 20px; border-radius:18px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); } .contact-item i{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#ff1493; border-radius:50%; background:rgba(255,20,147,.12); } .contact-item span{ display:block; color:#999; font-size:.9rem; margin-bottom:4px; } .contact-item strong{ color:#fff; font-size:1rem; font-weight:600; } /*========================================================== FORM ==========================================================*/ .contact-form{ padding:40px; border-radius:28px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(18px); } .input-group{ display:flex; flex-direction:column; margin-bottom:25px; } .input-group label{ margin-bottom:10px; color:#fff; font-weight:600; } .input-group input, .input-group textarea{ width:100%; padding:18px 20px; border-radius:16px; outline:none; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:#fff; font-size:1rem; transition:.35s; } .input-group textarea{ resize:none; min-height:180px; } .input-group input::placeholder, .input-group textarea::placeholder{ color:#777; } .input-group input:focus, .input-group textarea:focus{ border-color:#ff1493; background:rgba(255,255,255,.05); } .contact-form .btn-primary{ width:100%; height:60px; display:flex; justify-content:center; align-items:center; gap:12px; font-size:1rem; cursor:pointer; border:none; } .contact-form .btn-primary i{ font-size:24px; } /*========================================================== RESPONSIVIDADE ==========================================================*/ /*========================== NOTEBOOK ==========================*/ @media (max-width:1200px){ .container{ width:92%; } .hero-container, .about-container, .contact-wrapper{ gap:50px; } .hero h1{ font-size:3.6rem; } .hero-image{ width:420px; } .project-card{ gap:40px; } } /*========================== TABLET ==========================*/ @media (max-width:992px){ .section-title h2, .projects-title h2{ font-size:2.3rem; } .hero-container, .about-container, .project-card, .contact-wrapper{ display:flex; flex-direction:column; text-align:center; } .hero-content, .about-content, .project-info{ max-width:100%; } .hero-buttons, .about-buttons, .project-buttons{ justify-content:center; flex-wrap:wrap; } .hero-infos{ justify-content:center; flex-wrap:wrap; } .hero-image{ width:360px; margin:auto; } .about-photo{ margin:auto; } .about-cards{ grid-template-columns:repeat(2,1fr); } .footer-content{ grid-template-columns:repeat(2,1fr); gap:40px; } .skills-slider{ padding:40px 30px; } } /*========================== CELULAR ==========================*/ @media (max-width:768px){ section{ padding:90px 0; } .container{ width:92%; } .hero{ min-height:auto; padding-top:120px; } .hero h1{ font-size:2.6rem; line-height:1.2; } .hero h2{ font-size:1.4rem; } .hero p{ font-size:1rem; } .hero-buttons{ flex-direction:column; width:100%; } .hero-buttons a{ width:100%; text-align:center; } .hero-image{ width:290px; } .floating-card{ display:none; } .info-card{ width:100%; } .about-cards{ grid-template-columns:1fr; } .skills-slider{ padding:30px 20px; } .slider-tags{ justify-content:center; } .project-card{ padding:25px; } .project-image img{ width:100%; border-radius:20px; } .project-buttons{ flex-direction:column; } .project-buttons a{ width:100%; } .contact-wrapper{ gap:30px; } .contact-form{ width:100%; } .footer-content{ grid-template-columns:1fr; text-align:center; } .footer-column a{ justify-content:center; } .footer-bottom{ flex-direction:column; gap:15px; } .back-top{ margin-top:10px; } } /*========================== CELULAR PEQUENO ==========================*/ @media (max-width:480px){ .hero h1{ font-size:2.1rem; } .hero h2{ font-size:1.15rem; } .section-title h2, .projects-title h2{ font-size:1.8rem; } .hero-image{ width:240px; } .about-photo{ width:240px; height:240px; } .slider-navigation{ gap:10px; } .slider-arrow, .project-arrow{ width:42px; height:42px; } .contact-item{ flex-direction:column; text-align:center; } .footer-logo{ justify-content:center; } } /*========================================================== CONTACT PREMIUM ==========================================================*/ /* Glow de fundo */ .contact{ overflow:hidden; } .contact::before{ content:""; position:absolute; width:520px; height:520px; left:-220px; top:120px; border-radius:50%; background:#ff1493; opacity:.08; filter:blur(130px); } .contact::after{ content:""; position:absolute; width:420px; height:420px; right:-160px; bottom:40px; border-radius:50%; background:#8a2be2; opacity:.07; filter:blur(140px); } /*========================================================== CARDS ==========================================================*/ .contact-info, .contact-form{ position:relative; overflow:hidden; transition:.45s; } .contact-info::before, .contact-form::before{ content:""; position:absolute; inset:0; background: linear-gradient( 130deg, rgba(255,255,255,.08), transparent, rgba(255,255,255,.02) ); pointer-events:none; } .contact-info:hover, .contact-form:hover{ transform: translateY(-10px) perspective(1200px) rotateX(3deg); border-color:rgba(255,20,147,.25); box-shadow: 0 0 40px rgba(255,20,147,.18); } /*========================================================== REFLEXO ==========================================================*/ .contact-info::after, .contact-form::after{ content:""; position:absolute; top:-100%; left:-40%; width:60%; height:300%; transform:rotate(28deg); background: linear-gradient( transparent, rgba(255,255,255,.08), transparent ); transition:1s; } .contact-info:hover::after, .contact-form:hover::after{ left:140%; } /*========================================================== ITENS ==========================================================*/ .contact-item{ transition:.35s; } .contact-item:hover{ transform:translateX(12px); border-color:rgba(255,20,147,.25); background:rgba(255,255,255,.05); } .contact-item i{ transition:.45s; box-shadow: 0 0 20px rgba(255,20,147,.25); } .contact-item:hover i{ transform:rotate(12deg) scale(1.15); box-shadow: 0 0 35px #ff1493; } /*========================================================== INPUTS ==========================================================*/ .input-group{ position:relative; } .input-group input, .input-group textarea{ transition:.35s; } .input-group input:focus, .input-group textarea:focus{ transform:translateY(-2px); box-shadow: 0 0 22px rgba(255,20,147,.25); } /* Linha inferior */ .input-group::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; border-radius:10px; background: linear-gradient( 90deg, #ff1493, #9c27ff ); transition:.45s; } .input-group:focus-within::after{ width:100%; } /*========================================================== BOTÃO ==========================================================*/ .contact-form .btn-primary{ position:relative; overflow:hidden; transition:.35s; } .contact-form .btn-primary::before{ content:""; position:absolute; top:0; left:-120%; width:80%; height:100%; transform:skewX(-25deg); background: linear-gradient( transparent, rgba(255,255,255,.35), transparent ); } .contact-form .btn-primary:hover{ transform: translateY(-5px) scale(1.02); box-shadow: 0 0 35px rgba(255,20,147,.45); } .contact-form .btn-primary:hover::before{ animation:buttonLight .9s forwards; } /*========================================================== ANIMAÇÕES ==========================================================*/ @keyframes buttonLight{ to{ left:150%; } } @keyframes pulseIcon{ 0%{ transform:scale(1); } 50%{ transform:scale(1.08); } 100%{ transform:scale(1); } } .contact-item i{ animation:pulseIcon 3s infinite; } /*========================================================== FOOTER ==========================================================*/ .footer{ position:relative; padding:90px 0 35px; overflow:hidden; border-top:1px solid rgba(255,255,255,.08); } /* Glow */ .footer::before{ content:""; position:absolute; top:-180px; left:-120px; width:420px; height:420px; border-radius:50%; background:#ff1493; filter:blur(150px); opacity:.08; } .footer::after{ content:""; position:absolute; right:-180px; bottom:-180px; width:380px; height:380px; border-radius:50%; background:#8b5cf6; filter:blur(150px); opacity:.08; } /*========================================================== CONTENT ==========================================================*/ .footer-content{ position:relative; z-index:2; display:grid; grid-template-columns:2fr 1fr 1.2fr 1.2fr; gap:60px; margin-bottom:70px; } /*========================================================== LOGO ==========================================================*/ .footer-logo{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-size:2rem; font-weight:700; color:#fff; } .footer-brand p{ margin-top:22px; max-width:330px; color:#a8a8a8; line-height:1.9; } /*========================================================== COLUNAS ==========================================================*/ .footer-column{ display:flex; flex-direction:column; } .footer-column h3{ margin-bottom:24px; font-size:1.2rem; color:#fff; } /*========================================================== LINKS ==========================================================*/ .footer-column a{ display:flex; align-items:center; gap:12px; margin-bottom:16px; color:#bdbdbd; text-decoration:none; transition:.35s; } .footer-column a:hover{ color:#fff; transform:translateX(8px); } /*========================================================== ÍCONES ==========================================================*/ .footer-column i{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; transition:.35s; } /* LinkedIn */ .la-linkedin{ color:#0A66C2; background:rgba(10,102,194,.12); } .footer-column a:hover .la-linkedin{ box-shadow:0 0 25px rgba(10,102,194,.45); } /* GitHub */ .la-github{ color:#fff; background:rgba(255,255,255,.08); } .footer-column a:hover .la-github{ box-shadow:0 0 25px rgba(255,255,255,.35); } /* Instagram */ .la-instagram{ color:#ff4fa8; background:rgba(255,79,168,.12); } .footer-column a:hover .la-instagram{ box-shadow:0 0 25px rgba(255,79,168,.45); } /*========================================================== FOOTER BOTTOM ==========================================================*/ .footer-bottom{ position:relative; z-index:2; padding-top:30px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; align-items:center; gap:20px; } .footer-bottom p{ color:#8d8d8d; } .back-top{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; transition:.35s; } .back-top:hover{ color:#ff1493; transform:translateY(-4px); } /*========================================================== RESPONSIVO ==========================================================*/ @media(max-width:1050px){ .footer-content{ grid-template-columns:1fr 1fr; gap:50px; } } @media(max-width:700px){ .footer-content{ grid-template-columns:1fr; text-align:center; } .footer-column{ align-items:center; } .footer-brand{ text-align:center; } .footer-brand p{ margin:auto; margin-top:20px; } .footer-bottom{ flex-direction:column; } } /*========================================================== SOCIAL PREMIUM ==========================================================*/ .footer-column a{ position:relative; overflow:hidden; } .footer-column a i{ transition:.45s; } .footer-column a:hover i{ transform: rotate(360deg) scale(1.15); } .footer-column a::before{ content:""; position:absolute; left:-120%; top:0; width:80px; height:100%; transform:skewX(-25deg); background: linear-gradient( transparent, rgba(255,255,255,.15), transparent ); transition:.7s; } .footer-column a:hover::before{ left:130%; } /* GitHub */ .footer-column a:hover .la-github{ background:rgba(255,255,255,.10); box-shadow: 0 0 28px rgba(255,255,255,.45); } /* LinkedIn */ .footer-column a:hover .la-linkedin{ background:rgba(10,102,194,.18); box-shadow: 0 0 30px rgba(10,102,194,.45); } /* Instagram */ .footer-column a:hover .la-instagram{ background:rgba(255,20,147,.15); box-shadow: 0 0 30px rgba(255,20,147,.45); } /*========================================================== FOOTER COPYRIGHT ==========================================================*/ .footer-bottom span{ color:#ff1493; font-weight:700; } .footer-heart{ color:#ff1493; display:inline-block; animation:heartBeat 1.8s infinite; } @keyframes heartBeat{ 0%{ transform:scale(1); } 25%{ transform:scale(1.2); } 50%{ transform:scale(1); } 75%{ transform:scale(1.15); } 100%{ transform:scale(1); } } .footer{ border-top:1px solid rgba(255,255,255,.08); } .footer::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:220px; height:2px; background: linear-gradient( 90deg, transparent, #ff1493, #8b5cf6, transparent ); box-shadow: 0 0 20px #ff1493, 0 0 35px #8b5cf6; } /*========================================================== MENU MOBILE ==========================================================*/ .menu-mobile{ position:fixed; top:95px; right:18px; width:220px; background:rgba(18,18,28,.82); backdrop-filter:blur(35px); -webkit-backdrop-filter:blur(35px); border:1px solid rgba(255,20,147,.18); border-radius:22px; padding:18px; box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 35px rgba(255,20,147,.18), inset 0 1px rgba(255,255,255,.05); opacity:0; visibility:hidden; transform: translateY(-20px) scale(.95); transition: .35s cubic-bezier(.22,1,.36,1); z-index:999; } .menu-mobile.active{ opacity:1; visibility:visible; transform: translateY(0) scale(1); } .menu-mobile a{ display:flex; align-items:center; gap:16px; padding:18px 20px; color:#fff; text-decoration:none; border-radius:14px; transition:.35s; font-weight:500; } .menu-icon{ width:20px; height:20px; fill:#ff4db8; flex-shrink:0; transition:.35s; filter: drop-shadow(0 0 8px rgba(255,20,147,.45)); } .menu-mobile a:hover{ background:rgba(255,20,147,.08); color:#ff4db8; padding-left:28px; } .menu-mobile a:hover .menu-icon{ transform: rotate(-10deg) scale(1.18); fill:#ff7ac8; } .menu-mobile a:hover::before{ transform: scale(1.15) rotate(-8deg); } .menu-mobile a:not(:last-child)::after{ content:""; position:absolute; left:20px; right:20px; bottom:0; height:1px; background:rgba(255,255,255,.05); } .menu-mobile::before{ content:""; position:absolute; top:0; left:25px; right:25px; height:1px; background:linear-gradient( 90deg, transparent, #ff1493, transparent ); } .menu-mobile a.active{ background:linear-gradient( 90deg, rgba(255,20,147,.18), transparent ); color:#ff4db8; } .menu-mobile a.active .menu-icon{ fill:#ff4db8; } .menu-mobile a.active::before{ transform:scale(1.15); } .menu-mobile a::before{ filter:drop-shadow(0 0 6px rgba(255,20,147,.25)); } .menu-mobile-btn{ display:none; } .menu-home::before, .menu-about::before, .menu-skills::before, .menu-projects::before, .menu-contact::before{ width:26px; display:flex; justify-content:center; align-items:center; font-size:18px; transition:.3s; } .menu-home::before{ content:"🏠"; } .menu-about::before{ content:"👩"; } .menu-skills::before{ content:"💻"; } .menu-projects::before{ content:"📂"; } .menu-contact::before{ content:"✉️"; } /*========================================================== RESPONSIVO ==========================================================*/ @media(max-width:900px){ .menu-desktop{ display:none; } .btn-header{ display:none; } .menu-mobile-btn{ display:flex; flex-direction:column; gap:6px; cursor:pointer; background:none; border:none; } .menu-mobile-btn span{ width:28px; height:3px; background:#fff; border-radius:20px; transition:.35s; } /* animação X */ .menu-mobile-btn.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); } .menu-mobile-btn.active span:nth-child(2){ opacity:0; } .menu-mobile-btn.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } } /*========================================================== RESPONSIVIDADE - NOTEBOOK ==========================================================*/ @media (max-width:1200px){ .container{ width:92%; } /* HERO */ .hero{ padding-top:170px; } .hero-container{ gap:70px; } .hero-content h1{ font-size:3.8rem; } .hero-content p{ font-size:1rem; } .hero-image{ width:450px; height:450px; } /* SOBRE */ .about-container{ gap:60px; } .about h2{ font-size:2.7rem; } /* SKILLS */ .skills-slider{ max-width:800px; } /* PROJETOS */ .project-card{ gap:40px; } .project-image{ height:560px; } .project-image:hover img{ transform:translateY(calc(-100% + 560px)); } .project-title{ font-size:2.2rem; } /* CONTATO */ .contact-wrapper{ gap:50px; } /* FOOTER */ .footer-content{ gap:50px; } } /*========================================================== HERO RESPONSIVO ==========================================================*/ @media (max-width:992px){ .hero{ padding:170px 0 100px; } .hero-container{ display:flex; flex-direction:column-reverse; gap:60px; text-align:center; } .hero-content{ width:100%; } .hero-content h1{ font-size:3.3rem; line-height:1.15; } .hero-content h2{ font-size:1.5rem; } .hero-content p{ max-width:650px; margin:25px auto; } .hero-buttons{ justify-content:center; flex-wrap:wrap; } .hero-infos{ justify-content:center; flex-wrap:wrap; gap:18px; } .hero-image{ width:100%; display:flex; justify-content:center; } .hexagon{ width:320px; height:360px; } .floating-card{ transform:scale(.9); } .scroll-indicator{ display:none; } } @media (max-width:576px){ .hero{ padding:140px 0 80px; } .hero-content h1{ font-size:2.5rem; } .hero-content h2{ font-size:1.2rem; } .hero-content p{ font-size:.95rem; line-height:1.8; } .hero-buttons{ flex-direction:column; align-items:center; } .hero-buttons a{ width:100%; max-width:320px; } .hero-infos{ flex-direction:column; } .info-card{ width:100%; } .hexagon{ width:260px; height:300px; } .floating-card{ display:none; } } /*========================================================== RESPONSIVIDADE - SEÇÕES ==========================================================*/ @media (max-width:992px){ /*====================== TÍTULOS =======================*/ .section-title h2, .projects-title h2, .about-content h2{ font-size:2.5rem; } .section-title p, .projects-title p{ width:100%; max-width:650px; margin:auto; } /*====================== SOBRE =======================*/ .about{ padding:100px 0; } .about-container{ display:flex; flex-direction:column; gap:60px; } .about-image{ display:flex; justify-content:center; } .about-photo{ width:320px; height:320px; margin: 0 auto; align-items: center; } .about-content{ text-align:center; } .about-buttons{ justify-content:center; flex-wrap:wrap; } .about-cards{ grid-template-columns:repeat(2,1fr); gap:25px; } /*====================== SKILLS =======================*/ .skills{ padding:100px 0; } .skills-slider{ width:100%; } .slider-tags{ justify-content:center; } /*====================== PROJETOS =======================*/ .projects{ padding:100px 0; } .project-card{ display:flex; flex-direction:column; gap:40px; } .project-image{ width:100%; height:500px; } .project-image:hover img{ transform:translateY(calc(-100% + 500px)); } .project-info{ text-align:center; } .project-tech{ justify-content:center; } .project-buttons{ justify-content:center; flex-wrap:wrap; } /*====================== CONTATO =======================*/ .contact{ padding:100px 0; } .contact-wrapper{ display:flex; flex-direction:column; } .contact-info{ text-align:center; } .contact-item{ justify-content:center; } /*====================== FOOTER =======================*/ .footer-content{ grid-template-columns:repeat(2,1fr); gap:40px; } .footer-bottom{ flex-direction:column; gap:20px; text-align:center; } } /*========================================================== CELULAR ==========================================================*/ @media (max-width:576px){ /*====================== TÍTULOS =======================*/ .section-title h2, .projects-title h2, .about-content h2{ font-size:2rem; } .section-title p, .projects-title p{ font-size:.95rem; } /*====================== SOBRE =======================*/ .about-photo{ width:260px; height:260px; } .about-cards{ grid-template-columns:1fr; } .about-buttons{ flex-direction:column; align-items:center; } .about-buttons a{ width:100%; max-width:320px; } /*====================== SKILLS =======================*/ .slider-navigation{ gap:15px; } .slider-arrow{ width:45px; height:45px; } .slider-tags{ gap:10px; } .slider-tags span{ font-size:.8rem; } /*====================== PROJETOS =======================*/ .project-image{ height:350px; } .project-image:hover img{ transform:translateY(calc(-100% + 350px)); } .project-title{ font-size:1.8rem; } .project-buttons{ flex-direction:column; } .project-buttons a{ width:100%; } /*====================== CONTATO =======================*/ .contact-form{ padding:25px; } .contact-item{ flex-direction:column; text-align:center; } /*====================== FOOTER =======================*/ .footer-content{ grid-template-columns:1fr; text-align:center; } .footer-column a{ justify-content:center; } .back-top{ width:100%; } }