/* ====================================================== ENZO — PORTFOLIO · Estilos principais Arquivo: assets/css/style.css Depende de: variables.css (tokens) Índice 1. Reset & base 2. Fundo ambiente (vivo) + camadas de profundidade 3. Utilitários compartilhados (botões, tags, etc.) 4. Efeitos globais (spotlight, tilt) 5. Barra de progresso de scroll 6. Navbar (glassmorphism) 7. Hero 8. Sobre 9. Jornada (carrossel) 10. Projetos 11. Skills (categorias + status) 12. Contato 13. Footer 14. Voltar ao topo 15. Scroll reveal 16. Keyframes 17. View Transitions (troca de tema) 18. prefers-reduced-motion ====================================================== */ /* ───────────────────────────────────────────────────── 1. RESET & BASE ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.7; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: color var(--t-base); } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; } code { font-family: var(--font-mono); font-size: 0.9em; color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* Scrollbar discreta e elegante */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid var(--bg); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg); } ::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); } /* Trava o scroll enquanto a tela de carregamento está visível */ html.is-loading, html.is-loading body { overflow: hidden; } /* ───────────────────────────────────────────────────── 1b. TELA DE CARREGAMENTO (preloader) Cobre a página no boot e sai com um fade suave. Usa as cores do tema salvo (aplicado antes da pintura no ). ───────────────────────────────────────────────────── */ .preloader { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; background: var(--bg); transition: opacity 0.6s var(--ease-out), visibility 0.6s var(--ease-out); } .preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } .preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .preloader__logo { font-size: clamp(2.1rem, 6vw, 3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text); animation: preloadPulse 1.5s ease-in-out infinite; } .preloader__logo span { color: var(--accent); } .preloader__bar { position: relative; width: 190px; max-width: 60vw; height: 3px; border-radius: var(--r-full); background: var(--border-strong); overflow: hidden; } .preloader__bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 40%; border-radius: inherit; background: var(--accent-grad); animation: preloadSlide 1.1s var(--ease-out) infinite; } @keyframes preloadSlide { 0% { transform: translateX(-130%); } 100% { transform: translateX(340%); } } @keyframes preloadPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ───────────────────────────────────────────────────── 2. FUNDO AMBIENTE (vivo) + PROFUNDIDADE Camada fixa atrás de tudo: orbs desfocados que derivam lentamente, textura de grão e uma grade sutil. Só usa transform/opacity — leve e sem repaint pesado. ───────────────────────────────────────────────────── */ .bg-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--ambient-opacity); } /* Grade sutil de profundidade */ .bg-ambient::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%); opacity: 0.5; } .bg-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; } .bg-orb--1 { top: -8%; left: -6%; width: 42vw; height: 42vw; background: radial-gradient(circle, var(--accent) 0%, transparent 68%); opacity: 0.28; animation: orbDrift1 22s ease-in-out infinite; } .bg-orb--2 { top: 30%; right: -12%; width: 46vw; height: 46vw; background: radial-gradient(circle, var(--accent-2) 0%, transparent 68%); opacity: 0.22; animation: orbDrift2 28s ease-in-out infinite; } .bg-orb--3 { bottom: -14%; left: 28%; width: 40vw; height: 40vw; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.16; animation: orbDrift3 32s ease-in-out infinite; } /* Todo o conteúdo fica acima do fundo ambiente */ .navbar, main, .footer, .scroll-top { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────── 3. UTILITÁRIOS COMPARTILHADOS ───────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1.5rem; } .section { padding-block: var(--section-py); position: relative; } .section__header { text-align: center; max-width: 660px; margin: 0 auto var(--space-lg); } .section__title { font-size: var(--fs-4xl); font-weight: 800; } .section__title span { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .section__subtitle { margin-top: 1rem; font-size: var(--fs-lg); color: var(--text-2); } .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 0.85rem; } .eyebrow::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); opacity: 0.7; } /* Skip link (acessibilidade) */ .skip-link { position: fixed; top: -60px; left: 1rem; z-index: 2000; padding: 0.6rem 1rem; background: var(--accent); color: var(--accent-contrast); border-radius: var(--r-sm); font-weight: 600; transition: top var(--t-base); } .skip-link:focus { top: 1rem; } /* ── Botões ─────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.9rem 1.8rem; border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; border: 1.5px solid transparent; overflow: hidden; isolation: isolate; transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base), color var(--t-base); } /* Brilho que varre o botão no hover (microinteração premium) */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 120deg, transparent 20%, color-mix(in srgb, var(--accent-contrast) 32%, transparent) 50%, transparent 80% ); transform: translateX(-120%); transition: transform 0.6s var(--ease-out); } .btn:hover { transform: translateY(-3px); } .btn:hover::before { transform: translateX(120%); } .btn:active { transform: translateY(-1px) scale(0.98); } .btn--sm { padding: 0.62rem 1.1rem; font-size: var(--fs-xs); } /* Botão inerte (placeholder "Em breve") */ .btn.is-disabled { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); cursor: default; pointer-events: none; } .btn.is-disabled::before { display: none; } .btn--primary { background: var(--accent-grad); color: var(--accent-contrast); box-shadow: var(--shadow-accent); } .btn--primary:hover { box-shadow: 0 16px 44px var(--accent-glow); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn--ghost::before { background: linear-gradient( 120deg, transparent 20%, var(--accent-soft) 50%, transparent 80% ); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } /* ── Tags ───────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: 0.45rem; } .tag { padding: 0.3rem 0.85rem; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; transition: transform var(--t-fast), background var(--t-fast); } .tag:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 20%, transparent); } /* ── Social links ───────────────────────────────── */ .social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 1rem; transition: transform var(--t-base), color var(--t-base), border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); } .social-link:hover { transform: translateY(-4px); color: var(--accent); border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 8px 22px var(--accent-glow); } /* ── Ícone-botão (tema / paleta) ────────────────── */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 1rem; transition: color var(--t-base), border-color var(--t-base), transform var(--t-fast), background var(--t-base); } .icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .icon-btn:active { transform: scale(0.9); } /* Ícone do tema gira suavemente ao trocar */ #themeBtn i { transition: transform var(--t-slow) var(--ease-spring); } #themeBtn:hover i { transform: rotate(-25deg); } /* ── Tooltips (data-tooltip) ────────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 0.35rem 0.65rem; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast); z-index: 50; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .navbar__actions [data-tooltip]::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); } .navbar__actions [data-tooltip]:hover::after, .navbar__actions [data-tooltip]:focus-visible::after { transform: translateX(-50%) translateY(0); } /* ───────────────────────────────────────────────────── 4. EFEITOS GLOBAIS ───────────────────────────────────────────────────── */ /* ── Spotlight nos cards (segue o mouse) ───────────── O JS escreve --mx/--my (px) e adiciona .is-hovering. */ .spotlight { position: relative; } .spotlight::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: radial-gradient( 240px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 60% ); opacity: 0; pointer-events: none; transition: opacity var(--t-base); } .spotlight.is-hovering::after { opacity: 1; } /* Garante que o conteúdo do card fique acima do spotlight */ .spotlight > * { position: relative; z-index: 2; } /* ── Inclinação 3D suave em cards (data-tilt) ──────── O JS escreve o transform inline durante o hover; ao sair, o inline é limpo e o card volta com transição. */ [data-tilt] { transform-style: preserve-3d; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } @media (hover: none) { [data-tilt] { transform: none !important; } } /* ───────────────────────────────────────────────────── 5. BARRA DE PROGRESSO DE SCROLL ───────────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent-grad); z-index: calc(var(--z-nav) + 1); transition: width 0.1s linear; } /* ───────────────────────────────────────────────────── 6. NAVBAR (glassmorphism) ───────────────────────────────────────────────────── */ .navbar { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); background: transparent; border-bottom: 1px solid transparent; transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), backdrop-filter var(--t-base); } .navbar.is-scrolled { background: var(--nav-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: 1.5rem; } .logo { font-size: var(--fs-xl); font-weight: 800; color: var(--text); letter-spacing: -0.03em; transition: opacity var(--t-fast); } .logo span { color: var(--accent); } .logo:hover { opacity: 0.75; } /* Lista de navegação com "pílula" glass e indicador ativo */ .nav__list { display: flex; align-items: center; gap: 0.1rem; padding: 0.25rem; border-radius: var(--r-full); border: 1px solid transparent; transition: background var(--t-base), border-color var(--t-base); } .navbar.is-scrolled .nav__list { background: var(--surface-glass); border-color: var(--border); } .nav__link { position: relative; padding: 0.5rem 0.95rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); border-radius: var(--r-full); transition: color var(--t-base), background var(--t-base), transform var(--t-fast); } .nav__link:active { transform: scale(0.92); } .nav__link::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0); transition: transform var(--t-base) var(--ease-spring); } .nav__link:hover { color: var(--text); background: var(--accent-soft); } .nav__link.is-active { color: var(--text); background: var(--accent-soft); } .nav__link.is-active::after { transform: translateX(-50%) scale(1); } .navbar__actions { display: flex; align-items: center; gap: 0.6rem; } /* ── Troca de cor (popover) ─────────────────────── */ .color-switch { position: relative; } .color-switch__pop { position: absolute; top: calc(100% + 0.75rem); right: 0; width: 210px; padding: 1rem; background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); } .color-switch.is-open .color-switch__pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .color-switch__title { display: block; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.75rem; } .color-switch__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .swatch { aspect-ratio: 1; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: inset 0 0 0 1px var(--border); transition: transform var(--t-fast), box-shadow var(--t-fast); } .swatch:hover { transform: scale(1.15); } .swatch.is-active { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 45%, transparent); } /* ── Troca de idioma (popover) ─────────────────── */ .lang-switch { position: relative; } .icon-btn--lang { width: auto; gap: 0.4rem; padding: 0 0.7rem; font-size: 0.85rem; font-weight: 600; } /* Bandeirinha do idioma ativo (imagem local): retângulo arredondado com bordinha; a imagem preenche a caixa com object-fit: cover. */ .lang-switch__flag { display: inline-flex; flex-shrink: 0; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); } .lang-switch__flag img { width: 100%; height: 100%; object-fit: cover; display: block; } .lang-switch__current { letter-spacing: 0.04em; } .lang-switch__pop { position: absolute; top: calc(100% + 0.75rem); right: 0; width: 180px; padding: 0.5rem; background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.98); transform-origin: top right; transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); z-index: 60; } .lang-switch.is-open .lang-switch__pop { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .lang-switch__pop .color-switch__title { padding-inline: 0.5rem; } .lang-option { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.6rem; border: 0; background: none; border-radius: var(--r-sm); color: var(--text-2); font-family: inherit; font-size: var(--fs-sm); font-weight: 500; text-align: left; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .lang-option:hover { background: var(--accent-soft); color: var(--text); } .lang-option.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* Bandeirinha de cada opção do popover (mesmo estilo, um pouco maior). */ .lang-option__flag { display: inline-flex; flex-shrink: 0; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); } .lang-option__flag img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Hambúrguer ─────────────────────────────────── */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); } .hamburger span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--text); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } .hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ───────────────────────────────────────────────────── 7. HERO ───────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); position: relative; } .hero__content { max-width: 600px; } /* Entrada em cascata (stagger) — atribuída por --i no HTML */ .hero__content > *, .hero__visual { opacity: 0; transform: translateY(26px); filter: blur(8px); animation: heroIn 0.9s var(--ease-out) forwards; animation-delay: calc(0.12s * var(--i, 0) + 0.15s); } .hero__visual { --i: 2; } .hero__title { font-size: var(--fs-6xl); font-weight: 800; margin-bottom: 0.75rem; } .hero__name { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__role { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-2xl); font-weight: 300; color: var(--text-2); margin-bottom: 1.5rem; min-height: 1.6em; } .hero__role-bar { width: 34px; height: 3px; background: var(--accent); border-radius: 2px; } .hero__cursor { width: 2px; height: 1.1em; background: var(--accent); animation: blink 1s step-end infinite; } .hero__desc { font-size: var(--fs-lg); color: var(--text-2); margin-bottom: var(--space-lg); max-width: 490px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .hero__socials { display: flex; gap: 0.75rem; } /* Visual / foto */ .hero__visual { display: flex; justify-content: center; } .hero__photo-wrap { position: relative; width: min(390px, 100%); cursor: pointer; } /* Glow suave atrás da foto — acompanha o tilt e intensifica no hover */ .hero__photo-wrap::before { content: ""; position: absolute; inset: -9%; z-index: 0; background: var(--accent-grad); border-radius: 50%; filter: blur(46px); opacity: 0.18; transition: opacity var(--t-base); } .hero__photo-wrap:hover::before { opacity: 0.34; } .hero__photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-xl); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } /* Hover premium: profundidade e destaque de borda. O movimento 3D interativo (segue o mouse) vem do data-tilt (JS). */ .hero__photo-wrap:hover .hero__photo { border-color: var(--accent-border); box-shadow: var(--shadow-lg), 0 28px 56px var(--accent-glow); } .hero__chip { position: absolute; bottom: 22px; right: -16px; z-index: 3; display: flex; align-items: center; gap: 0.55rem; padding: 0.65rem 1.1rem; background: var(--surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-md); transition: transform var(--t-base); } .hero__photo-wrap:hover .hero__chip { transform: translateY(-4px); } .hero__chip i { color: var(--accent); } /* ── Foto redonda do hero (avatar do GitHub) ───────── Sobrescreve o formato retangular por um círculo com um anel de destaque que acompanha o tilt e brilha no hover. */ .hero__photo-wrap--round { width: min(420px, 100%); aspect-ratio: 1; display: grid; place-items: center; } .hero__photo--round { width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 50%; border-width: 4px; } /* Anel de destaque desenhado com máscara radial (só a borda externa). */ .hero__photo-ring { position: absolute; inset: -7px; z-index: 0; border-radius: 50%; background: var(--accent-grad); opacity: 0.55; -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px) ); mask: radial-gradient( farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px) ); transition: opacity var(--t-base); } .hero__photo-wrap--round:hover .hero__photo-ring { opacity: 0.9; } .scroll-cue { position: absolute; bottom: 1.75rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-2); font-size: 0.8rem; animation: bounce 2.2s ease-in-out infinite; transition: color var(--t-base), border-color var(--t-base); } .scroll-cue:hover { color: var(--accent); border-color: var(--accent); } /* ───────────────────────────────────────────────────── 8. SOBRE ───────────────────────────────────────────────────── */ .sobre { background: var(--bg-alt); } .sobre__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; width: 100%; } .sobre__media { display: flex; justify-content: center; } .sobre__photo-wrap { position: relative; width: min(360px, 100%); } .sobre__glow { position: absolute; inset: -12%; z-index: 0; background: var(--accent-grad); border-radius: var(--r-xl); filter: blur(42px); opacity: 0.26; } .sobre__photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: var(--r-xl); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); } .sobre__badge { position: absolute; z-index: 2; bottom: -18px; right: -18px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 116px; height: 116px; background: var(--accent-grad); color: var(--accent-contrast); border-radius: var(--r-lg); text-align: center; box-shadow: var(--shadow-accent); } .sobre__badge strong { font-size: var(--fs-3xl); font-weight: 800; line-height: 1; } .sobre__badge span { font-size: 0.7rem; font-weight: 500; opacity: 0.9; margin-top: 0.25rem; } .sobre__text { color: var(--text-2); margin-bottom: 1.15rem; max-width: 56ch; font-size: var(--fs-lg); } .sobre__text strong { color: var(--text); font-weight: 600; } /* Citação / destaque */ .sobre__quote { margin: 1.5rem 0; padding: 1rem 1.35rem; border-left: 3px solid var(--accent); background: var(--accent-softer); border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--text-2); font-style: italic; } .sobre__quote strong { color: var(--accent); font-style: normal; } /* Cards de informação rápida */ .info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin: 1.75rem 0; } .info-card { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .info-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-sm); } .info-card i { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; background: var(--accent-soft); border-radius: var(--r-sm); color: var(--accent); font-size: 0.95rem; transition: transform var(--t-base); } .info-card:hover i { transform: scale(1.12) rotate(-6deg); } .info-card strong { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; } .info-card span { font-size: var(--fs-xs); color: var(--text-muted); } .sobre__actions { display: flex; flex-wrap: wrap; gap: 1rem; } /* ───────────────────────────────────────────────────── 9. MINHA JORNADA (carrossel horizontal) ───────────────────────────────────────────────────── */ .section__header--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; max-width: none; text-align: left; margin-bottom: var(--space-lg); } .section__header--row .section__subtitle { max-width: 560px; } .journey__nav { display: flex; gap: 0.6rem; flex-shrink: 0; } .journey__btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.95rem; transition: transform var(--t-fast), color var(--t-base), border-color var(--t-base), background var(--t-base), opacity var(--t-base); } .journey__btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .journey__btn:active { transform: scale(0.9); } .journey__btn:disabled { opacity: 0.35; cursor: default; } .journey__track { display: flex; gap: 1.15rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-block: 0.75rem 1.25rem; padding-inline: max(1.5rem, calc(50% - var(--max-w) / 2 + 1.5rem)); scroll-padding-inline: max(1.5rem, calc(50% - var(--max-w) / 2 + 1.5rem)); cursor: grab; scrollbar-width: none; } .journey__track::-webkit-scrollbar { display: none; } .journey__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; } .journey__track.is-dragging .journey-card { pointer-events: none; } .journey-card { position: relative; flex: 0 0 clamp(230px, 26vw, 280px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.6rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .journey-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base); z-index: 3; } .journey-card:hover { transform: translateY(-6px); border-color: var(--accent-border); box-shadow: var(--shadow-md); } .journey-card:hover::before { transform: scaleX(1); } .journey-card__year { align-self: flex-start; padding: 0.2rem 0.7rem; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; } .journey-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-top: 0.35rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 1.4rem; transition: transform var(--t-base); } .journey-card:hover .journey-card__icon { transform: scale(1.1) rotate(-6deg); } .journey-card__icon--pulse { animation: pulseRing 2.4s ease-out infinite; } .journey-card__title { font-size: var(--fs-lg); font-weight: 700; margin-top: 0.35rem; } .journey-card__desc { font-size: var(--fs-sm); color: var(--text-2); } .journey-card--now { border-color: var(--accent-border); background: linear-gradient(135deg, var(--surface), var(--accent-softer)); } /* Etapa ativa (sincronizada com o slider) */ .journey-card.is-active { border-color: var(--accent-border); box-shadow: var(--shadow-md); } .journey-card.is-active::before { transform: scaleX(1); } /* ── Slider da jornada (clicável + arrastável) ── */ .journey__progress { position: relative; height: 6px; margin-top: 1.5rem; background: var(--surface-2); border-radius: var(--r-full); cursor: pointer; touch-action: none; transition: height var(--t-base); } /* Área de toque ampliada, invisível */ .journey__progress::before { content: ""; position: absolute; inset: -11px 0; } .journey__progress:hover, .journey__progress.is-scrubbing { height: 8px; } .journey__progress:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; } .journey__progress-fill { position: absolute; inset: 0 auto 0 0; height: 100%; width: 0; background: var(--accent-grad); border-radius: var(--r-full); transition: width var(--t-fast) linear; } .journey__progress-thumb { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: var(--shadow-sm); transform: translate(-50%, -50%); transition: left var(--t-fast) linear, transform var(--t-base); pointer-events: none; } .journey__progress:hover .journey__progress-thumb, .journey__progress.is-scrubbing .journey__progress-thumb { transform: translate(-50%, -50%) scale(1.25); } /* Durante o arrasto, a barra segue o dedo sem "lag" de transição */ .journey__progress.is-scrubbing .journey__progress-fill { transition: none; } .journey__progress.is-scrubbing .journey__progress-thumb { transition: transform var(--t-base); } /* ───────────────────────────────────────────────────── 10. PROJETOS ───────────────────────────────────────────────────── */ /* Grade uniforme: todos os cards com a mesma largura, proporção e estrutura */ .projetos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .card-project { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .card-project:hover { transform: translateY(-6px); border-color: var(--accent-border); box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-border); } .card-project__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .card-project__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); } .card-project:hover .card-project__thumb img { transform: scale(1.07); } .card-project__body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.4rem; flex: 1; } .card-project__status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .card-project__status i { font-size: 0.5rem; color: var(--ok); } .card-project__name { font-size: var(--fs-xl); font-weight: 700; } .card-project__desc { font-size: var(--fs-sm); color: var(--text-2); } .card-project__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; } /* Card inteiro clicável (SprintMax) */ .card-project--link { cursor: pointer; } .card-project--link:hover { border-color: var(--accent); } /* Feedback tátil ao clicar (some quando o tilt está ativo, sem conflito) */ .card-project--link:active { transform: scale(0.985); } /* Ripple discreto disparado no ponto do clique */ .card-ripple { position: absolute; z-index: 5; border-radius: 50%; background: var(--accent-soft); transform: translate(-50%, -50%) scale(0); pointer-events: none; animation: cardRipple 0.6s var(--ease-out) forwards; } /* Placeholder: novo projeto a caminho */ .card-project--soon { border-style: dashed; border-color: var(--border-strong); background: var(--bg-alt); } .card-project--soon:hover { border-color: var(--accent-border); } .card-project__thumb--soon { display: grid; place-items: center; background: radial-gradient(120% 120% at 50% 0%, var(--accent-softer), transparent 70%), var(--surface-2); } .card-project__soon-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 1.6rem; animation: floaty 5s ease-in-out infinite; } .card-project__status--soon i { color: var(--learn); } /* ───────────────────────────────────────────────────── 11. SKILLS (categorias + status) ───────────────────────────────────────────────────── */ .skills { background: var(--bg-alt); } /* Legenda dos status */ .skills__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.25rem; margin: -1.5rem auto var(--space-xl); padding: 0.75rem 1.25rem; width: fit-content; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); } .legend-item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); } .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .legend-dot--ok { background: var(--ok); } .legend-dot--learn { background: var(--learn); } .legend-dot--want { background: var(--want); } /* Grade de categorias */ .skills__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: start; } .skill-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .skill-panel:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); } .skill-panel__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.35rem; } .skill-panel__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 1.15rem; flex-shrink: 0; } .skill-panel__title { font-size: var(--fs-lg); font-weight: 700; } .skill-panel__count { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; } /* Grade de tecnologias dentro de cada painel */ .skill-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.75rem; } /* Cada
  • é a célula da grade; o link .skill-tech preenche toda a célula. */ .skill-techs > li { display: grid; } /* Cada tecnologia é um link () para a documentação oficial; herda a cor e remove o sublinhado para parecer um "chip" clicável. */ .skill-tech { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--r-md); color: inherit; text-decoration: none; cursor: pointer; transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base), background var(--t-base); } [data-theme="light"] .skill-tech { background: var(--surface-2); } .skill-tech:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: 0 10px 26px var(--accent-glow); } .skill-tech > i, .skill-tech > .skill-tech__logo { font-size: 1.5rem; flex-shrink: 0; transition: transform var(--t-base); } /* Logos em SVG (ex.: TypeScript) alinham-se ao tamanho dos ícones */ .skill-tech > .skill-tech__logo { width: 1.5rem; height: 1.5rem; } .skill-tech:hover > i, .skill-tech:hover > .skill-tech__logo { transform: scale(1.18) rotate(-8deg); } .skill-tech__name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; } /* Indicador de status (bolinha no canto) */ .skill-tech__status { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; z-index: 4; cursor: help; transition: transform var(--t-fast), box-shadow var(--t-fast); } .skill-tech__status:hover { transform: scale(1.3); } .skill-tech--ok .skill-tech__status { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); } .skill-tech--learn .skill-tech__status { background: var(--learn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--learn) 22%, transparent); } .skill-tech--want .skill-tech__status { background: var(--want); box-shadow: 0 0 0 4px color-mix(in srgb, var(--want) 22%, transparent); } /* Tooltip da bolinha de status — ancorada à direita para não vazar além da borda do card (a bolinha fica no canto superior direito). */ .skill-tech__status[data-tooltip]::after { left: auto; right: -6px; transform: translateX(0) translateY(4px); } .skill-tech__status[data-tooltip]:hover::after, .skill-tech__status[data-tooltip]:focus-visible::after { transform: translateX(0) translateY(0); } .skill-tech--want { opacity: 0.82; } /* ───────────────────────────────────────────────────── 12. CONTATO (cards grandes) ───────────────────────────────────────────────────── */ .contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 980px; margin-inline: auto; } .contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base); } .contact-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-lg); } .contact-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 0.75rem; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); font-size: 1.5rem; transition: transform var(--t-base); } .contact-card:hover .contact-card__icon { transform: scale(1.1) rotate(-6deg); } .contact-card--whatsapp .contact-card__icon { background: color-mix(in srgb, #25d366 18%, transparent); color: #25d366; } .contact-card--github .contact-card__icon { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); } .contact-card__label { font-size: var(--fs-lg); font-weight: 700; } .contact-card__value { font-size: var(--fs-sm); color: var(--text-2); word-break: break-word; } .contact-card__cta { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: var(--fs-sm); font-weight: 600; color: var(--accent); } .contact-card__cta i { transition: transform var(--t-base); } .contact-card:hover .contact-card__cta i { transform: translateX(5px); } /* ───────────────────────────────────────────────────── 13. FOOTER ───────────────────────────────────────────────────── */ .footer { background: var(--bg); border-top: 1px solid var(--border); padding-top: clamp(2rem, 4vw, 3rem); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: 1.5rem; } .footer__brand .logo { font-size: var(--fs-2xl); } .footer__tagline { margin-top: 0.65rem; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); max-width: 280px; } .footer__heading { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text); margin-bottom: 0.75rem; } .footer__links { display: flex; flex-direction: column; gap: 0.6rem; } .footer__links a { font-size: var(--fs-sm); color: var(--text-2); width: fit-content; transition: color var(--t-base), transform var(--t-base); } .footer__links a:hover { color: var(--accent); transform: translateX(4px); } .footer__socials { display: flex; gap: 0.75rem; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; padding-block: 1rem; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); } .footer__copy { font-weight: 500; } .footer__made { display: inline-flex; align-items: center; gap: 0.4rem; } .footer__made i { color: var(--accent); } /* ───────────────────────────────────────────────────── 14. VOLTAR AO TOPO ───────────────────────────────────────────────────── */ .scroll-top { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: var(--z-float); display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: var(--accent-grad); color: var(--accent-contrast); border-radius: 50%; font-size: 0.9rem; box-shadow: var(--shadow-accent); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { transform: translateY(-4px); } /* ───────────────────────────────────────────────────── 15. SCROLL REVEAL (JS: IntersectionObserver) ───────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px); transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.75s var(--ease-out); } .reveal--left { transform: translateX(-44px); } .reveal--right { transform: translateX(44px); } .reveal--d1 { transition-delay: 0.1s; } .reveal--d2 { transition-delay: 0.2s; } .reveal.is-visible { opacity: 1; transform: none; filter: none; } /* ───────────────────────────────────────────────────── 16. KEYFRAMES ───────────────────────────────────────────────────── */ @keyframes heroIn { to { opacity: 1; transform: none; filter: none; } } @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } } @keyframes orbDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(6vw, 5vh, 0) scale(1.12); } } @keyframes orbDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-7vw, 4vh, 0) scale(0.92); } } @keyframes orbDrift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4vw, -6vh, 0) scale(1.1); } } /* Ripple discreto ao clicar num card de projeto */ @keyframes cardRipple { to { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } /* ───────────────────────────────────────────────────── 17. VIEW TRANSITIONS — troca de tema (reveal circular) O JS anima o clip-path do ::view-transition-new(root); aqui só neutralizamos o crossfade padrão e ordenamos as camadas para o novo tema crescer por cima do antigo. ───────────────────────────────────────────────────── */ /* Enquanto o tema troca (classe posta pelo JS durante a revelação): o custo da View Transition (que rasteriza a página inteira 2x — tema antigo + novo) despenca porque desligamos as coisas caras. É isto que deixa a troca fluida como referências premium. */ /* 1. Some com o fundo ambiente: os orbs têm filter: blur(80px) em ~42vw — de longe o item mais caro de rasterizar no snapshot. */ html.theme-switching .bg-ambient { display: none !important; } /* 2. Zera TODAS as transições de CSS pra nada competir com o wipe. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 0; } ::view-transition-new(root) { z-index: 1; } /* Fallback (sem View Transitions): overlay circular via JS */ .theme-ripple { position: fixed; z-index: 3000; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); will-change: transform; } /* ───────────────────────────────────────────────────── 18. PREFERÊNCIA: MENOS MOVIMENTO (acessibilidade) ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .hero__content > *, .hero__visual { opacity: 1; transform: none; filter: none; } .bg-orb { animation: none; } }