/* ========================================================== TIPOGRAFIA GLOBAL — UBUNTU ========================================================== */ /* Import da fonte (caso ainda não esteja no , pode deixar aqui no CSS) */ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap'); /* Fonte padrão do site */ body { font-family: 'Ubuntu', sans-serif; font-weight: 400; /* Regular */ line-height: 1.6; } /* ========================================================== TÍTULOS PRINCIPAIS (H1) ========================================================== */ h1, .text-title, .prose-custom h1 { font-family: 'Ubuntu', sans-serif; font-weight: 700; /* Bold */ letter-spacing: -0.02em; line-height: 1.2; } /* ========================================================== SUBTÍTULOS (H2, H3) ========================================================== */ h2, h3, .text-subtitle, .prose-custom h2, .prose-custom h3 { font-family: 'Ubuntu', sans-serif; font-weight: 500; /* Medium */ letter-spacing: -0.01em; line-height: 1.35; } /* ========================================================== PARÁGRAFOS E TEXTO CORRIDO ========================================================== */ p, li, span, .prose-custom p, .prose-custom li { font-family: 'Ubuntu', sans-serif; font-weight: 400; /* Regular */ line-height: 1.75; text-align: justify; } /* ========================================================== TEXTO AUXILIAR / LEGENDAS ========================================================== */ small, .text-caption, .text-muted, .text-subtle { font-family: 'Ubuntu', sans-serif; font-weight: 300; /* Light */ } /* ========================================================== TAGS, BADGES E BOTÕES ========================================================== */ .skill-badge, .keyword-badge, .project-tag, .filter-tag, .contact-card, .tag, .exp-tag, .project-tag-premium, button { font-family: 'Ubuntu', sans-serif; font-weight: 500; /* Medium */ } /* ========================================================== NAVBAR E LINKS ========================================================== */ nav a, #greeting { font-family: 'Ubuntu', sans-serif; font-weight: 500; /* Medium */ } /* ========================================================== CÓDIGO ========================================================== */ code, pre { font-family: 'Ubuntu Mono', 'Courier New', monospace; } .skills-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; justify-items: center; } .skill-badge { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 10px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); transition: all 0.25s ease; } .skill-badge:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.45); transform: translateY(-2px); } .project-card img { height: 210px; /* ajuste aqui */ width: 100%; object-fit: cover; } .keyword-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); transition: all 0.2s ease; letter-spacing: 0.3px; } .keyword-badge:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.5); transform: translateY(-1px); } .project-tag { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); transition: all 0.2s ease; letter-spacing: 0.3px; } .project-tag:hover { background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.5); transform: translateY(-1px); } .filter-tag { padding: 6px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); cursor: pointer; transition: 0.2s; white-space: nowrap; } .filter-tag:hover { background: rgba(34, 211, 238, 0.15); } .filter-tag.active { background: #22d3ee; color: #0a1628; border-color: #22d3ee; } .prose-custom { color: #cbd5e1; font-size: 16.5px; line-height: 1.75; letter-spacing: 0.2px; } /* HEADINGS */ .prose-custom h1 { font-size: 28px; font-weight: 800; color: white; margin: 32px 0 16px; } .prose-custom h2 { font-size: 22px; font-weight: 700; color: white; margin: 28px 0 12px; border-left: 3px solid #22d3ee; padding-left: 10px; } .prose-custom h3 { font-size: 18px; font-weight: 600; color: #e2e8f0; margin: 20px 0 10px; } /* PARAGRAPHS */ .prose-custom p { margin: 14px 0; color: #cbd5e1; } /* LISTS */ .prose-custom ul { margin: 14px 0; padding-left: 18px; } .prose-custom ul li { margin: 6px 0; list-style: disc; color: #cbd5e1; } /* CODE BLOCKS */ .prose-custom code { background: rgba(34, 211, 238, 0.08); color: #67e8f9; padding: 2px 6px; border-radius: 6px; font-size: 14px; } .prose-custom pre { background: #0d1f3c; padding: 16px; border-radius: 12px; overflow-x: auto; border: 1px solid rgba(34, 211, 238, 0.15); margin: 18px 0; } /* BLOCKQUOTE */ .prose-custom blockquote { border-left: 3px solid #22d3ee; padding-left: 14px; color: #94a3b8; font-style: italic; margin: 18px 0; } --------------------- .skills-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; justify-items: center; } @media (max-width: 1280px) { .skills-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } } .skill-badge { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; position: relative; z-index: 1; padding: 10px 18px; border-radius: 9999px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.25); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } /* Hover sem cortar o elemento */ .skill-badge:hover { z-index: 20; /* Apenas desloca para cima; evita scale que causa corte lateral */ transform: translateY(-2px); background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(34, 211, 238, 0.08); } .skill-icon { width: 16px; height: 16px; object-fit: contain; } ----- .hero { background-image: url("/assets/img/header.jpeg"); background-size: cover; background-position: center; } ----- .contact-card { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 9999px; font-size: 14px; font-weight: 600; /* NOVA TONALIDADE DE AZUL (intermediária e mais elegante) */ color: #7dd3fc; /* sky-300 */ background: rgba(56, 189, 248, 0.10); /* sky-400 suave */ border: 1px solid rgba(56, 189, 248, 0.25); transition: all 0.25s ease; text-decoration: none; } .contact-card:hover { color: #67e8f9; /* seu cyan principal */ background: rgba(34, 211, 238, 0.18); border-color: rgba(34, 211, 238, 0.55); transform: translateY(-2px); } /* opcional: estado ativo/foco (acessibilidade) */ .contact-card:focus-visible { outline: 2px solid #3b82f6; outline-offset: 3px; } .experience-card-premium { padding: 20px 22px; background: rgba(18, 43, 80, 0.35); backdrop-filter: blur(10px); border: 1px solid rgba(56, 189, 248, 0.12); border-radius: 16px; transition: all 0.25s ease; position: relative; } .experience-card-premium:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.3); background: rgba(18, 43, 80, 0.55); } .project-tag-premium { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9999px; color: #7dd3fc; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.18); transition: all 0.2s ease; } .project-tag-premium:hover { background: rgba(56, 189, 248, 0.18); transform: translateY(-1px); } .timeline { border-left: 1px solid var(--border); padding-left: 2.5rem; position: relative; } .timeline-dot { position: absolute; left: -9px; width: 12px; height: 12px; border-radius: 9999px; background: var(--accent); box-shadow: 0 0 25px rgba(103, 232, 249, 0.6); } .exp-tag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 9999px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--blue-border); transition: all 0.2s ease; } .exp-tag:hover { background: var(--accent-soft-hover); transform: translateY(-1px); } :root { /* BACKGROUNDS */ --bg-0: #070f1c; --bg-1: #0a1628; --bg-2: #0b1f3a; /* TEXT */ --text-0: #ffffff; --text-1: #cbd5e1; --text-2: #94a3b8; /* ACCENTS */ --accent: #67e8f9; --accent-2: #7dd3fc; --accent-3: #38bdf8; /* BORDERS */ --border: rgba(56, 189, 248, 0.15); --border-strong: rgba(56, 189, 248, 0.28); /* EFFECTS */ --glass: rgba(15, 30, 60, 0.35); --glass-hover: rgba(15, 30, 60, 0.55); --shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .bg-app { background: var(--bg-0); } .bg-section { background: linear-gradient( to bottom, var(--bg-0), var(--bg-2), var(--bg-0) ); } .text-muted { color: var(--text-1); } .text-subtle { color: var(--text-2); } .border-soft { border: 1px solid var(--border); } .border-strong { border: 1px solid var(--border-strong); } .glass { background: var(--glass); backdrop-filter: blur(14px); } .glass-hover:hover { background: var(--glass-hover); box-shadow: var(--shadow); transform: translateY(-4px); } .card { border-radius: 18px; padding: 22px 24px; transition: all 0.25s ease; border: 1px solid var(--border); background: var(--glass); } .card:hover { border-color: var(--border-strong); transform: translateY(-5px); background: var(--glass-hover); box-shadow: var(--shadow); } .tag { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 9999px; color: var(--accent-2); background: rgba(56, 189, 248, 0.08); border: 1px solid var(--border); transition: all 0.2s ease; } .tag:hover { background: rgba(56, 189, 248, 0.18); transform: translateY(-1px); } /* ========================= NAVBAR BASE ========================= */ .navbar { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background: rgba(10, 22, 40, 0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(34, 211, 238, 0.12); } /* container */ .nav-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; gap: 16px; } /* logo */ .logo { color: #67e8f9; font-weight: 700; font-size: 1.2rem; white-space: nowrap; } /* greeting */ .greeting { flex: 1; text-align: center; font-size: 0.75rem; letter-spacing: 0.18em; color: rgba(103, 232, 249, 0.85); } /* ========================= DESKTOP LINKS ========================= */ .nav-links { display: flex; gap: 28px; } .nav-links a { color: #cbd5e1; font-weight: 500; transition: 0.2s; position: relative; } .nav-links a:hover { color: #67e8f9; } /* underline animation */ .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: #67e8f9; transition: 0.25s; } .nav-links a:hover::after { width: 100%; } /* ========================= MOBILE MENU (IMPORTANTE) ========================= */ .mobile-links { display: none; padding: 10px 16px 16px; flex-wrap: wrap; justify-content: center; gap: 8px; } .mobile-links a { font-size: 12px; padding: 8px 12px; border-radius: 9999px; color: #67e8f9; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.2); } /* ========================= RESPONSIVIDADE REAL ========================= */ /* tablet */ @media (max-width: 1024px) { .greeting { display: none; } .nav-links { gap: 16px; } } /* mobile */ @media (max-width: 768px) { .nav-links { display: none; } .mobile-links { display: flex; } .nav-container { justify-content: center; } .logo { font-size: 1rem; } } /* mobile pequeno */ @media (max-width: 480px) { .mobile-links a { font-size: 11px; padding: 7px 10px; } } /* ========================================================== PROJECT CARDS (SEM ANIMAÇÃO DE SCROLL) ========================================================== */ .project-card { border: 1px solid rgba(56, 189, 248, 0.10); background: rgba(15, 30, 60, 0.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; position: relative; /* estado inicial */ opacity: 0; transform: translate3d(0, 24px, 0); will-change: transform, opacity; /* transições curtas e suaves */ transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .project-card.reveal { opacity: 1; transform: translate3d(0, 0, 0); } /* Hover com destaque visual */ .project-card:hover { transform: translate3d(0, -6px, 0) scale(1.02); border-color: rgba(103, 232, 249, 0.45); background: rgba(18, 43, 80, 0.65); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(103, 232, 249, 0.18), 0 0 35px rgba(34, 211, 238, 0.12); } /* Opcional: brilho interno sutil */ .project-card:hover::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 135deg, rgba(103, 232, 249, 0.05), transparent 40%, transparent 60%, rgba(125, 211, 252, 0.04) ); } @media (prefers-reduced-motion: reduce) { .project-card { opacity: 1; transform: none; transition: none; } } /* Hint de clique */ .project-hint { margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 11px; font-weight: 600; color: rgba(103, 232, 249, 0.75); opacity: 0.7; transition: all 0.25s ease; } /* Seta animada */ .project-arrow { transition: transform 0.2s ease; } /* Hover states */ .project-card:hover .project-hint { opacity: 1; color: rgba(103, 232, 249, 0.95); } .project-card:hover .project-arrow { transform: translateX(4px); } .edu-logo { background: rgba(255, 255, 255, 0.06); padding: 6px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } /* caso o logo seja escuro (como Fatec) */ .edu-logo.dark-fix { padding: 8px; } .edu-logo.dark-fix img { width: 80px; height: 80px; } /* YouTube responsive embed */ .youtube-embed { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ margin: 24px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(34, 211, 238, 0.15); background: #0d1f3c; } .youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* opcional: hover sutil */ .youtube-embed:hover { border-color: rgba(34, 211, 238, 0.35); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } @media (max-width: 1280px) { .skills-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 768px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.8s ease-out both; } .animate-fade-in-up { animation: fade-in-up 0.9s ease-out both; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } /* ========================= CONTACT SECTION LAYOUT ========================= */ .contact-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ========================= CONTACT CARD (PREMIUM) ========================= */ .contact-card { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--accent-2); background: rgba(15, 30, 60, 0.35); border: 1px solid rgba(56, 189, 248, 0.18); backdrop-filter: blur(12px); transition: all 0.25s ease; position: relative; overflow: hidden; } /* brilho sutil interno */ .contact-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient( circle at top left, rgba(103, 232, 249, 0.12), transparent 60% ); opacity: 0; transition: opacity 0.25s ease; } /* hover state */ .contact-card:hover { transform: translateY(-4px); border-color: rgba(103, 232, 249, 0.45); background: rgba(18, 43, 80, 0.55); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(103, 232, 249, 0.15); } .contact-card:hover::before { opacity: 1; } /* ícone */ .contact-icon { font-size: 16px; line-height: 1; } /* texto */ .contact-text { white-space: nowrap; } /* foco acessível */ .contact-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ========================= RESPONSIVIDADE ========================= */ @media (max-width: 480px) { .contact-card { width: 100%; justify-content: center; } .contact-grid { flex-direction: column; align-items: stretch; } } /* ========================================== TCC LINK - HOVER APENAS NO NOME DO TCC ========================================== */ .tcc-link { display: inline-flex; align-items: center; gap: 6px; position: relative; color: var(--text-1); text-decoration: none; } .tcc-tooltip { position: absolute; left: 0; bottom: -26px; font-size: 11px; color: var(--accent); background: rgba(15, 30, 60, 0.85); border: 1px solid rgba(103, 232, 249, 0.2); padding: 4px 8px; border-radius: 6px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: all 0.2s ease; pointer-events: none; } /* título fixo (não muda nunca) */ .tcc-title { color: var(--text-1); } /* nome do TCC (é o único que muda) */ .tcc-name { color: var(--text-1); transition: color 0.25s ease; } /* ícone */ .tcc-link-icon { font-size: 12px; color: var(--accent); opacity: 0.7; transition: all 0.25s ease; } /* HOVER: só o nome do TCC fica azul */ .tcc-link:hover .tcc-name { color: var(--accent); } /* mantém título intacto */ .tcc-link:hover .tcc-title { color: var(--text-1); } /* animação do ícone */ .tcc-link:hover .tcc-link-icon { opacity: 1; transform: translate(2px, -2px); } /* acessibilidade */ .tcc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* aparece no hover */ .tcc-link:hover .tcc-tooltip { opacity: 1; transform: translateY(0); } /* ========================= TABLES - THEME INTEGRATION ========================= */ /* ========================= TABLES - PREMIUM GLASS THEME ========================= */ .prose-custom table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 20px 0; font-size: 14.5px; color: var(--text-1); background: var(--glass); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); } /* HEADER STICKY */ .prose-custom thead th { position: sticky; top: 0; z-index: 2; padding: 14px 16px; text-align: left; font-weight: 600; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent); background: rgba(10, 22, 40, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-strong); } /* CELLS */ .prose-custom tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-1); transition: all 0.2s ease; } /* ZEBRA */ .prose-custom tbody tr:nth-child(even) { background: rgba(15, 30, 60, 0.22); } /* HOVER LINHA (FOCO TOTAL) */ .prose-custom tbody tr:hover { background: rgba(56, 189, 248, 0.10); transform: scale(1.002); } /* HOVER POR COLUNA (efeito leve de leitura) */ .prose-custom tbody td:hover { color: var(--accent-2); } /* PRIMEIRA COLUNA DESTACADA (opcional forte UX) */ .prose-custom tbody td:first-child { font-weight: 600; color: var(--text-0); } /* BORDA ARREDONDADA VISUAL */ .prose-custom table tr:first-child th:first-child { border-top-left-radius: 14px; } .prose-custom table tr:first-child th:last-child { border-top-right-radius: 14px; } /* RESPONSIVIDADE */ @media (max-width: 768px) { .prose-custom table { display: block; overflow-x: auto; white-space: nowrap; } } /* ========================================================== SKILLS MARQUEE (ANIMAÇÃO CONTÍNUA) ========================================================== */ .skills-marquee { position: relative; overflow: hidden; width: 100%; max-width: 1200px; margin: 0 auto; /* Espaço interno para evitar corte no hover */ padding: 8px 0; /* Fade nas bordas */ -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); } .skills-track { display: flex; align-items: center; gap: 14px; width: max-content; /* Permite que o badge cresça no hover sem ser cortado */ padding: 6px 0; animation: skills-scroll 35s linear infinite; } /* Pausa a animação no hover */ .skills-marquee:hover .skills-track { animation-play-state: paused; } /* Movimento contínuo */ @keyframes skills-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (max-width: 768px) { .skills-track { gap: 10px; animation-duration: 25s; } .skill-badge { padding: 8px 14px; font-size: 13px; } .skill-icon { width: 14px; height: 14px; } } @media (prefers-reduced-motion: reduce) { .skills-track { animation: none; } }