/* ============================================================ STYLE.CSS — Estilos Principais Portfolio Bruno Magalhães ============================================================ ÍNDICE: 1. Variáveis CSS (Design Tokens) 2. Reset & Base 3. Scrollbar Customizada 4. Utilitários 5. Tela de Carregamento 6. Navbar / Cabeçalho 7. Menu Mobile 8. Seções Genéricas 9. Hero Section 10. Sobre Mim 11. Tecnologias 12. Projetos 13. Jornada / Timeline 14. Contato 15. Footer / Rodapé 16. Botão Topo ============================================================ */ /* ============================================================ 1. VARIÁVEIS CSS — Design Tokens ============================================================ */ :root { /* --- Cores principais --- */ --cor-fundo: #050d1a; --cor-fundo-secundario:#071428; --cor-fundo-card: #0a1929; --cor-fundo-card-hover:#0d2040; --cor-borda: rgba(0, 180, 255, 0.12); --cor-borda-hover: rgba(0, 180, 255, 0.35); /* --- Azuis neon e gradientes --- */ --cor-azul-neon: #00d4ff; --cor-azul-royal: #1a6fff; --cor-azul-escuro: #0d47a1; --cor-acento: #00d4ff; --cor-acento-2: #1a6fff; /* --- Gradientes --- */ --grad-primario: linear-gradient(135deg, #1a6fff 0%, #00d4ff 100%); --grad-texto: linear-gradient(135deg, #1a6fff, #00d4ff); --grad-card: linear-gradient(145deg, #0a1929 0%, #071428 100%); --grad-hero: radial-gradient(ellipse at 50% 60%, #0d2040 0%, #050d1a 70%); --grad-secao-alt: linear-gradient(180deg, #050d1a 0%, #071428 50%, #050d1a 100%); /* --- Textos --- */ --cor-texto: #e8f0fe; --cor-texto-suave: #8eafd4; --cor-texto-fraco: #4a6785; --cor-titulo: #ffffff; /* --- Tipografia --- */ --fonte-display: 'Oxanium', sans-serif; --fonte-corpo: 'Plus Jakarta Sans', sans-serif; /* --- Espaçamentos --- */ --espacamento-secao: 7rem 0; --espacamento-container: 0 clamp(1.5rem, 5vw, 3rem); --raio-card: 16px; --raio-botao: 10px; /* --- Sombras --- */ --sombra-card: 0 4px 30px rgba(0, 0, 0, 0.4); --sombra-neon: 0 0 30px rgba(0, 212, 255, 0.2); --sombra-botao: 0 4px 20px rgba(26, 111, 255, 0.4); /* --- Transições --- */ --transicao-rapida: all 0.2s ease; --transicao-media: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transicao-lenta: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* --- Z-indexes --- */ --z-fundo: -1; --z-base: 1; --z-card: 10; --z-menu: 100; --z-header: 200; --z-loading: 9999; } /* ============================================================ TEMA CLARO — Reescrita completa com contraste correto Ativado quando ============================================================ */ /* ── 1. Variáveis de cor ── */ html[data-tema="claro"] { --cor-fundo: #f2f5fc; --cor-fundo-secundario: #e8edf8; --cor-fundo-card: #ffffff; --cor-fundo-card-hover: #eef2ff; --cor-borda: rgba(26, 111, 255, 0.2); --cor-borda-hover: rgba(26, 111, 255, 0.5); --grad-card: linear-gradient(145deg, #ffffff 0%, #f4f7ff 100%); --grad-hero: radial-gradient(ellipse at 50% 60%, #cfe0ff 0%, #f2f5fc 70%); --grad-secao-alt: linear-gradient(180deg, #f2f5fc 0%, #e8edf8 50%, #f2f5fc 100%); --cor-texto: #0d1b2a; --cor-texto-suave: #2d4a6e; --cor-texto-fraco: #5a7a9e; --cor-titulo: #060f1c; --sombra-card: 0 4px 24px rgba(13, 27, 42, 0.1); --sombra-neon: 0 0 24px rgba(26, 111, 255, 0.18); --sombra-botao: 0 4px 18px rgba(26, 111, 255, 0.32); } /* ── 2. Body e fundo geral ── */ html[data-tema="claro"] body { background-color: var(--cor-fundo); background-image: linear-gradient(rgba(26, 111, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 111, 255, 0.05) 1px, transparent 1px); } /* ── 3. Hero ── */ html[data-tema="claro"] .secao-hero::before { background: radial-gradient(ellipse at 50% 60%, #bdd5ff 0%, #f2f5fc 70%); } html[data-tema="claro"] .hero-grade { background-image: linear-gradient(rgba(26, 111, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 111, 255, 0.07) 1px, transparent 1px); } html[data-tema="claro"] .hero-glow-1 { background: radial-gradient(circle, rgba(26, 111, 255, 0.12), transparent 70%); } html[data-tema="claro"] .hero-glow-2 { background: radial-gradient(circle, rgba(0, 120, 200, 0.1), transparent 70%); } html[data-tema="claro"] .hero-badge { background: rgba(26, 111, 255, 0.1); border-color: rgba(26, 111, 255, 0.28); } html[data-tema="claro"] .chip-flutuante { background: #ffffff; border-color: rgba(26, 111, 255, 0.22); color: var(--cor-texto); box-shadow: 0 4px 16px rgba(13, 27, 42, 0.12); } html[data-tema="claro"] .avatar-placeholder { background: linear-gradient(145deg, #e8f0ff, #f4f7ff); border-color: rgba(26, 111, 255, 0.3); box-shadow: 0 0 30px rgba(26, 111, 255, 0.12); } html[data-tema="claro"] .avatar-anel { border-color: rgba(26, 111, 255, 0.22); } html[data-tema="claro"] .hero-scroll-indicador { border-color: rgba(26, 111, 255, 0.22); color: var(--cor-texto-suave); } html[data-tema="claro"] .stat-divisor { background: rgba(26, 111, 255, 0.2); } /* ── 4. Navbar ── */ html[data-tema="claro"] .cabecalho.rolado { background: rgba(242, 245, 252, 0.94); border-bottom-color: rgba(26, 111, 255, 0.15); } html[data-tema="claro"] .nav-link { color: var(--cor-texto-suave); } html[data-tema="claro"] .nav-link:hover, html[data-tema="claro"] .nav-link.ativo { color: var(--cor-azul-royal); } html[data-tema="claro"] .botao-curriculo-nav { color: var(--cor-azul-royal); border-color: rgba(26, 111, 255, 0.35); } html[data-tema="claro"] .botao-curriculo-nav:hover { background: var(--grad-primario); color: #fff; } html[data-tema="claro"] .botao-menu-mobile { background: #ffffff; border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .hamburger-linha { background: var(--cor-texto); } /* ── 5. Menu mobile ── */ html[data-tema="claro"] .menu-mobile { background: #f8faff; border-left-color: rgba(26, 111, 255, 0.15); } html[data-tema="claro"] .menu-mobile-link { color: var(--cor-texto-suave); } html[data-tema="claro"] .menu-mobile-link:hover { background: rgba(26, 111, 255, 0.07); color: var(--cor-texto); border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .menu-mobile-overlay { background: rgba(13, 27, 42, 0.55); } /* ── 6. Tela de carregamento ── */ html[data-tema="claro"] .tela-carregamento { background: var(--cor-fundo); } /* ── 7. Badges e etiquetas de seção ── */ html[data-tema="claro"] .secao-etiqueta { background: rgba(26, 111, 255, 0.1); border-color: rgba(26, 111, 255, 0.28); color: var(--cor-azul-royal); } /* ── 8. Botões ── */ html[data-tema="claro"] .botao-secundario { background: rgba(26, 111, 255, 0.08); border-color: rgba(26, 111, 255, 0.35); color: var(--cor-azul-royal); } html[data-tema="claro"] .botao-secundario:hover { background: rgba(26, 111, 255, 0.15); border-color: var(--cor-azul-royal); } html[data-tema="claro"] .botao-terciario { color: var(--cor-texto-suave); border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .botao-terciario:hover { color: var(--cor-azul-royal); background: rgba(26, 111, 255, 0.06); border-color: rgba(26, 111, 255, 0.4); } /* ── 9. Seção Sobre ── */ html[data-tema="claro"] .secao-sobre { background: var(--grad-secao-alt); } html[data-tema="claro"] .sobre-avatar { background: linear-gradient(145deg, #e8f0ff, #f4f7ff); border-color: rgba(26, 111, 255, 0.25); } html[data-tema="claro"] .sobre-info-card { background: #ffffff; border-color: rgba(26, 111, 255, 0.18); box-shadow: 0 2px 12px rgba(13, 27, 42, 0.07); } html[data-tema="claro"] .sobre-info-card:hover { background: #f4f7ff; border-color: rgba(26, 111, 255, 0.35); } html[data-tema="claro"] .tag { background: rgba(26, 111, 255, 0.08); border-color: rgba(26, 111, 255, 0.22); color: var(--cor-texto-suave); } html[data-tema="claro"] .tag:hover { background: rgba(26, 111, 255, 0.14); border-color: rgba(26, 111, 255, 0.4); color: var(--cor-azul-royal); } html[data-tema="claro"] .decoracao-canto-tl, html[data-tema="claro"] .decoracao-canto-br { border-color: rgba(26, 111, 255, 0.4); } /* ── 10. Cards de Tecnologia ── */ html[data-tema="claro"] .card-tecnologia { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); box-shadow: 0 2px 16px rgba(13, 27, 42, 0.07); } html[data-tema="claro"] .card-tecnologia:hover { border-color: rgba(26, 111, 255, 0.38); box-shadow: 0 8px 32px rgba(13, 27, 42, 0.12); } html[data-tema="claro"] .nivel-barra { background: rgba(26, 111, 255, 0.1); } html[data-tema="claro"] .card-aprendendo { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); } html[data-tema="claro"] .card-aprendendo:hover { border-color: rgba(26, 111, 255, 0.35); } html[data-tema="claro"] .aprendendo-progresso { background: rgba(26, 111, 255, 0.1); } html[data-tema="claro"] .grupo-linha { background: rgba(26, 111, 255, 0.15); } html[data-tema="claro"] .grupo-label { color: var(--cor-texto-fraco); } /* ── 11. Seção Projetos ── */ html[data-tema="claro"] .secao-projetos { background: var(--grad-secao-alt); } html[data-tema="claro"] .filtro-btn { background: #ffffff; color: var(--cor-texto-suave); border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .filtro-btn:hover, html[data-tema="claro"] .filtro-btn.filtro-ativo { background: var(--grad-primario); color: #fff; border-color: transparent; } html[data-tema="claro"] .card-projeto-destaque { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); box-shadow: 0 2px 20px rgba(13, 27, 42, 0.08); } html[data-tema="claro"] .card-projeto-destaque:hover { border-color: rgba(26, 111, 255, 0.35); box-shadow: 0 8px 36px rgba(13, 27, 42, 0.14); } html[data-tema="claro"] .projeto-placeholder-img { background: linear-gradient(135deg, #e8f0ff, #f4f7ff); color: var(--cor-texto-suave); } html[data-tema="claro"] .botao-github { color: var(--cor-texto-suave); border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .botao-github:hover { background: rgba(26, 111, 255, 0.06); border-color: rgba(26, 111, 255, 0.35); color: var(--cor-texto); } html[data-tema="claro"] .card-projeto { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); box-shadow: 0 2px 14px rgba(13, 27, 42, 0.07); } html[data-tema="claro"] .card-projeto:hover { border-color: rgba(26, 111, 255, 0.35); box-shadow: 0 8px 28px rgba(13, 27, 42, 0.12); } html[data-tema="claro"] .card-proj-icone { background: rgba(26, 111, 255, 0.08); border-color: rgba(26, 111, 255, 0.2); } html[data-tema="claro"] .card-proj-links a { border-color: rgba(26, 111, 255, 0.18); color: var(--cor-texto-suave); } html[data-tema="claro"] .card-proj-links a:hover { border-color: var(--cor-azul-royal); color: var(--cor-azul-royal); background: rgba(26, 111, 255, 0.07); } html[data-tema="claro"] .projetos-grupo-titulo { color: var(--cor-texto-suave); } /* ── 12. Timeline ── */ html[data-tema="claro"] .timeline-linha { background: linear-gradient(to bottom, transparent, rgba(26, 111, 255, 0.2) 10%, rgba(26, 111, 255, 0.2) 90%, transparent); } html[data-tema="claro"] .timeline-card { background: #ffffff; border-color: rgba(26, 111, 255, 0.18); box-shadow: 0 2px 16px rgba(13, 27, 42, 0.08); } html[data-tema="claro"] .timeline-card:hover { border-color: rgba(26, 111, 255, 0.38); box-shadow: 0 8px 28px rgba(13, 27, 42, 0.12); } html[data-tema="claro"] .timeline-card-atual { background: linear-gradient(145deg, #eef3ff, #f4f8ff); border-color: rgba(26, 111, 255, 0.35); } html[data-tema="claro"] .timeline-marcador { background: #ffffff; border-color: rgba(26, 111, 255, 0.3); box-shadow: 0 2px 12px rgba(13, 27, 42, 0.1); } html[data-tema="claro"] .timeline-item.visivel .timeline-marcador { border-color: var(--cor-azul-royal); box-shadow: 0 0 18px rgba(26, 111, 255, 0.22); } html[data-tema="claro"] .timeline-tags span { background: rgba(26, 111, 255, 0.08); border-color: rgba(26, 111, 255, 0.22); color: var(--cor-azul-royal); } /* ── 13. Seção Contato ── */ html[data-tema="claro"] .secao-contato { background: var(--grad-secao-alt); } html[data-tema="claro"] .contato-link-item { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); box-shadow: 0 2px 12px rgba(13, 27, 42, 0.06); } html[data-tema="claro"] .contato-link-item:hover { background: #f4f7ff; border-color: rgba(26, 111, 255, 0.35); } html[data-tema="claro"] .contato-seta { color: var(--cor-texto-fraco); } html[data-tema="claro"] .formulario-card { background: #ffffff; border-color: rgba(26, 111, 255, 0.16); box-shadow: 0 4px 24px rgba(13, 27, 42, 0.08); } html[data-tema="claro"] .campo-input { background: #f6f9ff; border-color: rgba(26, 111, 255, 0.2); color: var(--cor-texto); } html[data-tema="claro"] .campo-input:focus { background: #fff; border-color: rgba(26, 111, 255, 0.5); box-shadow: 0 0 0 3px rgba(26, 111, 255, 0.09); } html[data-tema="claro"] .campo-input::placeholder { color: var(--cor-texto-fraco); } /* ── 14. Footer ── */ html[data-tema="claro"] .rodape { background: #e4eaf5; border-top-color: rgba(26, 111, 255, 0.15); } html[data-tema="claro"] .rodape-nav ul a { color: var(--cor-texto-suave); } html[data-tema="claro"] .rodape-nav ul a:hover { color: var(--cor-azul-royal); } html[data-tema="claro"] .rodape-rede-link { border-color: rgba(26, 111, 255, 0.18); color: var(--cor-texto-suave); } html[data-tema="claro"] .rodape-rede-link:hover { border-color: var(--cor-azul-royal); color: var(--cor-azul-royal); background: rgba(26, 111, 255, 0.06); } /* ── 15. Scrollbar ── */ html[data-tema="claro"] ::-webkit-scrollbar-track { background: #e8edf8; } html[data-tema="claro"] ::selection { background: rgba(26, 111, 255, 0.18); color: #060f1c; } /* ── 16. Botão topo ── */ html[data-tema="claro"] .botao-topo { box-shadow: 0 4px 18px rgba(26, 111, 255, 0.3); } /* ── 17. Transição suave global ao trocar de tema ── */ html.transicao-tema *, html.transicao-tema *::before, html.transicao-tema *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; } /* ============================================================ 2. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background-color: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-corpo); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ============================================================ 3. SCROLLBAR CUSTOMIZADA ============================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--cor-fundo); } ::-webkit-scrollbar-thumb { background: var(--grad-primario); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--cor-azul-neon); } /* Seleção de texto customizada */ ::selection { background: rgba(0, 212, 255, 0.3); color: #fff; } /* ============================================================ 4. UTILITÁRIOS ============================================================ */ /* Container principal */ .container { max-width: 1200px; margin: 0 auto; padding: var(--espacamento-container); width: 100%; } /* Cabeçalho padrão de seção */ .secao { padding: var(--espacamento-secao); position: relative; } .secao-cabecalho { text-align: center; margin-bottom: 4rem; } .secao-etiqueta { display: inline-block; font-family: var(--fonte-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cor-azul-neon); background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); padding: 0.35rem 1rem; border-radius: 100px; margin-bottom: 1rem; } .secao-titulo { font-family: var(--fonte-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--cor-titulo); line-height: 1.15; margin-bottom: 0.75rem; } .destaque-texto { background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .secao-subtitulo { font-size: 1.05rem; color: var(--cor-texto-suave); max-width: 550px; margin: 0 auto; } /* Botão primário */ .botao-primario { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 2rem; background: var(--grad-primario); color: #fff; font-family: var(--fonte-corpo); font-size: 0.95rem; font-weight: 600; border-radius: var(--raio-botao); position: relative; overflow: hidden; box-shadow: var(--sombra-botao); transition: var(--transicao-media); white-space: nowrap; } .botao-primario:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26, 111, 255, 0.5); } .botao-primario:active { transform: translateY(0); } /* Efeito de brilho no botão ao hover */ .botao-brilho { position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s ease; pointer-events: none; } .botao-primario:hover .botao-brilho { left: 150%; } /* Botão secundário */ .botao-secundario { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 2rem; background: rgba(0, 212, 255, 0.08); color: var(--cor-azul-neon); font-family: var(--fonte-corpo); font-size: 0.95rem; font-weight: 600; border-radius: var(--raio-botao); border: 1px solid rgba(0, 212, 255, 0.3); transition: var(--transicao-media); white-space: nowrap; } .botao-secundario:hover { background: rgba(0, 212, 255, 0.15); border-color: var(--cor-azul-neon); transform: translateY(-2px); box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); } /* Botão terciário (outline sutil) */ .botao-terciario { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.5rem; color: var(--cor-texto-suave); font-family: var(--fonte-corpo); font-size: 0.95rem; font-weight: 500; border-radius: var(--raio-botao); border: 1px solid var(--cor-borda); transition: var(--transicao-media); white-space: nowrap; } .botao-terciario:hover { color: var(--cor-azul-neon); border-color: var(--cor-borda-hover); background: rgba(0, 212, 255, 0.05); } /* Tags de tecnologias (usadas em projetos e outros) */ .tec-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; font-family: var(--fonte-display); padding: 0.25rem 0.65rem; border-radius: 6px; letter-spacing: 0.02em; } .tec-html { background: rgba(227,79,38,.15); color: #e34f26; border: 1px solid rgba(227,79,38,.3); } .tec-css { background: rgba(38,77,228,.15); color: #5b9dff; border: 1px solid rgba(38,77,228,.3); } .tec-js { background: rgba(247,223,30,.12); color: #f7df1e; border: 1px solid rgba(247,223,30,.3); } .tec-react { background: rgba(97,218,251,.12); color: #61dafb; border: 1px solid rgba(97,218,251,.3); } .tec-firebase { background: rgba(255,202,40,.12); color: #ffca28; border: 1px solid rgba(255,202,40,.3); } .tec-node { background: rgba(51,153,51,.12); color: #339933; border: 1px solid rgba(51,153,51,.3); } .tec-git { background: rgba(240,80,50,.12); color: #f05032; border: 1px solid rgba(240,80,50,.3); } .tec-ts { background: rgba(49,120,198,.12); color: #3178c6; border: 1px solid rgba(49,120,198,.3); } /* ============================================================ 5. TELA DE CARREGAMENTO ============================================================ */ .tela-carregamento { position: fixed; inset: 0; background: var(--cor-fundo); display: flex; align-items: center; justify-content: center; z-index: var(--z-loading); transition: opacity 0.6s ease, visibility 0.6s ease; } .tela-carregamento.ocultar { opacity: 0; visibility: hidden; pointer-events: none; } .carregamento-conteudo { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .carregamento-logo { font-family: var(--fonte-display); font-size: 3rem; font-weight: 800; background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: pulsarLogo 1.5s ease-in-out infinite; } @keyframes pulsarLogo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } .carregamento-barra { width: 200px; height: 3px; background: rgba(0, 212, 255, 0.15); border-radius: 10px; overflow: hidden; } .carregamento-progresso { height: 100%; background: var(--grad-primario); border-radius: 10px; animation: carregarBarra 1.8s ease-in-out forwards; } @keyframes carregarBarra { 0% { width: 0%; } 60% { width: 75%; } 100% { width: 100%; } } .carregamento-texto { font-family: var(--fonte-display); font-size: 0.8rem; letter-spacing: 0.15em; color: var(--cor-texto-fraco); } /* ============================================================ 6. NAVBAR / CABEÇALHO ============================================================ */ .cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); padding: 1.25rem 0; transition: var(--transicao-media); } /* Estado rolado — fundo sólido com blur */ .cabecalho.rolado { background: rgba(5, 13, 26, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--cor-borda); padding: 0.85rem 0; box-shadow: 0 4px 30px rgba(0,0,0,0.3); } .nav-container { max-width: 1200px; margin: 0 auto; padding: var(--espacamento-container); display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* Logo */ .nav-logo { display: flex; align-items: center; gap: 0.3rem; font-family: var(--fonte-display); font-size: 1.15rem; font-weight: 700; color: var(--cor-titulo); transition: var(--transicao-rapida); flex-shrink: 0; } .nav-logo:hover { opacity: 0.85; } .logo-simbolo { color: var(--cor-azul-neon); } .logo-sobrenome { background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Links de navegação */ .nav-links { display: flex; align-items: center; gap: 0.25rem; } .nav-link { font-family: var(--fonte-corpo); font-size: 0.9rem; font-weight: 500; color: var(--cor-texto-suave); padding: 0.45rem 0.85rem; border-radius: 8px; transition: var(--transicao-rapida); position: relative; } .nav-link::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: var(--grad-primario); border-radius: 2px; transform: translateX(-50%); transition: width 0.3s ease; } .nav-link:hover, .nav-link.ativo { color: var(--cor-azul-neon); } .nav-link:hover::after, .nav-link.ativo::after { width: 60%; } /* Botão currículo da navbar */ .botao-curriculo-nav { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.35rem; background: transparent; color: var(--cor-azul-neon); font-family: var(--fonte-corpo); font-size: 0.88rem; font-weight: 600; border-radius: var(--raio-botao); border: 1px solid rgba(0, 212, 255, 0.4); transition: var(--transicao-media); white-space: nowrap; flex-shrink: 0; } .botao-curriculo-nav:hover { background: var(--grad-primario); border-color: transparent; color: #fff; box-shadow: var(--sombra-botao); } /* Botão de alternar tema (sol/lua) */ .botao-tema { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cor-borda); background: transparent; color: var(--cor-texto-suave); font-size: 1.05rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transicao-media); flex-shrink: 0; } .botao-tema:hover { border-color: var(--cor-borda-hover); color: var(--cor-azul-neon); background: rgba(0, 212, 255, 0.06); transform: rotate(20deg); } /* Ícone sol no tema claro */ html[data-tema="claro"] .botao-tema { color: #f59e0b; border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.06); } html[data-tema="claro"] .botao-tema:hover { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; } /* Botão de tema dentro do menu mobile */ .menu-mobile-tema { width: 100%; text-align: left; background: none; border: 1px solid transparent; font-family: var(--fonte-corpo); cursor: pointer; margin-top: .5rem; border-radius: 10px; border-color: rgba(245, 158, 11, 0.2) !important; background: rgba(245, 158, 11, 0.05) !important; color: #f59e0b !important; } .menu-mobile-tema i { color: #f59e0b !important; } html[data-tema="claro"] .menu-mobile-tema { border-color: rgba(0, 212, 255, 0.2) !important; background: rgba(0, 212, 255, 0.05) !important; color: var(--cor-azul-neon) !important; } html[data-tema="claro"] .menu-mobile-tema i { color: var(--cor-azul-neon) !important; } /* ============================================================ 7. MENU MOBILE ============================================================ */ .botao-menu-mobile { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--cor-borda); background: var(--cor-fundo-card); flex-shrink: 0; transition: var(--transicao-media); } .botao-menu-mobile:hover { border-color: var(--cor-borda-hover); background: var(--cor-fundo-card-hover); } .hamburger-linha { display: block; width: 20px; height: 2px; background: var(--cor-texto); border-radius: 2px; transition: var(--transicao-media); transform-origin: center; } /* Animação hamburguer → X */ .botao-menu-mobile.aberto .hamburger-linha:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .botao-menu-mobile.aberto .hamburger-linha:nth-child(2) { opacity: 0; transform: scaleX(0); } .botao-menu-mobile.aberto .hamburger-linha:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Drawer mobile */ .menu-mobile { display: none; position: fixed; top: 0; right: -100%; width: min(320px, 80vw); height: 100dvh; background: #060e1c; border-left: 1px solid var(--cor-borda); z-index: calc(var(--z-header) - 1); padding: 6rem 2rem 2rem; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; } .menu-mobile.aberto { right: 0; } .menu-mobile-links { display: flex; flex-direction: column; gap: 0.5rem; } .menu-mobile-link { display: flex; align-items: center; gap: 1rem; font-size: 1rem; font-weight: 500; color: var(--cor-texto-suave); padding: 0.85rem 1rem; border-radius: 10px; transition: var(--transicao-rapida); border: 1px solid transparent; } .menu-mobile-link i { font-size: 1.15rem; color: var(--cor-azul-neon); width: 1.5rem; text-align: center; } .menu-mobile-link:hover { color: var(--cor-texto); background: rgba(0, 212, 255, 0.06); border-color: var(--cor-borda); } .menu-mobile-curriculo { margin-top: 1.5rem; background: var(--grad-primario); color: #fff !important; border: none !important; border-radius: 10px; justify-content: center; } .menu-mobile-curriculo i { color: #fff !important; } /* Overlay escuro por trás do menu mobile */ .menu-mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); z-index: calc(var(--z-header) - 2); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.3s ease; } .menu-mobile-overlay.visivel { opacity: 1; } /* ============================================================ 9. HERO SECTION ============================================================ */ .secao-hero { position: relative; min-height: 100dvh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8rem 2rem 4rem; gap: 4rem; } /* Fundo radial da hero */ .secao-hero::before { content: ''; position: absolute; inset: 0; background: var(--grad-hero); z-index: var(--z-fundo); } /* Canvas de partículas */ .canvas-particulas { position: absolute; inset: 0; z-index: 0; opacity: 0.7; } /* Grade decorativa no background */ .hero-grade { position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px); background-size: 60px 60px; z-index: 1; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); } /* Círculos de luz ambiente */ .hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .hero-glow-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(26, 111, 255, 0.15), transparent 70%); top: -10%; left: -10%; } .hero-glow-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(0, 212, 255, 0.12), transparent 70%); bottom: 0; right: -5%; } /* Conteúdo da hero */ .hero-conteudo { position: relative; z-index: 2; max-width: 600px; display: flex; flex-direction: column; gap: 1.5rem; } /* Badge "Disponível para oportunidades" */ .hero-badge { display: inline-flex; align-items: center; gap: 0.65rem; background: rgba(0, 230, 118, 0.08); border: 1px solid rgba(0, 230, 118, 0.25); padding: 0.5rem 1.15rem; border-radius: 100px; font-size: 0.82rem; font-weight: 500; color: #00e676; width: fit-content; } .badge-ponto { width: 7px; height: 7px; background: #00e676; border-radius: 50%; display: block; box-shadow: 0 0 8px #00e676; animation: pulsarPonto 2s ease-in-out infinite; } @keyframes pulsarPonto { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } } /* Nome principal */ .hero-nome { font-family: var(--fonte-display); font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 800; line-height: 1.05; color: var(--cor-titulo); display: flex; flex-direction: column; } .nome-linha { display: block; } .nome-destaque { background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Subtítulo com efeito de digitação */ .hero-subtitulo { font-family: var(--fonte-display); font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 600; color: var(--cor-texto-suave); display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .typing-prefixo { margin-right: 0.4rem; } .typing-texto { color: var(--cor-azul-neon); } .typing-cursor { color: var(--cor-azul-neon); animation: piscarCursor 0.8s step-end infinite; margin-left: 2px; } @keyframes piscarCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Descrição */ .hero-descricao { font-size: 1.05rem; color: var(--cor-texto-suave); line-height: 1.8; max-width: 500px; } .hero-descricao strong { color: var(--cor-texto); } /* Botões da hero */ .hero-botoes { display: flex; align-items: center; flex-wrap: wrap; gap: 0.85rem; } /* Stats rápidos */ .hero-stats { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.5rem; } .stat-item { display: flex; flex-direction: column; align-items: flex-start; } .stat-numero { font-family: var(--fonte-display); font-size: 1.6rem; font-weight: 800; background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } .stat-label { font-size: 0.78rem; color: var(--cor-texto-fraco); font-weight: 500; } .stat-divisor { width: 1px; height: 35px; background: var(--cor-borda); } /* Avatar da hero */ .hero-avatar-wrapper { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 380px; height: 380px; } /* Anéis animados ao redor do avatar */ .avatar-anel { position: absolute; border-radius: 50%; border: 1px solid rgba(0, 212, 255, 0.2); animation: girarAnel 20s linear infinite; } .avatar-anel-externo { width: 340px; height: 340px; animation-duration: 25s; } .avatar-anel-medio { width: 280px; height: 280px; animation-direction: reverse; border-color: rgba(26, 111, 255, 0.2); } @keyframes girarAnel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .avatar-container { position: relative; z-index: 2; } .avatar-placeholder { width: 220px; height: 220px; border-radius: 50%; background: var(--grad-card); border: 2px solid rgba(0, 212, 255, 0.3); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 0 40px rgba(0, 212, 255, 0.15), inset 0 0 40px rgba(0, 0, 0, 0.3); } .avatar-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .avatar-iniciais { font-family: var(--fonte-display); font-size: 3.5rem; font-weight: 800; background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .avatar-glow { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(0, 212, 255, 0.12), transparent 70%); pointer-events: none; } /* Chips flutuantes ao redor do avatar */ .chip-flutuante { position: absolute; display: flex; align-items: center; gap: 0.5rem; background: rgba(10, 25, 41, 0.95); border: 1px solid var(--cor-borda); border-radius: 100px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--cor-texto); white-space: nowrap; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .chip-flutuante i { color: var(--cor-azul-neon); font-size: 1rem; } .chip-flutuante-1 { top: 20%; right: -5%; animation: flutuarChip 4s ease-in-out infinite; } .chip-flutuante-2 { bottom: 20%; right: 0; animation: flutuarChip 4s ease-in-out infinite 1s; } .chip-flutuante-3 { bottom: 30%; left: -5%; animation: flutuarChip 4s ease-in-out infinite 2s; } @keyframes flutuarChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* Indicador de scroll */ .hero-scroll-indicador { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cor-borda); border-radius: 50%; color: var(--cor-texto-suave); font-size: 1.2rem; transition: var(--transicao-media); animation: saltarScroll 2s ease-in-out infinite; } .hero-scroll-indicador:hover { color: var(--cor-azul-neon); border-color: var(--cor-borda-hover); background: rgba(0, 212, 255, 0.05); } @keyframes saltarScroll { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ============================================================ 10. SOBRE MIM ============================================================ */ .secao-sobre { background: var(--grad-secao-alt); } .sobre-conteudo { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: center; } /* Visual esquerdo do sobre */ .sobre-visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .sobre-avatar-container { position: relative; width: 260px; height: 260px; } .sobre-avatar { width: 100%; height: 100%; border-radius: 24px; background: var(--grad-card); border: 2px solid var(--cor-borda); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--sombra-card); transition: var(--transicao-media); } .sobre-avatar:hover { border-color: var(--cor-borda-hover); box-shadow: var(--sombra-neon); transform: translateY(-4px); } .sobre-avatar img { width: 100%; height: 100%; object-fit: cover; } .sobre-avatar-iniciais { font-family: var(--fonte-display); font-size: 4rem; font-weight: 800; background: var(--grad-texto); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Decoração angular nos cantos */ .sobre-avatar-decoracao { position: absolute; inset: -10px; pointer-events: none; } .decoracao-linha { position: absolute; background: rgba(0, 212, 255, 0.4); } .decoracao-linha-h { height: 1px; width: 40px; top: 0; left: 0; } .decoracao-linha-v { width: 1px; height: 40px; top: 0; left: 0; } .decoracao-canto { position: absolute; width: 14px; height: 14px; border-radius: 2px; } .decoracao-canto-tl { top: 0; left: 0; border-top: 2px solid var(--cor-azul-neon); border-left: 2px solid var(--cor-azul-neon); } .decoracao-canto-br { bottom: 0; right: 0; border-bottom: 2px solid var(--cor-azul-neon); border-right: 2px solid var(--cor-azul-neon); } /* Cartões de info (localização, status) */ .sobre-info-card { display: flex; align-items: center; gap: 0.85rem; background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 0.85rem 1.25rem; width: 100%; max-width: 280px; font-size: 0.9rem; transition: var(--transicao-rapida); } .sobre-info-card:hover { border-color: var(--cor-borda-hover); background: var(--cor-fundo-card-hover); } .sobre-info-card > i { font-size: 1.3rem; color: var(--cor-azul-neon); flex-shrink: 0; } .info-card-titulo { display: block; font-size: 0.75rem; color: var(--cor-texto-fraco); font-weight: 500; } .info-card-valor { display: block; font-weight: 600; color: var(--cor-texto); } /* Ponto animado de "online/disponível" */ .status-ponto-animado { width: 10px; height: 10px; background: #00e676; border-radius: 50%; flex-shrink: 0; position: relative; } .status-ponto-animado::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #00e676; animation: pulsarStatus 2s ease-in-out infinite; } @keyframes pulsarStatus { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.5); opacity: 0; } } /* Texto lado direito */ .sobre-paragrafo { color: var(--cor-texto-suave); line-height: 1.85; margin-bottom: 1rem; } .sobre-paragrafo-destaque { font-size: 1.1rem; color: var(--cor-texto); } .sobre-paragrafo strong { color: var(--cor-texto); font-weight: 600; } /* Tags de interesses */ .sobre-tags { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.5rem 0; } .tag { display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(0, 212, 255, 0.06); border: 1px solid rgba(0, 212, 255, 0.18); padding: 0.4rem 0.9rem; border-radius: 100px; font-size: 0.82rem; font-weight: 500; color: var(--cor-texto-suave); transition: var(--transicao-rapida); } .tag:hover { background: rgba(0, 212, 255, 0.12); border-color: rgba(0, 212, 255, 0.35); color: var(--cor-azul-neon); } .tag i { font-size: 0.9rem; } .sobre-botao { margin-top: 0.5rem; } /* ============================================================ 11. TECNOLOGIAS ============================================================ */ .secao-tecnologias { background: var(--cor-fundo); } /* Divisor de grupo de tecnologias */ .tec-grupo-titulo { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2.5rem; } .grupo-linha { flex: 1; height: 1px; background: var(--cor-borda); } .grupo-label { font-family: var(--fonte-display); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cor-texto-fraco); white-space: nowrap; } .grupo-label.aprendendo { color: var(--cor-azul-neon); } /* Grade de cards de tecnologias */ .grid-tecnologias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } /* Card de tecnologia individual */ .card-tecnologia { position: relative; background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; cursor: default; overflow: hidden; transition: var(--transicao-media); z-index: var(--z-base); } .card-tecnologia:hover { border-color: var(--cor-borda-hover); transform: translateY(-5px); box-shadow: var(--sombra-card); } /* Glow interno do card */ .card-tec-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at top left, var(--cor-glow, transparent), transparent 60%); pointer-events: none; opacity: 0; transition: opacity 0.4s ease; z-index: 0; } .card-tecnologia:hover .card-tec-glow { opacity: 1; } .card-tec-icone { font-size: 2.2rem; position: relative; z-index: 1; line-height: 1; } .card-tec-nome { font-family: var(--fonte-display); font-size: 1.1rem; font-weight: 700; color: var(--cor-titulo); position: relative; z-index: 1; } .card-tec-descricao { font-size: 0.83rem; color: var(--cor-texto-suave); line-height: 1.6; position: relative; z-index: 1; flex: 1; } /* Barra de nível */ .card-tec-nivel { display: flex; align-items: center; gap: 0.65rem; position: relative; z-index: 1; } .nivel-label { font-size: 0.72rem; color: var(--cor-texto-fraco); font-weight: 500; flex-shrink: 0; } .nivel-barra { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; } .nivel-preenchimento { height: 100%; width: 0; background: var(--cor, var(--cor-azul-neon)); border-radius: 10px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s; } /* Quando o card fica visível (controlado por JS) */ .card-tecnologia.animado .nivel-preenchimento { width: var(--nivel, 0%); } .nivel-valor { font-size: 0.72rem; color: var(--cor-texto-suave); font-weight: 500; flex-shrink: 0; } /* Badge no card */ .card-tec-badge { align-self: flex-start; font-size: 0.68rem; font-weight: 600; font-family: var(--fonte-display); padding: 0.2rem 0.7rem; border-radius: 6px; letter-spacing: 0.05em; position: relative; z-index: 1; } /* Seção de aprendizado */ .grid-aprendendo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .card-aprendendo { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: var(--transicao-media); } .card-aprendendo:hover { border-color: var(--cor-borda-hover); transform: translateY(-3px); } .aprendendo-icone { font-size: 1.6rem; } .aprendendo-nome { font-weight: 600; font-size: 0.9rem; color: var(--cor-texto); } .aprendendo-progresso { height: 4px; background: rgba(255,255,255,0.06); border-radius: 10px; overflow: hidden; } .aprendendo-barra { height: 100%; width: 0; background: var(--cor, var(--cor-azul-neon)); border-radius: 10px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s; } .card-aprendendo.animado .aprendendo-barra { width: var(--w, 0%); } /* ============================================================ 12. PROJETOS ============================================================ */ .secao-projetos { background: var(--grad-secao-alt); } /* Filtros */ .projetos-filtros { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; } .filtro-btn { padding: 0.5rem 1.25rem; background: var(--cor-fundo-card); color: var(--cor-texto-suave); border: 1px solid var(--cor-borda); border-radius: 100px; font-family: var(--fonte-corpo); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: var(--transicao-media); } .filtro-btn:hover, .filtro-btn.filtro-ativo { background: var(--grad-primario); color: #fff; border-color: transparent; } /* Título de grupo de projetos */ .projetos-grupo-titulo { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.75rem; font-family: var(--fonte-display); font-size: 1rem; font-weight: 700; color: var(--cor-texto-suave); } .projetos-grupo-titulo i { font-size: 1.15rem; color: var(--cor-azul-neon); } /* Grade de projetos em destaque (2 colunas, cards maiores) */ .grid-projetos-destaque { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 1.5rem; } .card-projeto-destaque { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); overflow: hidden; transition: var(--transicao-media); display: flex; flex-direction: column; } .card-projeto-destaque:hover { border-color: var(--cor-borda-hover); transform: translateY(-6px); box-shadow: var(--sombra-card), 0 0 40px rgba(0, 212, 255, 0.06); } /* Área de imagem do projeto destaque */ .projeto-destaque-imagem { position: relative; overflow: hidden; height: 220px; } .projeto-destaque-imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card-projeto-destaque:hover .projeto-destaque-imagem img { transform: scale(1.06); } /* Placeholder quando não há imagem */ .projeto-placeholder-img { width: 100%; height: 100%; background: linear-gradient(135deg, #0a1929 0%, #071428 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; color: var(--cor-texto-suave); font-size: 0.9rem; font-weight: 500; } .projeto-placeholder-img i { font-size: 3rem; color: var(--cor-azul-neon); opacity: 0.7; } /* Overlay com links ao hover na imagem */ .projeto-overlay { position: absolute; inset: 0; background: rgba(5, 13, 26, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(4px); } .card-projeto-destaque:hover .projeto-overlay { opacity: 1; } .projeto-overlay-links { display: flex; gap: 1rem; } .overlay-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; background: var(--grad-primario); color: #fff; font-size: 0.85rem; font-weight: 600; border-radius: 8px; transition: var(--transicao-rapida); } .overlay-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(26, 111, 255, 0.4); } .overlay-btn-github { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); } /* Badge "Destaque" na imagem */ .projeto-badge-destaque { position: absolute; top: 1rem; left: 1rem; background: rgba(10, 25, 41, 0.9); border: 1px solid rgba(0, 212, 255, 0.3); border-radius: 100px; padding: 0.3rem 0.85rem; font-size: 0.75rem; font-weight: 600; color: var(--cor-azul-neon); backdrop-filter: blur(10px); } /* Info do projeto destaque */ .projeto-destaque-info { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; } .projeto-nome { font-family: var(--fonte-display); font-size: 1.25rem; font-weight: 700; color: var(--cor-titulo); } .projeto-descricao { font-size: 0.9rem; color: var(--cor-texto-suave); line-height: 1.7; flex: 1; } .projeto-tecnologias { display: flex; flex-wrap: wrap; gap: 0.5rem; } .projeto-acoes { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.5rem; } .botao-projeto { font-size: 0.85rem; padding: 0.65rem 1.5rem; } .botao-github { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.25rem; color: var(--cor-texto-suave); font-size: 0.85rem; font-weight: 500; border: 1px solid var(--cor-borda); border-radius: 8px; transition: var(--transicao-rapida); } .botao-github:hover { color: var(--cor-texto); border-color: var(--cor-borda-hover); background: rgba(0, 212, 255, 0.05); } /* Grade de projetos simples / pessoais (cards menores) */ .grid-projetos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .card-projeto { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; transition: var(--transicao-media); position: relative; overflow: hidden; } .card-projeto::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--grad-primario); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .card-projeto:hover { border-color: var(--cor-borda-hover); transform: translateY(-5px); box-shadow: var(--sombra-card); } .card-projeto:hover::before { transform: scaleX(1); } .card-proj-topo { display: flex; align-items: flex-start; justify-content: space-between; } .card-proj-icone { width: 48px; height: 48px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--cor-azul-neon); } .card-proj-links { display: flex; gap: 0.65rem; } .card-proj-links a { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: 1rem; transition: var(--transicao-rapida); } .card-proj-links a:hover { border-color: var(--cor-azul-neon); color: var(--cor-azul-neon); background: rgba(0, 212, 255, 0.06); } .card-proj-nome { font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 700; color: var(--cor-titulo); } .card-proj-descricao { font-size: 0.85rem; color: var(--cor-texto-suave); line-height: 1.65; flex: 1; } .card-proj-tecnologias { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* ============================================================ 13. JORNADA / TIMELINE ============================================================ */ .secao-jornada { background: var(--cor-fundo); } .timeline { position: relative; padding: 2rem 0; max-width: 900px; margin: 0 auto; } /* Linha central vertical */ .timeline-linha { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--cor-borda) 10%, var(--cor-borda) 90%, transparent); transform: translateX(-50%); } /* Item da timeline */ .timeline-item { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: 3.5rem; position: relative; } /* Lado esquerdo: card à esquerda, marcador no centro */ .timeline-esquerda { flex-direction: row-reverse; text-align: right; } .timeline-esquerda .timeline-card { margin-right: auto; } /* Lado direito: card à direita */ .timeline-direita { flex-direction: row; text-align: left; } .timeline-direita .timeline-card { margin-left: auto; } /* Marcador central circular */ .timeline-marcador { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--cor-fundo-card); border: 2px solid var(--cor-borda); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--cor-azul-neon); z-index: 2; transition: var(--transicao-media); flex-shrink: 0; } .timeline-item.visivel .timeline-marcador { border-color: var(--cor-azul-neon); box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); } /* Marcador do item atual */ .marcador-atual { background: var(--grad-primario) !important; border-color: transparent !important; color: #fff !important; } /* Card da timeline */ .timeline-card { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: 1.5rem 1.75rem; width: calc(50% - 50px); position: relative; transition: var(--transicao-media); } .timeline-card:hover { border-color: var(--cor-borda-hover); transform: translateY(-3px); box-shadow: var(--sombra-card); } /* Card atual tem borda com gradiente */ .timeline-card-atual { border-color: rgba(0, 212, 255, 0.3); background: linear-gradient(145deg, #0a1929, #071830); } .timeline-data { font-family: var(--fonte-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; color: var(--cor-azul-neon); text-transform: uppercase; } .timeline-titulo { font-family: var(--fonte-display); font-size: 1.05rem; font-weight: 700; color: var(--cor-titulo); margin: 0.35rem 0 0.65rem; } .timeline-texto { font-size: 0.87rem; color: var(--cor-texto-suave); line-height: 1.7; } .timeline-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; justify-content: inherit; } .timeline-tags span { font-size: 0.72rem; font-weight: 600; font-family: var(--fonte-display); padding: 0.2rem 0.7rem; border-radius: 6px; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); color: var(--cor-azul-neon); } .timeline-badge-atual { display: inline-block; margin-top: 1rem; background: var(--grad-primario); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.85rem; border-radius: 100px; } /* ============================================================ 14. CONTATO ============================================================ */ .secao-contato { background: var(--grad-secao-alt); } .contato-conteudo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: flex-start; } .contato-descricao { color: var(--cor-texto-suave); line-height: 1.8; margin-bottom: 2rem; } .contato-descricao strong { color: var(--cor-texto); } /* Lista de links de contato */ .contato-links { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; } .contato-link-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--cor-fundo-card); border: 1px solid var(--cor-borda); border-radius: 12px; transition: var(--transicao-media); group: true; } .contato-link-item:hover { border-color: var(--cor-borda-hover); background: var(--cor-fundo-card-hover); transform: translateX(6px); } .contato-icone-wrapper { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; transition: var(--transicao-media); } .contato-icone-email { background: rgba(26, 111, 255, 0.12); color: #1a6fff; } .contato-icone-github { background: rgba(139, 148, 158, 0.12); color: #8b949e; } .contato-icone-linkedin { background: rgba(0, 119, 181, 0.12); color: #0077b5; } .contato-icone-instagram{ background: rgba(228, 64, 95, 0.12); color: #e4405f; } .contato-icone-whatsapp { background: rgba(37, 211, 102, 0.12); color: #25d366; } .contato-link-item:hover .contato-icone-wrapper { transform: scale(1.1); } .contato-link-info { flex: 1; min-width: 0; } .contato-link-titulo { display: block; font-size: 0.75rem; color: var(--cor-texto-fraco); font-weight: 500; } .contato-link-valor { display: block; font-size: 0.9rem; font-weight: 600; color: var(--cor-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contato-seta { font-size: 1rem; color: var(--cor-texto-fraco); flex-shrink: 0; transition: var(--transicao-rapida); } .contato-link-item:hover .contato-seta { color: var(--cor-azul-neon); transform: translate(2px, -2px); } /* Botão de download do currículo na seção contato */ .botao-curriculo-contato { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.9rem 2rem; background: var(--grad-primario); color: #fff; font-family: var(--fonte-corpo); font-size: 0.95rem; font-weight: 600; border-radius: var(--raio-botao); position: relative; overflow: hidden; box-shadow: var(--sombra-botao); transition: var(--transicao-media); width: 100%; justify-content: center; } .botao-curriculo-contato:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26, 111, 255, 0.5); } /* Card do formulário */ .formulario-card { background: var(--grad-card); border: 1px solid var(--cor-borda); border-radius: var(--raio-card); padding: 2.5rem; } .formulario-titulo { font-family: var(--fonte-display); font-size: 1.35rem; font-weight: 700; color: var(--cor-titulo); margin-bottom: 0.35rem; } .formulario-subtitulo { font-size: 0.88rem; color: var(--cor-texto-suave); margin-bottom: 2rem; } .formulario { display: flex; flex-direction: column; gap: 1.25rem; } .campo-grupo-duplo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .campo { display: flex; flex-direction: column; gap: 0.5rem; } .campo-label { font-size: 0.83rem; font-weight: 600; color: var(--cor-texto-suave); } .campo-input { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--cor-borda); border-radius: 10px; padding: 0.85rem 1.1rem; color: var(--cor-texto); font-family: var(--fonte-corpo); font-size: 0.9rem; width: 100%; transition: var(--transicao-rapida); outline: none; resize: vertical; } .campo-input::placeholder { color: var(--cor-texto-fraco); } .campo-input:focus { border-color: rgba(0, 212, 255, 0.5); background: rgba(0, 212, 255, 0.03); box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08); } .campo-input.invalido { border-color: rgba(255, 80, 80, 0.6); } .campo-erro { font-size: 0.78rem; color: #ff5050; min-height: 1rem; } .campo-textarea { min-height: 120px; } /* Botão de enviar */ .botao-enviar { display: flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 0.9rem 2rem; background: var(--grad-primario); color: #fff; font-family: var(--fonte-corpo); font-size: 0.95rem; font-weight: 600; border-radius: var(--raio-botao); position: relative; overflow: hidden; box-shadow: var(--sombra-botao); transition: var(--transicao-media); cursor: pointer; border: none; width: 100%; } .botao-enviar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(26, 111, 255, 0.5); } .botao-enviar:disabled { opacity: 0.7; cursor: not-allowed; } .formulario-feedback { padding: 1rem 1.25rem; border-radius: 10px; font-size: 0.88rem; font-weight: 500; text-align: center; } .formulario-feedback.sucesso { background: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); color: #00e676; } .formulario-feedback.erro { background: rgba(255, 80, 80, 0.1); border: 1px solid rgba(255, 80, 80, 0.3); color: #ff5050; } /* ============================================================ 15. FOOTER / RODAPÉ ============================================================ */ .rodape { background: #030a14; border-top: 1px solid var(--cor-borda); padding: 4rem 0 2rem; } .rodape-conteudo { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--cor-borda); margin-bottom: 2rem; align-items: start; } .rodape-frase { font-style: italic; font-size: 0.88rem; color: var(--cor-texto-fraco); margin-top: 1rem; line-height: 1.7; } .rodape-nav ul { display: flex; flex-direction: column; gap: 0.65rem; } .rodape-nav ul a { font-size: 0.88rem; color: var(--cor-texto-suave); transition: var(--transicao-rapida); } .rodape-nav ul a:hover { color: var(--cor-azul-neon); padding-left: 4px; } .rodape-redes { display: flex; gap: 0.85rem; align-items: flex-start; } .rodape-rede-link { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-size: 1.1rem; transition: var(--transicao-media); } .rodape-rede-link:hover { border-color: var(--cor-azul-neon); color: var(--cor-azul-neon); background: rgba(0, 212, 255, 0.06); transform: translateY(-3px); } .rodape-inferior { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--cor-texto-fraco); } .rodape-credito { display: flex; align-items: center; gap: 0.3rem; } /* ============================================================ 16. BOTÃO VOLTAR AO TOPO ============================================================ */ .botao-topo { position: fixed; bottom: 2rem; right: 2rem; width: 46px; height: 46px; background: var(--grad-primario); color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; box-shadow: var(--sombra-botao); z-index: var(--z-menu); opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transicao-media); cursor: pointer; border: none; } .botao-topo.visivel { opacity: 1; visibility: visible; transform: translateY(0); } .botao-topo:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(26, 111, 255, 0.5); }