/* ═══════════════════════════════════════════════════════════════════════ ECRÃ: PERFIL (Luzayadio) — reestilização completa ─────────────────────────────────────────────────────────────────────── Este ficheiro é agora a ÚNICA fonte de estilo para #screen-profile. Antes existiam 3 camadas a competir pela mesma tela (um bloco "v2" em style.css, este ficheiro no tema antigo de "caderno" e um bloco de patches !important no do HTML) — daí o aspecto inconsistente e os bugs de responsividade. Agora cada seletor usado no markup real é definido aqui, por completo, para nunca depender de regras concorrentes nos outros ficheiros. Usa só os tokens globais da app (--t1/--t2/--t3, --cyan/--lime, --border, --app-bg-1/2, --font, --z-screen) para herdar automaticamente o tema (incluindo a paleta "Mara" quando ativa). ═══════════════════════════════════════════════════════════════════════ */ #screen-profile { position: fixed; inset: 0; z-index: var(--z-screen, 1000); display: none; flex-direction: column; background: var(--app-bg-1); color: var(--t1); font-family: var(--font); opacity: 0; transform: translateY(16px); transition: opacity .32s ease, transform .32s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } #screen-profile.visible { opacity: 1; transform: none; } #screen-profile::-webkit-scrollbar { display: none; } #screen-profile, #screen-profile * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #screen-profile { scroll-behavior: smooth; } #screen-profile button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } #screen-profile a { color: inherit; text-decoration: none; } /* Apelidos locais mantidos por compatibilidade com o formulário de edição (markup injetado por js.js), que continua a usar estas variáveis. */ #screen-profile { --navy: var(--t1); --ink: var(--t1); --muted: var(--t2); --paper: var(--app-bg-1); --line: var(--border); --pf-lime: var(--lime); --coral: var(--cyan); --ease: cubic-bezier(.23, 1, .32, 1); --ease-out: cubic-bezier(.23, 1, .32, 1); } /* ── Barra de topo ── */ #screen-profile .pf-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-top, 0px) + 14px) 20px 12px; background: rgba(0, 0, 0, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } #screen-profile .pf-topbar-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid var(--border); color: var(--t1); transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); } #screen-profile .pf-topbar-back:hover { border-color: rgba(var(--cyan-rgb), .5); background: rgba(255, 255, 255, .1); transform: translateX(-2px); } #screen-profile .pf-topbar-back svg { width: 17px; height: 17px; } #screen-profile .pf-topbar-title { font-size: 14px; font-weight: 800; letter-spacing: .01em; } /* ── Contentor geral ── */ #screen-profile .main-content { min-width: 0; width: 100%; padding: 24px clamp(14px, 4vw, 40px) 56px; } #screen-profile .profile-page { width: min(100%, 1180px); margin: 0 auto; display: grid; gap: 20px; } /* ── Superfícies (cartões) ── */ #screen-profile .notebook-surface, #screen-profile .profile-card, #screen-profile .side-card, #screen-profile .about-card { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)), var(--app-bg-1); background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); transform: none; rotate: 0deg; } #screen-profile .profile-card { overflow: hidden; } /* ── Capa (hero) ── */ #screen-profile .profile-card { /* Tamanho do avatar centralizado numa única variável: a sobreposição sobre a capa (identity-row) e o espaço reservado na própria capa (profile-cover) derivam ambos daqui, para NUNCA poderem desalinhar-se e o avatar nunca tapar o texto da capa, seja qual for a largura do ecrã ou o número de linhas que o título ocupe. */ --pf-avatar: clamp(72px, 11vw, 96px); } #screen-profile .profile-cover { position: relative; overflow: hidden; min-height: clamp(120px, 22vw, 190px); display: flex; align-items: flex-end; padding-top: clamp(18px, 4vw, 34px); padding-inline: clamp(20px, 4vw, 40px); /* Metade do avatar (o quanto ele sobe por cima da capa) + 16px de margem de segurança — garante sempre uma folga entre o texto e o avatar, mesmo quando o título quebra em 2 ou 3 linhas. */ padding-bottom: calc(var(--pf-avatar) * .5 + 16px); background: radial-gradient(circle at 10% -15%, rgba(var(--lime-rgb), .32), transparent 45%), radial-gradient(circle at 90% 130%, rgba(var(--cyan-rgb), .36), transparent 50%), linear-gradient(135deg, rgba(var(--cyan-rgb), .16), rgba(var(--lime-rgb), .08)); background-image: radial-gradient(circle at 10% -15%, rgba(var(--lime-rgb), .32), transparent 45%), radial-gradient(circle at 90% 130%, rgba(var(--cyan-rgb), .36), transparent 50%), linear-gradient(135deg, rgba(var(--cyan-rgb), .16), rgba(var(--lime-rgb), .08)); } #screen-profile .profile-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .05), transparent 65%); } #screen-profile .cover-copy { position: relative; z-index: 1; max-width: 640px; } #screen-profile .eyebrow--cover { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .28); backdrop-filter: blur(6px); color: var(--t1); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } #screen-profile .eyebrow--cover svg { display: none; } #screen-profile .cover-copy h1 { margin: 0; color: var(--t1); font-family: var(--font); font-weight: 800; font-size: clamp(19px, 2.6vw, 27px); line-height: 1.25; letter-spacing: -.01em; } /* Rótulo discreto usado nos cartões (Sobre, Os seus cursos, Redes...) */ #screen-profile .eyebrow { display: inline-flex; align-items: center; gap: 0; margin: 0 0 14px; background: none; border: 0; padding: 0; color: var(--t2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } #screen-profile .eyebrow svg { display: none; } /* ── Identidade (avatar + nome) ── */ #screen-profile .profile-summary { position: relative; padding: 0 clamp(18px, 4vw, 40px) 24px; } #screen-profile .identity-row { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: calc(var(--pf-avatar) * -.5); } #screen-profile .avatar-wrap { flex-shrink: 0; width: var(--pf-avatar); height: var(--pf-avatar); padding: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); } #screen-profile .avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--app-bg-1); transform: none; rotate: 0deg; } #screen-profile .avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; border: 0; } #screen-profile .avatar img[hidden] { display: none !important; } #screen-profile .avatar .avatar-initials[hidden] { display: none !important; } #screen-profile .avatar.has-photo .avatar-initials { display: none !important; } #screen-profile .avatar:not(.has-photo) img { display: none !important; } #screen-profile .avatar-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--cyan-rgb), .38), rgba(var(--lime-rgb), .3)); color: var(--t1); font-family: var(--font); font-weight: 800; font-size: clamp(20px, 3vw, 28px); } #screen-profile .online-dot { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border: 2.5px solid var(--app-bg-1); border-radius: 50%; background: var(--lime); } #screen-profile .avatar.is-readonly { cursor: default; } #screen-profile #pf-avatar-trigger { cursor: pointer; } #screen-profile #pf-avatar-trigger.is-readonly { cursor: default; } #screen-profile .identity-copy { min-width: 0; padding-bottom: 2px; } #screen-profile .name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } #screen-profile h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--t1); font-family: var(--font); font-weight: 800; font-size: clamp(18px, 2.6vw, 24px); line-height: 1.2; letter-spacing: -.01em; } #screen-profile .self-badge { flex-shrink: 0; border-radius: 999px; padding: 4px 9px; background: rgba(var(--lime-rgb), .16); color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } #screen-profile .identity-copy > p, #screen-profile #pf-subtitle { margin: 6px 0 0; color: var(--t2); font-size: 13px; } /* ── Ações ── */ #screen-profile .profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } #screen-profile .profile-actions [hidden] { display: none !important; } #screen-profile .button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 12px; font-family: var(--font); font-size: 12.5px; font-weight: 800; white-space: nowrap; transition: transform .16s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } #screen-profile .button:hover { transform: translateY(-2px); } #screen-profile .button:active { transform: translateY(0) scale(.97); } #screen-profile .button svg { width: 15px; height: 15px; } #screen-profile .button--outline { border: 1px solid var(--border); background: rgba(255, 255, 255, .04); color: var(--t1); } #screen-profile .button--outline:hover { border-color: rgba(var(--cyan-rgb), .5); color: var(--cyan); } #screen-profile .button--lime { border: 1px solid transparent; background: linear-gradient(135deg, var(--lime), var(--cyan)); color: #06241b; box-shadow: 0 10px 24px rgba(var(--lime-rgb), .28); } #screen-profile .button--lime:hover { box-shadow: 0 12px 28px rgba(var(--lime-rgb), .4); } #screen-profile .button--lime:active { box-shadow: 0 4px 12px rgba(var(--lime-rgb), .3); } /* ── Estatísticas ── */ #screen-profile .profile-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } #screen-profile .profile-stats > * { display: flex; flex-direction: column; gap: 3px; min-width: 96px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, .03); color: var(--t2); text-align: left; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); } #screen-profile .profile-stats > button { cursor: pointer; } #screen-profile .profile-stats > button:hover { border-color: rgba(var(--lime-rgb), .5); background: rgba(var(--lime-rgb), .08); transform: translateY(-2px); } #screen-profile .profile-stats strong { color: var(--t1); font-size: 18px; font-weight: 800; } #screen-profile .profile-stats span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); } #screen-profile .profile-stats > button:hover strong { color: var(--lime); } #screen-profile .pista-list#pf-rede-list[hidden] { display: none; } /* ── Grelha: conteúdo + barra lateral ── */ #screen-profile .profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; } #screen-profile .profile-feed { min-width: 0; } /* ── Separadores (Publicações / Sobre) ── */ #screen-profile .tabs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 5px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255, 255, 255, .03); } #screen-profile .tabs-list { display: flex; gap: 3px; min-width: 0; } #screen-profile .tab { min-height: 34px; padding: 0 16px; border-radius: 11px; border-bottom: 0; background: transparent; color: var(--t2); font-size: 12.5px; font-weight: 800; transition: color .18s var(--ease), background .18s var(--ease); } #screen-profile .tab:hover { color: var(--t1); } #screen-profile .tab.is-active { background: linear-gradient(135deg, rgba(var(--cyan-rgb), .22), rgba(var(--lime-rgb), .16)); color: var(--t1); } #screen-profile .tab span { margin-left: 5px; border-radius: 999px; padding: 2px 6px; background: rgba(255, 255, 255, .08); color: inherit; font-size: 10px; } #screen-profile .share-link { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 12px; min-height: 34px; border-radius: 11px; color: var(--t2); font-size: 12px; font-weight: 800; white-space: nowrap; flex-shrink: 0; } #screen-profile .share-link:hover { color: var(--lime); background: rgba(var(--lime-rgb), .08); } #screen-profile .share-link svg { width: 14px; height: 14px; } #screen-profile .tab-panel { padding-top: 2px; } #screen-profile .tab-panel[hidden] { display: none !important; } /* ── Estados vazios ── */ #screen-profile .pf-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 150px; padding: 40px 20px; text-align: center; color: var(--t3); } #screen-profile .pf-empty-state svg { width: 30px; height: 30px; opacity: .55; } #screen-profile .pf-empty-state p { margin: 0; font-size: 13.5px; } #screen-profile .pf-empty-state .button { margin-top: 6px; min-height: 36px; padding: 0 14px; } #screen-profile .pf-empty-inline { margin: 0; padding: 10px 2px; color: var(--t3); font-size: 12.5px; } /* ── Publicações do perfil (reaproveitam .post-card do feed global) ── */ #screen-profile .post-card { border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; } #screen-profile .post-card-top { gap: 10px; margin-bottom: 10px; } #screen-profile .post-avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; flex-shrink: 0; } #screen-profile .post-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; } #screen-profile .post-user-meta { font-size: 10.5px; } #screen-profile .post-card-top a, #screen-profile .post-card-top .post-avatar { flex: 0 0 auto; } #screen-profile .post-card-top > div:last-child { min-width: 0; } #screen-profile .post-action-btn { font-family: var(--font); font-size: 13px; padding: 5px 9px; border-radius: 20px; transition: background .18s var(--ease), color .18s var(--ease); } #screen-profile .post-action-btn:hover { background: rgba(255, 255, 255, .07); } #screen-profile .post-action-btn.liked { color: #e05555; } #screen-profile .post-delete-btn:hover { color: var(--danger, #e5484d); } #screen-profile .reply-send-btn { background: linear-gradient(135deg, var(--cyan), var(--lime)); border-radius: 50%; width: 32px; height: 32px; } /* ── "Sobre" ── */ #screen-profile .about-card { padding: clamp(20px, 3vw, 28px); } #screen-profile .about-copy { margin: 0 0 20px; color: var(--t1); font-family: var(--font); font-weight: 600; font-size: clamp(15px, 2vw, 17px); line-height: 1.7; } #screen-profile .about-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; border-top: 1px solid var(--border); padding-top: 16px; color: var(--t2); font-size: 12.5px; font-weight: 600; } #screen-profile .about-meta:first-of-type { margin-top: 0; } #screen-profile .about-meta svg { width: 15px; height: 15px; color: var(--lime); flex-shrink: 0; } /* ── Barra lateral ── */ #screen-profile .profile-sidebar { display: grid; gap: 16px; align-content: start; } #screen-profile .side-card { overflow: hidden; } #screen-profile .side-card:not(.windows-card) { padding: 20px; } #screen-profile .side-card__body { padding: 20px; } #screen-profile .pista-list { display: grid; gap: 8px; } #screen-profile .pista-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, .025); color: var(--t2); font-size: 12.5px; text-align: left; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease); } #screen-profile .pista-row:hover { transform: translateX(2px); border-color: rgba(var(--lime-rgb), .4); background: rgba(var(--lime-rgb), .06); color: var(--lime); } #screen-profile .pista-row.pf-curso-row { cursor: default; } #screen-profile .pista-row.pf-curso-row:hover { transform: none; } #screen-profile .pista-row > span { flex-shrink: 0; min-width: 30px; color: inherit; font-size: 10px; font-weight: 800; letter-spacing: .03em; } #screen-profile .pista-row > strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t1); font-weight: 700; } #screen-profile .pista-row > i { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); font-style: normal; } #screen-profile .social-list { display: grid; gap: 8px; } #screen-profile .social-row { display: grid; grid-template-columns: 34px 1fr 14px; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; background: transparent; color: var(--t1); text-align: left; transition: background .18s var(--ease), color .18s var(--ease); } #screen-profile .social-row:hover { background: rgba(255, 255, 255, .05); color: var(--lime); } #screen-profile .social-row > span:first-child { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: var(--t2); } #screen-profile .social-row > span:first-child svg { width: 15px; height: 15px; } #screen-profile .social-row strong, #screen-profile .social-row small { display: block; } #screen-profile .social-row strong { font-size: 12.5px; font-weight: 800; } #screen-profile .social-row small { overflow: hidden; margin-top: 2px; color: var(--t2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } #screen-profile .social-row > svg { width: 13px; height: 13px; color: var(--t3); flex-shrink: 0; } /* ── Notificação flutuante (toast) ── */ #screen-profile .pf-toast { position: fixed; z-index: 20; left: 50%; bottom: calc(22px + var(--safe-bot, 0px)); max-width: min(420px, calc(100vw - 32px)); transform: translate(-50%, 16px); border: 1px solid var(--border); border-radius: 14px; padding: 12px 18px; background: rgba(10, 10, 14, .92); backdrop-filter: blur(10px); color: var(--t1); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } #screen-profile .pf-toast.is-visible { transform: translate(-50%, 0); opacity: 1; } /* ── Entrada animada dos cartões ── */ #screen-profile .reveal { animation: pf-lift-in .5s var(--ease) both; } @keyframes pf-lift-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════ RESPONSIVIDADE ═══════════════════ A maior parte do dimensionamento já é fluido (clamp()), por isso os breakpoints abaixo tratam apenas de mudanças estruturais de grelha — nunca de sobreposições ou cortes, mesmo em janelas muito estreitas. */ @media (max-width: 1080px) { #screen-profile .profile-layout { grid-template-columns: minmax(0, 1fr) 270px; } } @media (max-width: 860px) { #screen-profile .profile-layout { grid-template-columns: 1fr; gap: 16px; } #screen-profile .profile-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { #screen-profile .main-content { padding: 16px 12px 40px; } #screen-profile .profile-page { gap: 14px; } #screen-profile .notebook-surface, #screen-profile .profile-card, #screen-profile .side-card, #screen-profile .about-card { border-radius: 18px; } #screen-profile .profile-summary { padding-left: 16px; padding-right: 16px; } #screen-profile .profile-actions { width: 100%; } #screen-profile .profile-actions .button { flex: 1 1 auto; } #screen-profile .profile-stats { gap: 8px; } #screen-profile .profile-stats > * { flex: 1 1 auto; min-width: 0; padding: 10px 12px; } #screen-profile .tabs-bar { flex-wrap: wrap; } #screen-profile .share-link { margin-left: auto; } } @media (max-width: 520px) { #screen-profile .profile-sidebar { grid-template-columns: 1fr; } #screen-profile .about-meta { padding-top: 14px; } } @media (max-width: 380px) { #screen-profile .identity-row { align-items: center; } #screen-profile .profile-stats > * { min-width: 88px; padding: 10px; } #screen-profile .profile-stats strong { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { #screen-profile *, #screen-profile *::before, #screen-profile *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }