html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, select, textarea, option { cursor: none !important; } /* Garantir que todos os elementos interativos também não mostrem o cursor padrão */ a, button, input[type="button"], input[type="submit"], input[type="reset"], .navbar, .navbar *, .navbar-brand, .navbar-toggler, .nav-item, .nav-link, .project-card, .skill-card, .switch__toggle, .social-link, select, option, [role="button"], [type="checkbox"], [type="radio"], .btn, .dropdown-toggle, summary, details, .clickable, [onclick], [tabindex="0"], .card, .card-header { cursor: none !important; } /* Garantir que o cursor personalizado seja mostrado */ #custom-cursor { pointer-events: none; position: fixed; z-index: 2147483647; will-change: transform; transition: transform 0.1s ease-out, background-image 0.15s ease; display: block !important; } /******************************************** * Variáveis e Configurações Globais ********************************************/ :root { /* Tema claro (padrão) */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; --branco: #FFFFFF; --texto: #4A4A4A; --background: #FFFFFF; --card-bg: #FFFFFF; --gradient-hero: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-escuro) 100%); --transition: all 0.3s ease; } /* Tema escuro */ [data-theme="dark"] { --rosa-bebe: #2D1A20; --rosa-claro: #3A232C; --rosa-escuro: #942B47; --roxo-claro: #522E52; --menta: #2A1A21; --branco: #1E1E1E; --texto: #E0E0E0; --background: #121212; --card-bg: #1E1E1E; --gradient-hero: linear-gradient(135deg, #2A1A21 0%, #501A2B 100%); } /******************************************** * Estilos Básicos e Customizações de Cursor ********************************************/ body { cursor: url("data:image/svg+xml;utf8,") 12 12, auto; background-color: var(--background); color: var(--texto); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; transition: var(--transition); } [data-theme="dark"] body { cursor: url("data:image/svg+xml;utf8,") 12 12, auto; } a, button { cursor: url("data:image/svg+xml;utf8,") 12 12, pointer !important; } [data-theme="dark"] a, [data-theme="dark"] button { cursor: url("data:image/svg+xml;utf8,") 12 12, pointer !important; } /******************************************** * Barra de Rolagem Personalizada ********************************************/ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--rosa-claro); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: var(--rosa-escuro); border-radius: 10px; border: 3px solid var(--rosa-claro); } ::-webkit-scrollbar-thumb:hover { background: var(--roxo-claro); } /******************************************** * Classes Utilitárias ********************************************/ .section { padding: 80px 0; transition: var(--transition); } .bg-rosa-bebe { background-color: var(--rosa-bebe); transition: var(--transition); } .bg-rosa-claro { background-color: var(--rosa-claro); transition: var(--transition); } .bg-menta { background-color: var(--menta); transition: var(--transition); } /******************************************** * Botões e Componentes Interativos ********************************************/ .btn-rosa { background-color: var(--rosa-escuro); color: white; border: none; transition: all 0.3s ease-in-out; } /* Efeito de hover nos botões */ .btn-rosa:hover { background-color: var(--roxo-claro); transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } /* Ajuste para o botão outline no modo escuro */ .btn-outline-dark { color: var(--texto); border-color: var(--texto); transition: var(--transition); } .btn-outline-dark:hover { background-color: var(--rosa-escuro); border-color: var(--rosa-escuro); color: white; } [data-theme="dark"] .btn-outline-dark { color: var(--texto); border-color: var(--texto); } [data-theme="dark"] .btn-outline-dark:hover { background-color: var(--rosa-escuro); border-color: var(--rosa-escuro); color: white; } /******************************************** * Switch de Alternância de Tema ********************************************/ .switch { display: flex; align-items: center; justify-content: center; margin-left: 15px; position: relative; } .switch__toggle { appearance: none; width: 60px; height: 30px; border-radius: 50px; background-color: var(--rosa-escuro); position: relative; transition: background-color 0.3s; cursor: pointer; } .switch__toggle:checked { background-color: var(--roxo-claro); } .switch__toggle:before { content: ''; position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background-color: white; transition: transform 0.3s; } .switch__toggle:checked:before { transform: translateX(30px); } .switch__icon { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 12px; pointer-events: none; } .switch__icon--sun { left: 8px; } .switch__icon--moon { right: 8px; } .navbar-nav .nav-item:last-child { margin-left: 10px; } /******************************************** * Navbar ********************************************/ .navbar { background-color: rgba(255, 192, 203, 0.9) !important; backdrop-filter: blur(10px); padding: 15px 0; transition: all 0.3s ease; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .navbar { background-color: rgba(45, 26, 32, 0.9) !important; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); } .navbar .container { position: relative; } .navbar-nav { gap: 5px; } .navbar.scrolled { padding: 10px 0; } .navbar-brand { font-weight: 700; color: var(--texto) !important; display: flex; align-items: center; font-size: 1.4rem; transition: var(--transition); } .navbar-brand span { font-weight: 300; opacity: 0.8; font-size: 1rem; margin-left: 8px; } .nav-link { color: var(--texto) !important; margin: 0 10px; position: relative; transition: var(--transition); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--rosa-escuro); transition: width 0.3s; } .nav-link:hover::after { width: 100%; } /******************************************** * Hero Section ********************************************/ .hero { min-height: 100vh; display: flex; align-items: center; background: var(--gradient-hero); position: relative; overflow: hidden; transition: var(--transition); } .hero-badge { display: inline-block; background-color: rgba(255, 255, 255, 0.3); padding: 8px 16px; border-radius: 20px; font-weight: 500; margin-bottom: 25px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--texto); transition: var(--transition); } [data-theme="dark"] .hero-badge { background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 0, 0, 0.2); } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } [data-theme="dark"] .hero::before { background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); } .hero-content { position: relative; z-index: 1; } .hero-title { font-size: 3.5rem; font-weight: bold; margin-bottom: 20px; color: var(--texto); transition: var(--transition); } .hero-subtitle { font-size: 1.5rem; margin-bottom: 30px; color: var(--texto); transition: var(--transition); } .typed-cursor { color: var(--rosa-escuro); transition: var(--transition); } .hero-image { position: relative; } .hero-image img { width: 90%; height: 100%; object-fit: cover; object-position: center; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; } [data-theme="dark"] .hero-image img { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); filter: brightness(0.8); } /* Efeito de zoom e elevação ao passar o mouse */ .hero-image img:hover { transform: scale(1.1); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .hero-image img:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); } /******************************************** * Animações ********************************************/ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate { animation: fadeInUp 1s ease; } [data-aos="fade-up"] { opacity: 0; transition: opacity 1s ease-out; } [data-aos="fade-up"].aos-animate { opacity: 1; transform: translateY(0); } /******************************************** * Cards de Habilidades ********************************************/ .skill-card { background-color: var(--card-bg); border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.3s; height: 100%; border-bottom: 5px solid transparent; } [data-theme="dark"] .skill-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .skill-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2); border-bottom: 5px solid var(--rosa-escuro); } [data-theme="dark"] .skill-card:hover { box-shadow: 0 15px 40px rgba(148, 43, 71, 0.2); } .skill-icon { width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 34px; background-color: var(--rosa-claro); color: var(--rosa-escuro); border-radius: 50%; margin-bottom: 20px; transition: all 0.3s; } .skill-card:hover .skill-icon { background-color: var(--rosa-escuro); color: white; transform: rotateY(180deg); } .skill-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 15px; color: var(--texto); transition: var(--transition); } /******************************************** * Cards de Projetos ********************************************/ .project-card { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); margin-bottom: 30px; position: relative; transition: all 0.3s; } [data-theme="dark"] .project-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .project-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2); } [data-theme="dark"] .project-card:hover { box-shadow: 0 15px 40px rgba(148, 43, 71, 0.2); } .project-image { height: 250px; overflow: hidden; } .project-image img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s; } [data-theme="dark"] .project-image img { filter: brightness(0.8); } .project-card:hover .project-image img { transform: scale(1.1); } .project-content { padding: 20px; background-color: var(--card-bg); transition: var(--transition); } .project-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 10px; color: var(--texto); transition: var(--transition); } .project-tags { display: flex; flex-wrap: wrap; margin-bottom: 15px; } .project-tag { background-color: var(--rosa-claro); color: var(--texto); font-size: 0.8rem; padding: 5px 10px; border-radius: 20px; margin-right: 10px; margin-bottom: 10px; transition: var(--transition); } /******************************************** * Timeline de Experiência ********************************************/ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } .timeline::after { content: ''; position: absolute; width: 6px; background-color: var(--rosa-claro); top: 0; bottom: 0; left: 50%; margin-left: -3px; border-radius: 10px; transition: var(--transition); } .timeline-item { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; } .timeline-item:nth-child(odd) { left: 0; } .timeline-item:nth-child(even) { left: 50%; } .timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--rosa-escuro); border: 4px solid var(--rosa-claro); top: 20px; border-radius: 50%; z-index: 1; transition: var(--transition); } .timeline-item:nth-child(odd)::after { right: -10px; } .timeline-item:nth-child(even)::after { left: -10px; } .timeline-content { padding: 20px 30px; background-color: var(--card-bg); position: relative; border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: all 0.3s; } [data-theme="dark"] .timeline-content { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2); } [data-theme="dark"] .timeline-content:hover { box-shadow: 0 15px 40px rgba(148, 43, 71, 0.2); } .timeline-date { color: var(--rosa-escuro); font-weight: bold; transition: var(--transition); } .timeline-title { font-size: 1.2rem; font-weight: bold; margin: 10px 0; color: var(--texto); transition: var(--transition); } .timeline-company { font-style: italic; margin-bottom: 15px; color: var(--texto); transition: var(--transition); } /******************************************** * Seção de Contato ********************************************/ .contact-card { background-color: var(--card-bg); border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); transition: var(--transition); } [data-theme="dark"] .contact-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .contact-info { margin-bottom: 30px; } .contact-item { display: flex; align-items: flex-start; margin-bottom: 20px; } .contact-icon { width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; background-color: var(--rosa-claro); color: var(--rosa-escuro); border-radius: 50%; margin-right: 15px; transition: all 0.3s; } .contact-item:hover .contact-icon { background-color: var(--rosa-escuro); color: white; transform: rotateY(180deg); } .form-control { border: 2px solid var(--rosa-claro); padding: 15px; margin-bottom: 20px; border-radius: 10px; transition: all 0.3s; background-color: var(--card-bg); color: var(--texto); } .form-control:focus { border-color: var(--rosa-escuro); box-shadow: 0 0 0 0.25rem rgba(255, 158, 181, 0.25); } [data-theme="dark"] .form-control:focus { box-shadow: 0 0 0 0.25rem rgba(148, 43, 71, 0.25); } /******************************************** * Footer ********************************************/ footer { background-color: var(--rosa-bebe); padding: 40px 0 20px; color: var(--texto); transition: var(--transition); } .social-links { display: flex; justify-content: center; margin-bottom: 20px; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--branco); color: var(--rosa-escuro); border-radius: 50%; margin: 0 10px; font-size: 18px; transition: all 0.3s; } .social-link:hover { background-color: var(--rosa-escuro); color: white; transform: translateY(-5px); } /******************************************** * Preloader ********************************************/ .preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--rosa-bebe); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: var(--transition); } .loader { width: 60px; height: 60px; border: 8px solid var(--rosa-claro); border-top: 8px solid var(--rosa-escuro); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /******************************************** * Media Queries para Responsividade ********************************************/ @media (max-width: 992px) { .hero-title { font-size: 2.5rem; } .hero-subtitle { font-size: 1.2rem; } .timeline::after { left: 31px; } .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; } .timeline-item:nth-child(even) { left: 0; } .timeline-item:nth-child(odd)::after, .timeline-item:nth-child(even)::after { left: 15px; right: auto; } } @media (max-width: 768px) { .hero-image { margin-top: 30px; } .skill-card, .project-card, .timeline-content, .contact-card { margin-bottom: 20px; } .switch { margin: 10px auto; } } @media (max-width: 576px) { .hero { padding-top: 70px; } .hero-title { font-size: 2rem; } .section { padding: 50px 0; } .timeline-content { padding: 15px; } .contact-item { flex-direction: column; align-items: center; text-align: center; } .contact-icon { margin-right: 0; margin-bottom: 10px; } } /* Implementação de cursor personalizado tipo bolha de sabão */ body { /* Cursor padrão (estado normal) */ cursor: url('/assets/cursors/soap-bubble-normal.cur'), auto; } /* Elementos clicáveis */ a, button, input[type="button"], input[type="submit"], input[type="reset"], .navbar-toggler, .project-card, .skill-card, .switch__toggle, .nav-link, .social-link, select, option { /* Cursor para elementos interativos (estado hover) */ cursor: url('/assets/cursors/soap-bubble-pointer.cur'), pointer !important; } /* Campos de texto */ input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea { /* Cursor para campos de texto (estado de inserção) */ cursor: url('/assets/cursors/soap-bubble-text.cur'), text !important; } /* Suporte para tema escuro */ [data-theme="dark"] body, [data-theme="dark"] .navbar, [data-theme="dark"] .hero { cursor: url('/assets/cursors/soap-bubble-normal.cur'), auto; } [data-theme="dark"] a, [data-theme="dark"] button, [data-theme="dark"] .navbar-toggler, [data-theme="dark"] .project-card, [data-theme="dark"] .skill-card, [data-theme="dark"] .switch__toggle, [data-theme="dark"] .nav-link, [data-theme="dark"] .social-link { cursor: url('/assets/cursors/soap-bubble-pointer.cur'), pointer !important; } /* Fallback para navegadores sem suporte */ @supports not (cursor: url(), auto) { body { cursor: default; } a, button, .navbar-toggler, .project-card, .skill-card, .switch__toggle, .nav-link, .social-link { cursor: pointer !important; } input[type="text"], textarea { cursor: text !important; } } /* Implementação de cursor personalizado Stitch */ body { /* Cursor padrão (Stitch piscando) */ cursor: url('/assets/img/cursor-stitch-normal.png') 16 16, auto; } /* Elementos clicáveis */ a, button, input[type="button"], input[type="submit"], input[type="reset"], .navbar-toggler, .project-card, .skill-card, .switch__toggle, .nav-link, .social-link, select, option { /* Cursor para elementos interativos (Stitch com língua) */ cursor: url('/assets/img/cursor-stitch-pointer.png') 16 16, pointer !important; } /* Suporte para tema escuro */ [data-theme="dark"] body { cursor: url('/assets/img/cursor-stitch-normal.png') 16 16, auto; } [data-theme="dark"] a, [data-theme="dark"] button, [data-theme="dark"] .navbar-toggler, [data-theme="dark"] .project-card, [data-theme="dark"] .skill-card, [data-theme="dark"] .switch__toggle, [data-theme="dark"] .nav-link, [data-theme="dark"] .social-link { cursor: url('/assets/img/cursor-stitch-pointer.png') 16 16, pointer !important; } /* Fallback para navegadores sem suporte */ @supports not (cursor: url(), auto) { body { cursor: default; } a, button, .navbar-toggler, .project-card, .skill-card, .switch__toggle, .nav-link, .social-link { cursor: pointer !important; } } /** * Atualização Sutil de Esquema de Cores - Tema Stitch * Toques mínimos de azul na paleta predominantemente rosa * * Otimizado para desempenho em PHP 8.4, jQuery e Bootstrap 5 */ :root { /* Mantendo a paleta original */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; /* Cores Stitch extremamente sutis */ --stitch-azul-sutil: rgba(30, 144, 255, 0.08); --stitch-azul-hover: rgba(30, 144, 255, 0.15); /* Gradientes sutis */ --rosa-gradiente-sutil: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-claro) 92%, rgba(173, 216, 230, 0.3) 100%); --rosa-escuro-sutil: linear-gradient(135deg, var(--rosa-escuro) 0%, var(--rosa-escuro) 94%, rgba(30, 144, 255, 0.2) 100%); } /* Tema escuro com nuances mínimas de Stitch */ [data-theme="dark"] { --stitch-azul-sutil: rgba(10, 36, 64, 0.1); --stitch-azul-hover: rgba(10, 36, 64, 0.2); } /* Sutis atualizações nos elementos existentes */ /* Cards com sutis toques de azul apenas nos cantos */ .skill-card:hover { box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2); border-bottom: 5px solid var(--rosa-escuro); background-image: linear-gradient(to bottom right, var(--card-bg) 85%, var(--stitch-azul-sutil)); } [data-theme="dark"] .skill-card:hover { box-shadow: 0 15px 40px rgba(148, 43, 71, 0.2); background-image: linear-gradient(to bottom right, var(--card-bg) 85%, var(--stitch-azul-sutil)); } /* Botões com sutis toques de azul apenas no hover */ .btn-rosa:hover { background-color: var(--roxo-claro); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 2px 5px var(--stitch-azul-sutil); } /* Sutil brilho azulado nos elementos de timeline */ .timeline-item::after { background-color: var(--rosa-escuro); box-shadow: 0 0 5px var(--stitch-azul-sutil); } /* Navbar com sutis degradês */ .navbar { background: linear-gradient(to right, rgba(255, 192, 203, 0.9) 80%, rgba(255, 192, 203, 0.8) 100%) !important; border-bottom: 1px solid rgba(173, 216, 230, 0.1); } [data-theme="dark"] .navbar { background: linear-gradient(to right, rgba(45, 26, 32, 0.9) 80%, rgba(45, 26, 32, 0.8) 100%) !important; border-bottom: 1px solid rgba(10, 36, 64, 0.1); } /* Sutil azul em elementos interativos no hover */ a:hover, .nav-link:hover { text-shadow: 0 0 1px var(--stitch-azul-sutil); } /* Contato ícones com sutil brilho azul no hover */ .contact-item:hover .contact-icon { background-color: var(--rosa-escuro); color: white; transform: rotateY(180deg); box-shadow: 0 0 10px var(--stitch-azul-sutil); } /* Cursor personalizado com sutil efeito de brilho */ #custom-cursor { filter: drop-shadow(0 0 3px rgba(30, 144, 255, 0.1)); } /* Sutil reflexo azulado em imagens de projeto no hover */ .project-card:hover .project-image img { transform: scale(1.1); filter: drop-shadow(0 0 5px var(--stitch-azul-sutil)); } /* Sutil destaque azul no botão de alternar tema */ .switch__toggle:checked { background-color: var(--roxo-claro); box-shadow: 0 0 5px var(--stitch-azul-sutil); } /** * Ajustes Profissionais - Portfólio * Desenvolvido com PHP 8.4, jQuery, Bootstrap 5 e MariaDB * * Adicionando toques sutis de azul para estilo corporativo */ :root { /* Cores originais */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; /* Adicionando tons profissionais de azul */ --azul-escuro: #2c3e50; --azul-medio: #34495e; --azul-claro: #3498db; --azul-sutil: rgba(52, 152, 219, 0.1); --azul-hover: rgba(52, 152, 219, 0.2); /* Gradientes revisados */ --gradient-hero: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-escuro) 100%); --gradient-hero-pro: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-escuro) 95%, var(--azul-sutil) 100%); } /* Tema escuro com toques profissionais */ [data-theme="dark"] { --rosa-bebe: #2D1A20; --rosa-claro: #3A232C; --rosa-escuro: #942B47; --roxo-claro: #522E52; --menta: #2A1A21; --branco: #1E1E1E; --texto: #E0E0E0; --background: #121212; --card-bg: #1E1E1E; /* Ajustes para tema escuro */ --azul-escuro: #1a2530; --azul-medio: #2c3e50; --azul-claro: #3498db; --azul-sutil: rgba(52, 152, 219, 0.08); --azul-hover: rgba(52, 152, 219, 0.15); --gradient-hero: linear-gradient(135deg, #2A1A21 0%, #501A2B 100%); --gradient-hero-pro: linear-gradient(135deg, #2A1A21 0%, #501A2B 95%, var(--azul-sutil) 100%); } /* Aplicando os toques sutis de azul */ /* Hero section com gradiente sutil */ .hero { background: var(--gradient-hero-pro); } /* Bordas sutis nos cards */ .skill-card { border-left: 1px solid transparent; border-right: 1px solid transparent; transition: all 0.3s ease; } .skill-card:hover { border-bottom: 5px solid var(--rosa-escuro); border-left: 1px solid var(--azul-sutil); border-right: 1px solid var(--azul-sutil); } /* Sutil borda azul nos botões */ .btn-rosa { box-shadow: 0 0 0 1px var(--azul-sutil); } .btn-rosa:hover { box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--azul-claro); } /* Timeline com toques de azul */ .timeline::after { background-image: linear-gradient(to bottom, var(--rosa-claro), var(--rosa-claro) 80%, var(--azul-sutil)); } .timeline-item::after { border: 4px solid var(--rosa-claro); box-shadow: 0 0 0 1px var(--azul-sutil); } /* Ajuste na navbar */ .navbar { background: linear-gradient(to right, rgba(255, 192, 203, 0.9) 0%, rgba(255, 192, 203, 0.9) 97%, rgba(52, 152, 219, 0.1) 100%) !important; border-bottom: 1px solid var(--azul-sutil); } [data-theme="dark"] .navbar { background: linear-gradient(to right, rgba(45, 26, 32, 0.9) 0%, rgba(45, 26, 32, 0.9) 97%, rgba(52, 152, 219, 0.05) 100%) !important; border-bottom: 1px solid rgba(52, 152, 219, 0.05); } /* Cards de projeto com toques azuis */ .project-card { position: relative; } .project-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent var(--azul-sutil) transparent transparent; transition: all 0.3s ease; opacity: 0; } .project-card:hover::before { opacity: 1; border-width: 0 40px 40px 0; } /* Sutis melhorias em formulários */ .form-control:focus { border-color: var(--rosa-escuro); box-shadow: 0 0 0 0.25rem rgba(255, 158, 181, 0.25), 0 0 0 1px var(--azul-sutil); } /* Melhoria em links de navegação */ .nav-link::after { background-color: var(--rosa-escuro); box-shadow: 0 1px 3px var(--azul-sutil); } /* Melhoria nos ícones de habilidades */ .skill-icon { position: relative; overflow: hidden; } .skill-icon::after { content: ''; position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; background-color: var(--azul-sutil); border-radius: 50%; opacity: 0; transition: all 0.3s ease; } .skill-card:hover .skill-icon::after { opacity: 1; } /* Footer com toque azul sutil */ footer { background: linear-gradient(to right, var(--rosa-bebe) 0%, var(--rosa-bebe) 97%, var(--azul-sutil) 100%); } /* Melhorias nos ícones sociais */ .social-link:hover { background-color: var(--rosa-escuro); color: white; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 0 0 2px var(--azul-sutil); } /* Toque sutil no cursor personalizado */ #custom-cursor { filter: drop-shadow(0 0 2px var(--azul-sutil)); } /* Melhoria sutil na preloader */ .loader { border: 8px solid var(--rosa-claro); border-top: 8px solid var(--rosa-escuro); border-right: 8px solid var(--azul-sutil); } /* Melhoria na animação typed.js */ .typed-cursor { color: var(--rosa-escuro); text-shadow: 0 0 5px var(--azul-sutil); } /* Melhoria sutil no switch de tema */ .switch__toggle:checked { background-color: var(--roxo-claro); box-shadow: 0 0 5px var(--azul-sutil); } /* Imagem de perfil com toque azul */ .hero-image img { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 3px var(--azul-sutil); } .hero-image img:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 5px var(--azul-sutil); } /* Ajuste sutil no scrollbar */ ::-webkit-scrollbar-thumb { background: var(--rosa-escuro); border-radius: 10px; border: 3px solid var(--rosa-claro); box-shadow: inset 0 0 3px var(--azul-sutil); } /** * Correção Final - Cursor e Cores Profissionais * Desenvolvido com PHP 8.4, jQuery, Bootstrap 5 e MariaDB */ /* Garantir que TODOS os elementos não mostrem o cursor padrão */ *, *::before, *::after { cursor: none !important; } /* Correção específica para o rodapé e seus elementos internos */ footer, footer a, footer button, .social-links, .social-link, footer p, footer div { cursor: none !important; } /* Reforço para ícones sociais e links que podem estar causando problemas */ .social-link i, .social-link:hover, .social-link svg, .social-link span { cursor: none !important; } /* Garantir que o cursor personalizado seja sempre visível */ #custom-cursor { pointer-events: none; position: fixed; z-index: 2147483647; will-change: transform; transition: transform 0.1s ease-out, background-image 0.15s ease; display: block !important; } /* Paleta de cores profissional com toques sutis de azul */ :root { /* Cores originais */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; /* Tons profissionais de azul refinados */ --azul-escuro: #2c3e50; --azul-medio: #34495e; --azul-claro: #3498db; /* Ajustes para tornar os elementos azuis mais sutis */ --azul-sutil: rgba(52, 152, 219, 0.05); --azul-hover: rgba(52, 152, 219, 0.1); --azul-borda: rgba(52, 152, 219, 0.08); /* Gradientes refinados com toques sutis */ --gradient-hero-pro: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-escuro) 98%, var(--azul-sutil) 100%); } /* Ajustes para tema escuro */ [data-theme="dark"] { --azul-sutil: rgba(52, 152, 219, 0.03); --azul-hover: rgba(52, 152, 219, 0.07); --azul-borda: rgba(52, 152, 219, 0.05); --gradient-hero-pro: linear-gradient(135deg, #2A1A21 0%, #501A2B 98%, var(--azul-sutil) 100%); } /* Aplicando toques elegantes de azul */ /* Hero section com gradiente refinado */ .hero { background: var(--gradient-hero-pro); } /* Navbar com borda azul sutil */ .navbar { background-color: rgba(255, 192, 203, 0.9) !important; border-bottom: 1px solid var(--azul-borda); } [data-theme="dark"] .navbar { background-color: rgba(45, 26, 32, 0.9) !important; border-bottom: 1px solid var(--azul-borda); } /* Cards com bordas e detalhes sutis */ .skill-card { border-left: 1px solid transparent; border-right: 1px solid transparent; } .skill-card:hover { border-bottom: 5px solid var(--rosa-escuro); border-left: 1px solid var(--azul-borda); border-right: 1px solid var(--azul-borda); box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2), 0 0 1px var(--azul-sutil); } [data-theme="dark"] .skill-card:hover { box-shadow: 0 15px 40px rgba(148, 43, 71, 0.2), 0 0 1px var(--azul-sutil); } /* Detalhes sutis nos botões */ .btn-rosa { border-bottom: 1px solid var(--azul-borda); } .btn-rosa:hover { border-bottom: 1px solid var(--azul-claro); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 1px 2px var(--azul-sutil); } /* Timeline com refinamentos */ .timeline::after { background-image: linear-gradient(to bottom, var(--rosa-claro) 95%, var(--azul-sutil)); } .timeline-item::after { box-shadow: 0 0 0 1px var(--azul-borda); } /* Pequeno detalhe no canto dos cards de projeto */ .project-card { position: relative; } .project-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 0; border-color: transparent var(--azul-sutil) transparent transparent; transition: all 0.3s ease; opacity: 0; } .project-card:hover::before { opacity: 1; } /* Pequenos detalhes nos elementos de formulário */ .form-control:focus { border-color: var(--rosa-escuro); box-shadow: 0 0 0 0.25rem rgba(255, 158, 181, 0.25), 0 0 0 1px var(--azul-sutil); } /* Detalhe sutil nos links de navegação */ .nav-link::after { background-color: var(--rosa-escuro); box-shadow: 0 0 2px var(--azul-sutil); } /* Pequeno detalhe nos ícones de habilidades */ .skill-icon::after { content: ''; position: absolute; bottom: 0; right: 0; width: 20%; height: 20%; background-color: var(--azul-sutil); border-radius: 50%; opacity: 0; transition: all 0.3s ease; } .skill-card:hover .skill-icon::after { opacity: 1; } /* Footer com borda sutil */ footer { background-color: var(--rosa-bebe); border-top: 1px solid var(--azul-borda); } /* Refinamento nos ícones sociais */ .social-link:hover { background-color: var(--rosa-escuro); color: white; transform: translateY(-5px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--azul-sutil); } /* Cursor com brilho azul muito sutil */ #custom-cursor { filter: drop-shadow(0 0 1px var(--azul-sutil)); } /* Preloader com detalhe azul */ .loader { border: 8px solid var(--rosa-claro); border-top: 8px solid var(--rosa-escuro); border-right: 8px solid var(--azul-sutil); } /* Cursor da animação de digitação */ .typed-cursor { color: var(--rosa-escuro); text-shadow: 0 0 3px var(--azul-sutil); } /* Switch de tema com brilho sutil */ .switch__toggle:checked { background-color: var(--roxo-claro); box-shadow: 0 0 3px var(--azul-sutil); } /* Imagem de perfil com borda elegante */ .hero-image img { box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--azul-borda); } .hero-image img:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--azul-borda); } /* Scrollbar com refinamento */ ::-webkit-scrollbar-thumb { background: var(--rosa-escuro); border-radius: 10px; border: 3px solid var(--rosa-claro); box-shadow: inset 0 0 2px var(--azul-sutil); } /** * Portfólio Full Stack - Tema Stitch Profissional * Desenvolvido com PHP 8.4, jQuery, Bootstrap 5 e MariaDB * * Implementação de degradês sutis no estilo Stitch * Com alta coesão e baixo acoplamento entre componentes visuais */ /* Definição da paleta de cores Stitch com tons corporativos */ :root { /* Cores base */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; /* Tons específicos do Stitch */ --stitch-azul: #62C4FF; /* Azul principal do Stitch */ --stitch-azul-claro: #9DD7FB; /* Azul claro para detalhes */ --stitch-azul-escuro: #3A8CC1; /* Azul escuro para sombras */ /* Degradês profissionais */ --degrade-navbar: linear-gradient(to right, var(--rosa-escuro) 70%, var(--stitch-azul) 130%); --degrade-footer: linear-gradient(to right, var(--rosa-bebe) 70%, var(--stitch-azul-claro) 130%); --degrade-card: linear-gradient(to bottom right, transparent 70%, var(--stitch-azul-claro) 200%); --degrade-hero: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-escuro) 85%, var(--stitch-azul-claro) 150%); /* Transparências para efeitos sutis */ --stitch-azul-overlay: rgba(98, 196, 255, 0.07); --stitch-azul-sombra: rgba(98, 196, 255, 0.1); --stitch-azul-borda: rgba(98, 196, 255, 0.15); } /* Ajustes para tema escuro */ [data-theme="dark"] { /* Manter cores escuras originais */ --rosa-bebe: #2D1A20; --rosa-claro: #3A232C; --rosa-escuro: #942B47; --roxo-claro: #522E52; --menta: #2A1A21; /* Tons Stitch para modo escuro */ --stitch-azul: #2A81B0; --stitch-azul-claro: #3A8CC1; --stitch-azul-escuro: #1A5476; /* Degradês para tema escuro */ --degrade-navbar: linear-gradient(to right, var(--rosa-escuro) 70%, var(--stitch-azul) 130%); --degrade-footer: linear-gradient(to right, var(--rosa-bebe) 70%, var(--stitch-azul-escuro) 130%); --degrade-hero: linear-gradient(135deg, #2A1A21 0%, #501A2B 85%, var(--stitch-azul-escuro) 150%); /* Transparências para tema escuro */ --stitch-azul-overlay: rgba(42, 129, 176, 0.07); --stitch-azul-sombra: rgba(42, 129, 176, 0.1); --stitch-azul-borda: rgba(42, 129, 176, 0.15); } /* ============================================== NAVBAR - CABEÇALHO COM DEGRADÊ STITCH ============================================== */ /* Navbar com degradê de rosa para azul Stitch */ .navbar { background: var(--degrade-navbar) !important; backdrop-filter: blur(10px); border-bottom: 1px solid var(--stitch-azul-borda); } .navbar-brand { color: white !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .navbar-brand span { color: rgba(255, 255, 255, 0.9); } .nav-link { color: white !important; font-weight: 500; } .nav-link::after { background-color: white; box-shadow: 0 0 3px var(--stitch-azul-claro); } .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); } /* Alteração no switch de tema */ .switch__toggle { background-color: var(--rosa-escuro); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .switch__toggle:checked { background-color: var(--stitch-azul); } .switch__icon { color: white; } /* ============================================== HERO SECTION COM TOQUE STITCH ============================================== */ /* Seção hero com degradê sutil */ .hero { background: var(--degrade-hero); } .hero::before { background-color: var(--stitch-azul-overlay); } .hero-badge { background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 2px 10px var(--stitch-azul-overlay); } /* Destacar elementos do hero */ .hero-title { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hero-subtitle { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .typed-cursor { color: var(--stitch-azul); text-shadow: 0 0 5px var(--stitch-azul-sombra); } /* Foto com borda Stitch */ .hero-image img { border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--stitch-azul-overlay); } .hero-image img:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 4px var(--stitch-azul-borda); } /* ============================================== CARDS DE HABILIDADES STITCH ============================================== */ .skill-card { border: 1px solid transparent; background-image: var(--degrade-card); overflow: hidden; border-radius: 15px; } .skill-card:hover { border-bottom: 5px solid var(--rosa-escuro); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--stitch-azul-borda); } /* Ícones com degradê */ .skill-icon { background: linear-gradient(135deg, var(--rosa-claro) 0%, var(--rosa-claro) 80%, var(--stitch-azul-claro) 200%); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .skill-card:hover .skill-icon { background: linear-gradient(135deg, var(--rosa-escuro) 0%, var(--rosa-escuro) 80%, var(--stitch-azul) 200%); box-shadow: 0 5px 15px var(--stitch-azul-overlay); } /* Detalhe Stitch nos cards */ .skill-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; background-image: linear-gradient(135deg, transparent, var(--stitch-azul-overlay)); border-radius: 0 0 15px 0; opacity: 0; transition: opacity 0.3s ease; } .skill-card:hover::after { opacity: 1; } /* ============================================== PROJETOS COM TOQUE STITCH ============================================== */ .project-card { border: 1px solid transparent; overflow: hidden; } .project-card:hover { border: 1px solid var(--stitch-azul-borda); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); } /* Cantos Stitch nos cards de projeto */ .project-card::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 24px 24px 0; border-color: transparent var(--stitch-azul-overlay) transparent transparent; opacity: 0; transition: all 0.3s ease; z-index: 1; } .project-card:hover::before { opacity: 1; } /* Tags de projeto com estilo Stitch */ .project-tag { background-color: rgba(255, 255, 255, 0.1); border: 1px solid var(--rosa-claro); transition: all 0.3s ease; } .project-tag:hover { background-color: var(--stitch-azul-overlay); border-color: var(--stitch-azul-borda); } /* ============================================== TIMELINE COM DETALHES STITCH ============================================== */ .timeline::after { background-image: linear-gradient(to bottom, var(--rosa-claro), var(--rosa-claro) 90%, var(--stitch-azul)); } .timeline-item::after { box-shadow: 0 0 0 2px var(--stitch-azul-overlay); } .timeline-content { border: 1px solid transparent; } .timeline-content:hover { border: 1px solid var(--stitch-azul-borda); } .timeline-date { color: var(--stitch-azul); background-color: var(--stitch-azul-overlay); padding: 3px 8px; border-radius: 4px; display: inline-block; } /* ============================================== FORMULÁRIOS COM ESTILO STITCH ============================================== */ .form-control { border: 1px solid var(--rosa-claro); } .form-control:focus { border-color: var(--stitch-azul); box-shadow: 0 0 0 0.2rem var(--stitch-azul-overlay); } /* Botões com estilo Stitch */ .btn-rosa { background-color: var(--rosa-escuro); background-image: linear-gradient(135deg, var(--rosa-escuro) 0%, var(--rosa-escuro) 90%, var(--stitch-azul) 200%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .btn-rosa::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .btn-rosa:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--stitch-azul-borda); } .btn-rosa:hover::after { transform: translateX(100%); } /* ============================================== RODAPÉ COM GRADIENTE STITCH ============================================== */ footer { background: var(--degrade-footer); border-top: 1px solid var(--stitch-azul-borda); } .social-link { background-color: white; border: 1px solid rgba(0, 0, 0, 0.05); color: var(--rosa-escuro); } .social-link:hover { background-color: var(--stitch-azul); color: white; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* ============================================== COMPONENTES ADICIONAIS ============================================== */ /* Scrollbar estilizada */ ::-webkit-scrollbar-track { background: var(--rosa-claro); } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--rosa-escuro), var(--stitch-azul)); border: 3px solid var(--rosa-claro); } /* Preloader estilizado */ .preloader { background: linear-gradient(135deg, var(--rosa-bebe) 0%, var(--stitch-azul) 150%); } .loader { border: 8px solid rgba(255, 255, 255, 0.1); border-top: 8px solid var(--rosa-escuro); border-right: 8px solid var(--stitch-azul); } /* Efeito do cursor personalizado */ #custom-cursor { filter: drop-shadow(0 0 3px var(--stitch-azul-claro)); } /* ============================================== AJUSTES PARA APRIMORAR O DESEMPENHO DA PÁGINA ============================================== */ /* Otimização para hardware acceleration */ .navbar, .hero, .skill-card, .project-card, .btn-rosa, .social-link, .timeline-item, .hero-image img { will-change: transform; transform: translateZ(0); backface-visibility: hidden; } /* Aprimorar transições para melhor desempenho */ .nav-link, .social-link, .btn, .form-control, .timeline-content { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /** * Melhorias Profissionais - Portfólio Full Stack * Desenvolvido com PHP 8.4, jQuery v3, Bootstrap 5 e MariaDB * * Implementação de cabeçalho e botões profissionais com toque Stitch * Framework otimizado e autocontido com alta coesão e baixo acoplamento */ /* Definição refinada de paleta de cores */ :root { /* Base da paleta existente */ --rosa-bebe: #FFC0CB; --rosa-claro: #FFD1DC; --rosa-escuro: #FF9EB5; --roxo-claro: #D8BFD8; --menta: #ffdde5; /* Azuis do Stitch refinados */ --stitch-azul-principal: #4D97FF; /* Azul principal do Stitch */ --stitch-azul-claro: #62C4FF; /* Azul claro vibrante */ --stitch-azul-escuro: #3A72C4; /* Azul escuro para composição */ /* Cores adicionais para profissionalismo */ --stitch-azul-pastel: #B7DCFF; /* Azul pastel para detalhes sutis */ --stitch-azul-cinza: #9BB5CC; /* Azul acinzentado para texto */ --stitch-azul-profundo: #2B5B93; /* Azul profundo para destaques */ /* Novos gradientes profissionais */ --grad-header: linear-gradient(90deg, var(--rosa-escuro) 0%, var(--stitch-azul-principal) 180%); --grad-header-escuro: linear-gradient(90deg, var(--rosa-escuro) 0%, var(--stitch-azul-escuro) 180%); --grad-botao-primario: linear-gradient(to right, var(--rosa-escuro) 30%, var(--stitch-azul-principal) 200%); --grad-botao-secundario: linear-gradient(to right, var(--stitch-azul-principal) 0%, var(--stitch-azul-escuro) 100%); --grad-footer: linear-gradient(90deg, var(--rosa-bebe) 0%, var(--stitch-azul-pastel) 180%); /* Transparências otimizadas */ --stitch-overlay: rgba(77, 151, 255, 0.08); --stitch-sombra: rgba(77, 151, 255, 0.12); --stitch-borda: rgba(77, 151, 255, 0.15); } /* Ajustes para tema escuro */ [data-theme="dark"] { /* Manter as cores escuras existentes */ --rosa-bebe: #2D1A20; --rosa-claro: #3A232C; --rosa-escuro: #942B47; --roxo-claro: #522E52; --menta: #2A1A21; /* Ajustes para os tons de Stitch no tema escuro */ --stitch-azul-principal: #3A72C4; --stitch-azul-claro: #4D97FF; --stitch-azul-escuro: #2B5B93; --stitch-azul-pastel: #4B6587; --stitch-azul-cinza: #5B7999; --stitch-azul-profundo: #1A3D6C; /* Gradientes para tema escuro */ --grad-header: linear-gradient(90deg, var(--rosa-escuro) 0%, var(--stitch-azul-profundo) 180%); --grad-header-escuro: linear-gradient(90deg, var(--rosa-escuro) 0%, var(--stitch-azul-escuro) 180%); --grad-botao-primario: linear-gradient(to right, var(--rosa-escuro) 30%, var(--stitch-azul-escuro) 200%); --grad-botao-secundario: linear-gradient(to right, var(--stitch-azul-principal) 0%, var(--stitch-azul-profundo) 100%); --grad-footer: linear-gradient(90deg, var(--rosa-bebe) 0%, var(--stitch-azul-profundo) 180%); /* Transparências para tema escuro */ --stitch-overlay: rgba(58, 114, 196, 0.1); --stitch-sombra: rgba(58, 114, 196, 0.15); --stitch-borda: rgba(58, 114, 196, 0.2); } /* ====================================================== CABEÇALHO PROFISSIONAL COM ESTILO STITCH ====================================================== */ /* Navbar premium com gradiente Stitch */ .navbar { background: var(--grad-header) !important; backdrop-filter: blur(10px); padding: 15px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border-bottom: none; position: fixed; width: 100%; z-index: 1000; } /* Efeito de header compacto ao rolar */ .navbar.scrolled { padding: 8px 0; background: var(--grad-header-escuro) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); } /* Refinamentos para o container do navbar */ .navbar .container { display: flex; align-items: center; justify-content: space-between; } /* Brand com aparência premium */ .navbar-brand { color: white !important; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: flex; align-items: center; padding: 0; } .navbar-brand span { color: rgba(255, 255, 255, 0.85); font-weight: 300; font-size: 0.9rem; margin-left: 8px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.3); } /* Menu de navegação aprimorado */ .navbar-nav { gap: 8px; } .nav-item { position: relative; } .nav-link { color: white !important; font-weight: 500; padding: 8px 16px; border-radius: 6px; transition: all 0.3s ease; } .nav-link:hover { background-color: rgba(255, 255, 255, 0.1); } .nav-link::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; background-color: white; border-radius: 50%; transform: translateX(-50%) scale(0); transition: transform 0.3s ease; box-shadow: 0 0 10px var(--stitch-azul-claro); } .nav-link:hover::after { transform: translateX(-50%) scale(1); box-shadow: 0 0 15px var(--stitch-azul-claro); } /* Toggle de navegação mobile */ .navbar-toggler { border: none; padding: 8px; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border-radius: 8px; } .navbar-toggler:focus { box-shadow: none; outline: none; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Switch de tema refinado */ .switch { margin-left: 20px; } .switch__toggle { width: 56px; height: 28px; border-radius: 30px; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(5px); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .switch__toggle:checked { background-color: var(--stitch-azul-principal); border-color: rgba(255, 255, 255, 0.3); } .switch__toggle:before { width: 20px; height: 20px; background-color: white; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .switch__toggle:checked:before { transform: translateX(28px); } .switch__icon { font-size: 10px; color: white; } /* ====================================================== BOTÕES PROFISSIONAIS COM ESTILO STITCH ====================================================== */ /* Base para todos os botões */ .btn { border-radius: 8px; border: none; font-weight: 500; padding: 10px 24px; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; letter-spacing: 0.5px; } /* Botão primário - Rosa com Azul Stitch */ .btn-rosa { background-image: var(--grad-botao-primario); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); border: none; } .btn-rosa::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.8s ease; z-index: -1; } .btn-rosa:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); background-image: var(--grad-botao-primario); } .btn-rosa:hover::before { transform: translateX(100%); } .btn-rosa:active { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } /* Botão secundário - Azul Stitch */ .btn-stitch { background-image: var(--grad-botao-secundario); color: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .btn-stitch::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15), transparent); transform: translateX(-100%); transition: transform 0.8s ease; z-index: -1; } .btn-stitch:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); } .btn-stitch:hover::before { transform: translateX(100%); } .btn-stitch:active { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); } /* Botão outline */ .btn-outline-dark { border: 2px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.05); color: white; backdrop-filter: blur(5px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .btn-outline-dark:hover { background-color: var(--stitch-azul-principal); border-color: var(--stitch-azul-principal); color: white; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); } /* ====================================================== SEÇÃO HERO MELHORADA ====================================================== */ .hero { background: var(--grad-header); padding-top: 100px; position: relative; overflow: hidden; } /* Adicionar detalhes Stitch ao hero */ .hero::after { content: ''; position: absolute; bottom: 0; right: 0; width: 300px; height: 300px; background-image: linear-gradient(135deg, transparent 50%, var(--stitch-overlay) 100%); border-radius: 50% 0 0 0; opacity: 0.5; z-index: 0; } .hero-content { position: relative; z-index: 2; } .hero-title { color: white; font-weight: 800; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); letter-spacing: -0.5px; margin-bottom: 15px; } .hero-subtitle { color: rgba(255, 255, 255, 0.9); font-weight: 500; margin-bottom: 20px; } .typed-text { color: var(--stitch-azul-claro); font-weight: 700; } .typed-cursor { color: var(--stitch-azul-claro); } /* Badge com estilo Stitch */ .hero-badge { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); color: white; font-weight: 500; padding: 8px 16px; border-radius: 30px; } /* Melhoria na foto de perfil */ .hero-image { position: relative; } .hero-image::before { content: ''; position: absolute; top: -10%; right: -10%; width: 80%; height: 80%; background-image: linear-gradient(135deg, var(--stitch-azul-claro) 0%, var(--stitch-azul-principal) 100%); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; opacity: 0.1; z-index: -1; animation: pulse 6s ease-in-out infinite alternate; } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .hero-image img { border: 3px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); } .hero-image img:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--stitch-azul-principal); } /* Espaçamento para os botões */ .hero-content .d-flex { gap: 15px; } /* ====================================================== REFINAMENTOS ADICIONAIS PARA CONSISTÊNCIA VISUAL ====================================================== */ /* Cards com detalhe Stitch */ .skill-card, .project-card, .timeline-content, .contact-card { border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-radius: 12px; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; } .skill-card::after, .project-card::after, .timeline-content::after, .contact-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent var(--stitch-overlay) transparent; transition: all 0.3s ease; opacity: 0; } .skill-card:hover::after, .project-card:hover::after, .timeline-content:hover::after, .contact-card:hover::after { opacity: 1; border-width: 0 0 40px 40px; } /* Footer refinado */ footer { background: var(--grad-footer); padding: 60px 0 30px; position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, var(--rosa-escuro) 0%, var(--stitch-azul-principal) 100%); } .social-link { background-color: var(--branco); color: var(--rosa-escuro); width: 42px; height: 42px; border-radius: 50%; margin: 0 10px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .social-link:hover { background-image: linear-gradient(135deg, var(--rosa-escuro) 0%, var(--stitch-azul-principal) 100%); color: white; transform: translateY(-8px) rotate(360deg); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15); } /* Ícones mais profissionais */ .skill-icon, .contact-icon { display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .skill-icon::before, .contact-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3)); opacity: 0; transition: opacity 0.3s ease; } .skill-card:hover .skill-icon::before, .contact-item:hover .contact-icon::before { opacity: 1; } /** * Botão Ver Projetos Stitch Refinado * Otimizado para Bootstrap 5 e compatível com o tema Tabler.io * * Implementação com princípios de alta coesão e baixo acoplamento */ /* Estilo do botão "Ver Projetos" refinado */ .btn-ver-projetos { background-image: linear-gradient(to right, #62C4FF 0%, #3A72C4 100%); color: white; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 500; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 15px rgba(58, 114, 196, 0.25); transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); letter-spacing: 0.5px; text-transform: none; } /* Efeito de brilho no hover */ .btn-ver-projetos::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); transition: transform 0.6s ease; z-index: -1; } .btn-ver-projetos:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(58, 114, 196, 0.3); color: white; } .btn-ver-projetos:hover::before { transform: translateX(100%); } .btn-ver-projetos:active { transform: translateY(-1px); box-shadow: 0 5px 15px rgba(58, 114, 196, 0.25); } /* Efeito de ícone sutil */ .btn-ver-projetos::after { content: '\f138'; /* FontAwesome icon - chevron-circle-right */ font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) translateX(20px); opacity: 0; transition: all 0.3s ease; } .btn-ver-projetos:hover::after { transform: translateY(-50%) translateX(0); opacity: 1; } .btn-ver-projetos:hover { padding-right: 44px; } /* Tema escuro */ [data-theme="dark"] .btn-ver-projetos { background-image: linear-gradient(to right, #3A72C4 0%, #2B5B93 100%); box-shadow: 0 4px 15px rgba(43, 91, 147, 0.25); } [data-theme="dark"] .btn-ver-projetos:hover { box-shadow: 0 8px 25px rgba(43, 91, 147, 0.3); } /** * HTML de implementação: * * Ver Projetos */ /** * Refinamentos Avançados - Portfólio Full Stack * * Framework visual otimizado para PHP 8.4, jQuery v3, Bootstrap 5 com Tabler.io * Implementação com alta coesão, baixo acoplamento e excelente performance * * @author Nayara Vieira * @version 1.0.0 * @license MIT */ /* ============================================================ INDICADORES DE TECNOLOGIA E PERFORMANCE ============================================================ */ /* Mini badges de tecnologia para cards de projeto */ .tech-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-right: 6px; margin-bottom: 6px; background-color: var(--stitch-azul-claro); color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .tech-badge-php { background-color: #8892BF; /* Cor oficial do PHP */ } .tech-badge-mariadb { background-color: #C0765A; /* Cor oficial do MariaDB */ } .tech-badge-jquery { background-color: #0769AD; /* Cor oficial do jQuery */ } .tech-badge-docker { background-color: #2496ED; /* Cor oficial do Docker */ } .tech-badge-bootstrap { background-color: #7952B3; /* Cor oficial do Bootstrap */ } /* Indicadores de performance para projetos */ .performance-indicator { display: inline-flex; align-items: center; font-size: 12px; margin-right: 15px; color: #6c757d; } .performance-indicator i { margin-right: 5px; color: var(--stitch-azul-principal); } .performance-indicator-high i { color: #10b981; /* Verde para performance alta */ } /* ============================================================ EFEITOS DE CODE SNIPPET PARA DETALHES TÉCNICOS ============================================================ */ /* Code snippet para detalhes técnicos */ .code-snippet { position: relative; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; line-height: 1.5; background-color: #282a36; /* Dracula theme */ color: #f8f8f2; border-radius: 8px; padding: 16px; margin: 20px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); overflow: hidden; } /* Barra de título do snippet de código */ .code-snippet::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(to right, #3c4556, #2c3e50); border-radius: 8px 8px 0 0; } /* Botões do snippet de código */ .code-snippet::after { content: ''; position: absolute; top: 10px; left: 15px; width: 12px; height: 12px; background-color: #ff5f56; /* Botão vermelho */ border-radius: 50%; box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f; /* Botões amarelo e verde */ } .code-snippet-content { margin-top: 20px; position: relative; } /* Destaque de sintaxe para PHP */ .code-snippet .keyword { color: #ff79c6; /* Rosa para palavras-chave */ } .code-snippet .function { color: #50fa7b; /* Verde para funções */ } .code-snippet .string { color: #f1fa8c; /* Amarelo para strings */ } .code-snippet .variable { color: #8be9fd; /* Ciano para variáveis */ } .code-snippet .comment { color: #6272a4; /* Azul acinzentado para comentários */ } .code-snippet .type { color: #bd93f9; /* Roxo para tipos */ } /* ============================================================ DIAGRAMA DE ARQUITETURA SIMPLIFICADO ============================================================ */ .architecture-diagram { width: 100%; background-color: #f8f9fa; border-radius: 8px; padding: 20px; margin: 30px 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } [data-theme="dark"] .architecture-diagram { background-color: #1e2126; } .architecture-layers { display: flex; flex-direction: column; gap: 10px; } .architecture-layer { padding: 12px; border-radius: 6px; background-color: white; border-left: 4px solid var(--stitch-azul-principal); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); position: relative; } [data-theme="dark"] .architecture-layer { background-color: #2a2e35; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .architecture-layer-title { font-weight: 600; margin-bottom: 5px; color: var(--stitch-azul-principal); display: flex; align-items: center; } .architecture-layer-title i { margin-right: 8px; } .architecture-layer-description { font-size: 14px; color: #6c757d; } [data-theme="dark"] .architecture-layer-description { color: #adb5bd; } .architecture-component { display: inline-block; margin: 5px; padding: 5px 10px; background-color: var(--stitch-azul-overlay); border-radius: 4px; font-size: 12px; } /* ============================================================ ESTILO DE TABELA PARA DADOS TÉCNICOS ============================================================ */ .tech-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 25px 0; font-size: 14px; } .tech-table th, .tech-table td { border: none; padding: 12px 15px; text-align: left; } .tech-table th { background-color: var(--stitch-azul-principal); color: white; font-weight: 600; letter-spacing: 0.5px; } .tech-table th:first-child { border-top-left-radius: 8px; } .tech-table th:last-child { border-top-right-radius: 8px; } .tech-table tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.02); } [data-theme="dark"] .tech-table tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.05); } .tech-table tr:hover { background-color: var(--stitch-azul-overlay); } .tech-table td { border-top: 1px solid rgba(0, 0, 0, 0.05); } [data-theme="dark"] .tech-table td { border-top: 1px solid rgba(255, 255, 255, 0.05); } /* ============================================================ ESTILO PARA DETALHES DE COMMITS E VERSIONAMENTO ============================================================ */ .commit-history { background-color: #f8f9fa; border-radius: 8px; padding: 15px; margin: 20px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } [data-theme="dark"] .commit-history { background-color: #2a2e35; } .commit-item { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: flex-start; } [data-theme="dark"] .commit-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .commit-hash { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 12px; padding: 2px 6px; background-color: #e9ecef; border-radius: 4px; margin-right: 10px; color: #6c757d; } [data-theme="dark"] .commit-hash { background-color: #343a40; color: #adb5bd; } .commit-message { font-size: 14px; flex-grow: 1; } .commit-author { font-size: 12px; color: #6c757d; margin-left: 10px; } /* ============================================================ ESTILO PARA ESTATÍSTICAS DE PROJETO ============================================================ */ .project-stats { display: flex; flex-wrap: wrap; gap: 15px; margin: 20px 0; } .stat-card { flex: 1; min-width: 150px; background-color: #fff; border-radius: 8px; padding: 15px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); text-align: center; position: relative; overflow: hidden; } [data-theme="dark"] .stat-card { background-color: #2a2e35; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--stitch-azul-principal); } .stat-value { font-size: 24px; font-weight: 700; color: var(--stitch-azul-principal); margin-bottom: 5px; } .stat-label { font-size: 12px; color: #6c757d; text-transform: uppercase; letter-spacing: 1px; } /* ============================================================ APRIMORAMENTOS PARA DETALHES DE PROJETOS ============================================================ */ /* Estilo para detalhes de tecnologia */ .tech-stack { margin-bottom: 20px; } .tech-stack-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--texto); letter-spacing: 0.5px; } .tech-stack-items { display: flex; flex-wrap: wrap; gap: 10px; } .tech-item { display: flex; align-items: center; padding: 5px 12px; background-color: rgba(0, 0, 0, 0.03); border-radius: 20px; font-size: 12px; } [data-theme="dark"] .tech-item { background-color: rgba(255, 255, 255, 0.05); } .tech-item i { margin-right: 5px; font-size: 14px; color: var(--stitch-azul-principal); } /* Barra de progresso para skills */ .skill-progress { height: 6px; background-color: rgba(0, 0, 0, 0.05); border-radius: 3px; margin-top: 10px; position: relative; overflow: hidden; } [data-theme="dark"] .skill-progress { background-color: rgba(255, 255, 255, 0.05); } .skill-progress-bar { height: 100%; background-image: linear-gradient(to right, var(--rosa-escuro), var(--stitch-azul-principal)); border-radius: 3px; position: relative; } .skill-progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); animation: progress-shine 2s infinite; } @keyframes progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Timeline refinada para projetos */ .project-timeline { position: relative; margin: 20px 0; padding-left: 30px; } .project-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background-image: linear-gradient(to bottom, var(--rosa-escuro), var(--stitch-azul-principal)); } .timeline-step { position: relative; padding-bottom: 20px; } .timeline-step::before { content: ''; position: absolute; top: 6px; left: -24px; width: 12px; height: 12px; border-radius: 50%; background-color: white; border: 2px solid var(--stitch-azul-principal); z-index: 1; } .timeline-step-title { font-weight: 600; margin-bottom: 5px; color: var(--texto); } .timeline-step-description { font-size: 14px; color: #6c757d; } /* ============================================================ ANIMAÇÕES REFINADAS PARA ELEMENTOS INTERATIVOS ============================================================ */ /* Animação de entrada para os cards */ .animated-card { animation: card-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation-delay: calc(var(--animation-order) * 0.1s); } @keyframes card-reveal { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } /* Animação para ícones de habilidades */ .skill-icon { animation: icon-pulse 2s ease-in-out infinite alternate; animation-delay: calc(var(--animation-order) * 0.2s); } @keyframes icon-pulse { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } /* Animação de highlight para texto importante */ .highlight-text { position: relative; display: inline-block; } .highlight-text::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.3em; background-color: var(--stitch-azul-overlay); z-index: -1; transform-origin: bottom left; transform: scaleX(0); transition: transform 0.3s ease; } .highlight-text:hover::before { transform: scaleX(1); } /* ============================================================ ELEMENTOS DE FRONTEND INTERATIVOS PARA DEMONSTRAR HABILIDADES ============================================================ */ /* Toggle para esconder/mostrar detalhes técnicos */ .tech-details-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px; background-color: #f8f9fa; border: none; border-radius: 8px; cursor: pointer; margin: 20px 0 10px; transition: all 0.3s ease; } [data-theme="dark"] .tech-details-toggle { background-color: #2a2e35; } .tech-details-toggle:hover { background-color: var(--stitch-azul-overlay); } .tech-details-toggle-text { font-weight: 600; color: var(--texto); } .tech-details-toggle-icon { transition: transform 0.3s ease; } .tech-details-toggle.active .tech-details-toggle-icon { transform: rotate(180deg); } .tech-details-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .tech-details-content.visible { max-height: 1000px; } /* Tooltip para termos técnicos */ .tech-term { position: relative; display: inline-block; border-bottom: 1px dashed var(--stitch-azul-principal); cursor: help; } .tech-term:hover::before { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background-color: #333; color: white; text-align: center; padding: 8px 12px; border-radius: 4px; width: max-content; max-width: 300px; font-size: 12px; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .tech-term:hover::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #333 transparent transparent transparent; z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .tech-term:hover::before, .tech-term:hover::after { visibility: visible; opacity: 1; } /* Estilos para links de contato direto */ .contact-item-direct { padding: 30px 20px; border-radius: 15px; background-color: var(--card-bg); transition: all 0.3s; height: 100%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } .contact-item-direct:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(255, 158, 181, 0.2); } .contact-item-direct .contact-icon { width: 70px; height: 70px; line-height: 70px; text-align: center; font-size: 30px; background-color: var(--rosa-claro); color: var(--rosa-escuro); border-radius: 50%; margin: 0 auto 20px; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .contact-item-direct:hover .contact-icon { background-color: var(--rosa-escuro); color: white; transform: rotateY(180deg); } /* Estilos para links de redes sociais maiores */ .social-links-big { margin-top: 40px; } .social-link-big { display: inline-flex; flex-direction: column; align-items: center; padding: 15px; border-radius: 10px; color: var(--rosa-escuro); font-size: 16px; transition: all 0.3s; width: 120px; text-decoration: none; } .social-link-big i { font-size: 32px; margin-bottom: 10px; } .social-link-big:hover { background-color: var(--rosa-escuro); color: white; transform: translateY(-5px); text-decoration: none; } [data-theme="dark"] .social-link-big:hover { background-color: var(--rosa-escuro); } /* Estilo para itens da timeline com bullets */ .timeline-content ul { padding-left: 20px; list-style-type: circle; } .timeline-content ul li { margin-bottom: 8px; color: var(--texto); text-align: left; } /* Estilos para a seção de experiência aprimorada */ /* Card principal de experiência */ .experience-card { background-color: var(--card-bg); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); padding: 40px; margin-bottom: 50px; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .experience-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); transform: translateY(-10px); } /* Efeito sutil de detalhe no canto */ .experience-card::after { content: ''; position: absolute; bottom: 0; right: 0; width: 100px; height: 100px; background: linear-gradient(135deg, transparent 50%, var(--rosa-claro) 50%); opacity: 0.1; border-radius: 0 0 20px 0; pointer-events: none; } .experience-card-left { padding-right: 30px; border-right: 1px dashed var(--rosa-claro); display: flex; flex-direction: column; align-items: center; text-align: center; } .experience-card-right { padding-left: 30px; } /* Logo da empresa */ .company-logo-container { margin-bottom: 20px; position: relative; } .company-logo { width: 100px; height: 100px; background: linear-gradient(135deg, var(--rosa-escuro) 0%, var(--roxo-claro) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 36px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; } .company-logo::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; background: linear-gradient(to right, var(--rosa-claro), transparent); border-radius: 50%; z-index: -1; opacity: 0.5; animation: rotate 5s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .company-name { font-size: 24px; font-weight: 700; margin: 15px 0; color: var(--rosa-escuro); } .experience-period { color: var(--texto); margin-bottom: 15px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .experience-period i { margin-right: 8px; color: var(--rosa-escuro); } .experience-duration .badge { background-color: var(--rosa-escuro); color: white; font-size: 14px; padding: 8px 15px; border-radius: 50px; box-shadow: 0 5px 15px rgba(255, 158, 181, 0.3); } /* Destaque do projeto sofIA */ .project-highlight { background-color: rgba(255, 158, 181, 0.1); border-radius: 12px; padding: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; transition: all 0.3s ease; } .project-highlight:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .project-badge { margin-bottom: 10px; } .project-badge span { background-color: var(--rosa-escuro); color: white; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px; } .project-name h4 { font-size: 22px; font-weight: 700; color: var(--rosa-escuro); margin-bottom: 0; } /* Título da posição */ .position-title { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid var(--rosa-claro); } .position-title h3 { font-size: 28px; font-weight: 700; margin-bottom: 15px; color: var(--rosa-escuro); position: relative; display: inline-block; } .position-title h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 3px; background-color: var(--rosa-escuro); } /* Badges de tecnologias */ .tech-stack-indicator { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; } .tech-badge { display: inline-flex; align-items: center; background-color: rgba(255, 158, 181, 0.1); border: 1px solid var(--rosa-claro); border-radius: 50px; padding: 6px 15px; font-size: 14px; color: var(--texto); transition: all 0.3s ease; } .tech-badge i { margin-right: 8px; color: var(--rosa-escuro); } .tech-badge:hover { background-color: var(--rosa-escuro); color: white; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 158, 181, 0.3); } .tech-badge:hover i { color: white; } /* Lista de responsabilidades */ .responsibilities h4, .project-details h4 { font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--texto); position: relative; display: inline-block; padding-bottom: 10px; } .responsibilities h4::after, .project-details h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(to right, var(--rosa-escuro), transparent); } .responsibilities ul { list-style: none; padding: 0; margin: 0; } .responsibilities ul li { margin-bottom: 20px; } .responsibility-item { display: flex; background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; position: relative; overflow: hidden; } [data-theme="dark"] .responsibility-item { background-color: rgba(255, 255, 255, 0.05); } .responsibility-item::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(to bottom, var(--rosa-escuro), var(--roxo-claro)); border-radius: 5px 0 0 5px; } .responsibility-item:hover { transform: translateX(5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } /* Item de QA com estilo especial */ .qa-process-item::before { background: linear-gradient(to bottom, #3498db, var(--rosa-escuro)); } .qa-process-item .responsibility-icon { background-color: rgba(52, 152, 219, 0.2); color: #3498db; } .qa-process-item:hover .responsibility-icon { background-color: #3498db; color: white; } .responsibility-icon { background-color: var(--rosa-claro); width: 50px; height: 50px; min-width: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 20px; color: var(--rosa-escuro); font-size: 20px; transition: all 0.3s ease; } .responsibility-item:hover .responsibility-icon { background-color: var(--rosa-escuro); color: white; transform: rotateY(180deg); } .responsibility-content h5 { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: var(--rosa-escuro); } .responsibility-content p { margin-bottom: 0; color: var(--texto); font-size: 15px; line-height: 1.6; } /* Detalhes do projeto sofIA */ .project-details { margin-top: 40px; } .project-card { background-color: rgba(52, 152, 219, 0.05); border-radius: 15px; overflow: hidden; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; border: 1px solid rgba(52, 152, 219, 0.2); } .project-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .project-card-header { background: linear-gradient(to right, var(--rosa-escuro), #3498db); padding: 15px 20px; color: white; display: flex; align-items: center; } .project-icon { width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-size: 20px; } .project-type { font-weight: 600; font-size: 18px; letter-spacing: 0.5px; } .project-card-content { padding: 20px; } .project-card-content p { color: var(--texto); font-size: 15px; line-height: 1.7; margin-bottom: 20px; } /* Fluxo de trabalho QA */ .workflow-steps { display: flex; align-items: center; justify-content: space-between; padding: 20px 0 10px; flex-wrap: wrap; } .workflow-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; text-align: center; } .workflow-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--rosa-escuro), #3498db); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 20px; margin-bottom: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .workflow-step:hover .workflow-icon { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .workflow-step span { font-size: 14px; font-weight: 600; color: var(--texto); } .workflow-separator { height: 2px; background: linear-gradient(to right, var(--rosa-claro), #3498db); flex-grow: 1; margin: 0 5px; position: relative; top: -15px; max-width: 50px; } /* Barras de progresso de tecnologias */ .tech-stack-container { margin-top: 50px; background-color: var(--card-bg); border-radius: 20px; padding: 30px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; } .tech-stack-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, var(--rosa-escuro), #3498db); } .tech-progress-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; } .tech-progress-item { background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; } [data-theme="dark"] .tech-progress-item { background-color: rgba(255, 255, 255, 0.05); } .tech-progress-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .tech-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .tech-name { font-weight: 600; color: var(--texto); display: flex; align-items: center; } .tech-name i { margin-right: 8px; color: var(--rosa-escuro); font-size: 18px; } .tech-percentage { font-weight: 700; color: var(--rosa-escuro); } .tech-progress-bar { height: 10px; background-color: rgba(0, 0, 0, 0.05); border-radius: 5px; overflow: hidden; } [data-theme="dark"] .tech-progress-bar { background-color: rgba(255, 255, 255, 0.1); } .tech-progress-fill { height: 100%; background: linear-gradient(to right, var(--rosa-escuro), #3498db); border-radius: 5px; position: relative; overflow: hidden; animation: progressAnimation 1.5s ease-in-out; } @keyframes progressAnimation { 0% { width: 0; } } .tech-progress-fill::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Media queries para responsividade */ @media (max-width: 992px) { .experience-card { padding: 30px; } .experience-card-left { border-right: none; border-bottom: 1px dashed var(--rosa-claro); padding-right: 0; padding-bottom: 30px; margin-bottom: 30px; } .experience-card-right { padding-left: 0; } .tech-progress-container { grid-template-columns: 1fr; } .workflow-steps { flex-wrap: wrap; justify-content: center; } .workflow-step { margin: 10px 20px; } .workflow-separator { display: none; } } @media (max-width: 768px) { .tech-stack-indicator { justify-content: center; } .responsibility-item { flex-direction: column; } .responsibility-icon { margin-right: 0; margin-bottom: 15px; } .project-card-header { flex-direction: column; text-align: center; } .project-icon { margin-right: 0; margin-bottom: 10px; } } /* Corrigir inconsistência nos valores de porcentagem */ /* Remove valores incorretos de 20% e ajusta a exibição para corresponder à barra de progresso */ .tech-progress-header .tech-percentage { font-weight: 700; color: var(--rosa-escuro); display: inline-block; min-width: 40px; text-align: right; } /* Garantir que cursos personalizado funcione em todo o site */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, select, textarea, option { cursor: none !important; } /* Aprimorar exibição de projetos na seção Projects */ .project-card { height: 100%; display: flex; flex-direction: column; } .project-image { height: 220px; /* Altura fixa para todas as imagens */ } .project-content { flex: 1; display: flex; flex-direction: column; } .project-content p { flex: 1; /* Garante que os parágrafos ocupem o espaço disponível */ margin-bottom: 15px; } /* Ajuste para garantir consistência nos botões de projeto */ .project-content .btn { align-self: flex-start; margin-top: auto; } /* Melhorar o espaçamento na seção de experiência */ .responsibilities ul { padding-left: 0; } .responsibilities ul li { list-style-type: none; margin-bottom: 15px; } /* Melhorar a visualização em dispositivos móveis */ @media (max-width: 768px) { .project-image { height: 180px; } .responsibility-item { flex-direction: row; } .responsibility-icon { margin-right: 15px; margin-bottom: 0; } .tech-progress-container { display: block; } .tech-progress-item { margin-bottom: 20px; } .hero-title { font-size: 2.5rem; } } /* Melhorar o espaçamento no layout geral */ .section { padding: 100px 0; } .section:first-of-type { padding-top: 130px; } /* Ajustar os cards para garantir alinhamento correto */ .row { row-gap: 30px; } /* Ajustar as animações para melhor desempenho */ [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0); } /* Adicionar um pequeno espaço entre os cartões de habilidades */ .skill-card { margin-bottom: 10px; height: 100%; } /* Corrigir o padding para dispositivos móveis */ @media (max-width: 576px) { .section { padding: 70px 0; } .hero { padding-top: 80px; } .navbar-brand { font-size: 1.2rem; } } /* Otimizar desempenho limitando o escopo de certos efeitos */ .skill-card:hover, .project-card:hover, .social-link:hover { will-change: transform; } /* Garantir que os percentuais sejam exibidos corretamente */ .tech-progress-fill { transition: width 1s ease-in-out; } /* Botão Voltar ao Topo */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--rosa-escuro); color: white; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; z-index: 999; display: flex; align-items: center; justify-content: center; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background-color: var(--roxo-claro); transform: translateY(-5px); } .back-to-top i { font-size: 20px; } /* Ajustes para mobile */ @media (max-width: 576px) { .back-to-top { width: 40px; height: 40px; bottom: 20px; right: 20px; } .back-to-top i { font-size: 16px; } }