/* styles/lifematch-theme.css Identidade visual compartilhada do LifeMatch by Lifework. O tema é controlado pelo atributo data-theme em , definido a partir de localStorage.getItem('lifematch_role') (ver services/theme-service.js). Estudante -> laranja Profissional / Administrador -> verde (padrão) As variáveis *-rgb existem para que os utilitários de opacidade do Tailwind (ex.: bg-primary/10, bg-background-light/80) continuem funcionando. No tailwind.config das páginas: primary:'rgb(var(--primary-rgb)/)' 'background-light':'rgb(var(--background-rgb)/)' */ :root, [data-theme='profissional'], [data-theme='admin'] { --primary: #14b84b; --primary-dark: #0e9e3e; --primary-soft: #f0fdf4; --primary-border: #bbf7d0; --background: #f5f8f7; --primary-rgb: 20 184 75; --background-rgb: 245 248 247; } [data-theme='estudante'] { --primary: #f97316; --primary-dark: #ea580c; --primary-soft: #fff7ed; --primary-border: #fed7aa; --background: #fffaf5; --primary-rgb: 249 115 22; --background-rgb: 255 250 245; } /* Pequenos utilitários que dependem das variáveis de tema. Usados pelas telas novas (Conteúdos, Eventos) para manter o visual limpo. */ .lm-soft { background-color: var(--primary-soft); } .lm-border-soft { border-color: var(--primary-border); } .lm-text-primary { color: var(--primary); } .lm-bg-primary { background-color: var(--primary); } .lm-bg-primary-dark { background-color: var(--primary-dark); } .lm-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 9999px; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid var(--primary-border); } /* ── Componentes compartilhados (acabamento visual v2) ────────── Aditivos: usados pontualmente para reduzir repetição e padronizar. Não substituem o Tailwind existente. */ /* Navegação inferior padronizada (aplicada por theme-service.renderBottomNav). Mesma altura, espaçamento, ícones e safe-area em todas as telas. */ .lm-bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 28rem; display: flex; justify-content: space-around; align-items: center; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid #e2e8f0; padding: 8px 8px max(env(safe-area-inset-bottom), 10px); z-index: 30; } .lm-bottom-nav > a { flex: 1 1 0; min-width: 0; padding: 2px 0; } .lm-bottom-nav .material-symbols-outlined { font-size: 24px; } /* Card padrão */ .lm-card { background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05); } /* Botões */ .lm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 14px; border-radius: 12px; padding: 12px 16px; transition: filter .15s, background-color .15s; cursor: pointer; } .lm-btn-primary { background: var(--primary); color: #fff; border: 1px solid transparent; } .lm-btn-primary:hover { filter: brightness(.96); } .lm-btn-secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary-border); } .lm-btn-secondary:hover { background: var(--primary-soft); } .lm-btn:disabled, .lm-btn[disabled] { opacity: .6; cursor: default; } /* Estado vazio padronizado */ .lm-empty-state { text-align: center; padding: 48px 16px; } .lm-empty-state .lm-empty-icon { width: 56px; height: 56px; border-radius: 9999px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .lm-empty-state .lm-empty-icon .material-symbols-outlined { font-size: 28px; } .lm-empty-state h3 { font-weight: 700; color: #334155; margin-bottom: 4px; } .lm-empty-state p { font-size: 14px; color: #64748b; line-height: 1.45; } /* Título de seção com marcador no tema */ .lm-section-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: #0f172a; } .lm-section-title::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--primary); display: inline-block; flex: 0 0 auto; } /* Acessibilidade: foco visível consistente no tema */ .lm-focus:focus-visible, .lm-btn:focus-visible, .lm-icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Cabeçalho de página premium (mobile) ────────────────────── Título forte + subtítulo curto, alinhados à esquerda, com respiro. */ .lm-page-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #eef2f6; } .lm-page-title { font-size: 20px; font-weight: 700; line-height: 1.15; color: #0f172a; } .lm-page-subtitle { font-size: 13px; color: #64748b; line-height: 1.25; margin-top: 1px; } /* Botão de ícone (voltar, busca, ações de topo) — área de toque 40px */ .lm-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; color: #334155; background: transparent; border: none; cursor: pointer; transition: background-color .15s, color .15s; flex: 0 0 auto; } .lm-icon-btn:hover { background: #f1f5f9; } .lm-icon-btn--soft { background: var(--primary-soft); color: var(--primary); } .lm-icon-btn--soft:hover { filter: brightness(.97); } /* Card com leve elevação no hover (listas que rolam) */ .lm-card-hover { transition: box-shadow .18s, transform .18s; } .lm-card-hover:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .07); transform: translateY(-1px); } /* Loading padronizado */ .lm-loading-state { text-align: center; padding: 48px 16px; color: #94a3b8; font-size: 14px; } .lm-spinner { width: 36px; height: 36px; margin: 0 auto 12px; border-radius: 9999px; border: 4px solid #e2e8f0; border-top-color: var(--primary); animation: lm-spin 1s linear infinite; } @keyframes lm-spin { to { transform: rotate(360deg); } } /* Cartão de métrica (dashboard admin) */ .lm-stat-card { background: #fff; border: 1px solid #eef2f6; border-radius: 16px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .lm-stat-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .lm-stat-value { font-size: 26px; font-weight: 800; line-height: 1; color: #0f172a; } .lm-stat-label { font-size: 12px; color: #64748b; margin-top: 4px; } /* Abas de filtro horizontais (subcategorias de Conteúdos) */ .lm-filter-tabs { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lm-filter-tabs::-webkit-scrollbar { display: none; } .lm-filter-tab { flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1; padding: 9px 14px; border-radius: 9999px; color: #475569; background: #fff; border: 1px solid #e2e8f0; transition: background-color .15s, color .15s, border-color .15s; } .lm-filter-tab:hover { border-color: var(--primary-border); } .lm-filter-tab.is-active { color: #fff; background: var(--primary); border-color: var(--primary); } /* Campo de busca (Conteúdos) — pílula clara, foco na cor do perfil */ .lm-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 10px 16px; transition: border-color .15s, box-shadow .15s; } .lm-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .lm-search .material-symbols-outlined { font-size: 20px; color: #94a3b8; flex: 0 0 auto; } .lm-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: #0f172a; } .lm-search input::placeholder { color: #94a3b8; } .lm-search input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* Mini badge (selo compacto no card) */ .lm-badge-mini { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 7px; border-radius: 9999px; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid var(--primary-border); } .lm-badge-mini .material-symbols-outlined { font-size: 12px; } /* Telas de autenticação (login / cadastro / recuperação) */ .lm-auth-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px max(env(safe-area-inset-bottom), 24px); background: var(--background); } .lm-auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid #eef2f6; border-radius: 24px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 44px -18px rgba(15, 23, 42, .22); padding: 26px; } .lm-auth-logo { display: inline-flex; align-items: center; gap: 8px; } /* Campo de formulário com ícone à esquerda (telas de autenticação) */ .lm-field { position: relative; } .lm-field > .material-symbols-outlined { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #94a3b8; pointer-events: none; } .lm-input { width: 100%; border-radius: 14px; border: 1px solid #e2e8f0; background: #f8fafc; padding: 13px 14px 13px 42px; font-size: 15px; color: #0f172a; transition: background-color .15s, border-color .15s, box-shadow .15s; } .lm-input::placeholder { color: #94a3b8; } .lm-input:focus { outline: none; background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / .18); } /* Agrupamento de seção em formulários */ .lm-form-section { background: #fff; border: 1px solid #f1f5f9; border-radius: 16px; padding: 16px; } /* ════════════════════════════════════════════════════════════════ Round 4 — Reformulação visual premium (mobile) Componentes reutilizáveis para landing, cards de swipe, conteúdos, eventos, perfis e matches. Todos dependem das variáveis de tema, então se adaptam automaticamente a laranja (estudante) e verde (profissional). ════════════════════════════════════════════════════════════════ */ /* Helpers de cor (acentos pontuais nas duas identidades) */ .lm-soft-est { background: #fff7ed; color: #f97316; } .lm-soft-prof { background: #f0fdf4; color: #14b84b; } /* ── Tela inicial pública (index.html) — identidade final fotográfica ── Foto realista no topo + folha branca arredondada sobreposta. Verde como cor base; laranja só em "começa aqui." e nos detalhes do botão Criar conta (acentos pontuais). */ .lm-home { max-width: 28rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: #fff; position: relative; overflow-x: hidden; } .lm-home-hero { position: relative; width: 100%; height: 41vh; min-height: 250px; max-height: 372px; overflow: hidden; border-radius: 26px 26px 0 0; background: linear-gradient(140deg, #cdeedb, #eff6f1 55%, #fbeede); } .lm-home-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; } /* Folha branca + onda de transição */ .lm-home-sheet { position: relative; z-index: 2; flex: 1 1 auto; margin-top: -1px; background: #fff; padding: 4px 22px max(env(safe-area-inset-bottom), 20px); display: flex; flex-direction: column; gap: 15px; } .lm-home-wave { position: absolute; left: 0; top: -46px; width: 100%; height: 48px; display: block; pointer-events: none; } .lm-home-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; } .lm-home-brand-name { font-size: 27px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #111827; } .lm-home-brand-name .lm-grn { color: #14b84b; } .lm-home-sub { font-size: 11.5px; font-weight: 500; color: #9aa3af; text-align: center; margin-top: 4px; } .lm-home-title { font-size: 31px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; text-align: center; color: #1f2937; } .lm-home-title .lm-grn { color: #14b84b; } .lm-home-title .lm-org { color: #f97316; } .lm-home-subtitle { font-size: 14.5px; line-height: 1.5; color: #64748b; text-align: center; padding: 0 4px; } /* Faixa de benefícios (ícone verde claro + rótulo ao lado) */ .lm-home-benefits { display: flex; align-items: center; justify-content: space-between; gap: 4px; background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 12px 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -16px rgba(15, 23, 42, .13); } .lm-home-benefit { display: flex; flex-direction: row; align-items: center; gap: 7px; min-width: 0; } .lm-home-benefit-ico { width: 34px; height: 34px; border-radius: 9999px; background: #e9f9ef; color: #14b84b; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .lm-home-benefit-ico .material-symbols-outlined { font-size: 19px; font-variation-settings: 'wght' 300; } .lm-home-benefit span { font-size: 12px; font-weight: 600; color: #475569; line-height: 1.1; white-space: nowrap; } /* Botões: Entrar (verde sólido) / Criar conta (branco, detalhes laranja) */ .lm-home-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 54px; border-radius: 15px; font-weight: 700; font-size: 16px; transition: filter .15s, background-color .15s, transform .1s; } .lm-home-btn:active { transform: scale(.99); } .lm-home-btn--enter { background: #14b84b; color: #fff; box-shadow: 0 11px 22px -10px rgba(20, 184, 75, .5); } .lm-home-btn--enter:hover { filter: brightness(.97); } .lm-home-btn--signup { background: #fff; color: #ea580c; border: 1.5px solid #fed7aa; } .lm-home-btn--signup:hover { background: #fff7ed; } .lm-home-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; color: #9aa3af; text-align: center; } .lm-home-secure .material-symbols-outlined { font-size: 16px; color: #14b84b; } /* Em telas muito estreitas, benefícios empilham (evita overflow) */ @media (max-width: 360px) { .lm-home-benefit { flex-direction: column; gap: 5px; flex: 1 1 0; } .lm-home-benefit span { font-size: 10.5px; white-space: normal; text-align: center; } } /* ── Cards editoriais (Conteúdos / Eventos) ────────────────────── */ .lm-content-card, .lm-event-card { background: #fff; border: 1px solid #eef2f6; border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .16); } .lm-content-thumb, .lm-event-media { position: relative; width: 100%; aspect-ratio: 1600 / 838; overflow: hidden; background: var(--primary-soft); } .lm-content-thumb > img, .lm-event-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Chip sobre a imagem (tipo de conteúdo / status do evento) */ .lm-media-chip { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 6px 11px; border-radius: 9999px; background: rgba(255, 255, 255, .94); color: #0f172a; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 3px 10px rgba(15, 23, 42, .14); } .lm-media-chip .material-symbols-outlined { font-size: 13px; color: var(--primary); } .lm-media-chip--muted { color: #475569; } .lm-media-chip--muted .material-symbols-outlined { color: #94a3b8; } .lm-media-chip--right { left: auto; right: 12px; } .lm-card-title { font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #0f172a; } .lm-card-desc { font-size: 13.5px; line-height: 1.5; color: #64748b; } /* Linha de metadados com ícone (data, local, confirmados) */ .lm-meta-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; } .lm-meta-row .material-symbols-outlined { font-size: 18px; color: var(--primary); flex: 0 0 auto; } /* ── Perfis premium ────────────────────────────────────────────── */ .lm-profile-hero { position: relative; background: #fff; border: 1px solid #eef2f6; border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 30px -16px rgba(15, 23, 42, .22); } .lm-profile-cover { height: 120px; position: relative; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); } .lm-profile-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 150% at 0% 0%, rgba(255, 255, 255, .25), transparent 55%); } .lm-profile-avatar { position: relative; z-index: 1; /* sobrepõe a capa (que é position:relative) */ width: 104px; height: 104px; border-radius: 9999px; border: 4px solid #fff; overflow: hidden; background-color: var(--primary); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .3); } .lm-profile-section { background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .lm-profile-detail { align-items: flex-start; gap: 12px; } /* display via utilitário .flex (preserva toggle hidden/flex) */ .lm-profile-detail > .material-symbols-outlined { font-size: 19px; color: var(--primary); margin-top: 2px; flex: 0 0 auto; } .lm-detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; } .lm-detail-value { font-size: 14px; font-weight: 500; color: #1e293b; line-height: 1.4; margin-top: 2px; } /* Selo em card pequeno */ .lm-selo-card { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 14px; background: var(--primary-soft); border: 1px solid var(--primary-border); color: var(--primary-dark); font-size: 12px; font-weight: 700; } /* ── Card de match / favorito ──────────────────────────────────── */ .lm-match-card { display: flex; gap: 14px; background: #fff; border: 1px solid #eef2f6; border-radius: 20px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .16); } .lm-match-avatar { width: 76px; height: 76px; border-radius: 18px; flex: 0 0 auto; background-size: cover; background-position: center; background-color: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; font-weight: 800; } .lm-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 9999px; background: #f1f5f9; color: #475569; } /* ════════════════════════════════════════════════════════════════ Round 5 — Alinhamento fiel às referências (mobile estudante/prof) App shell, header em dois níveis, brand lockup, cards de destaque e listas compactas para Conteúdos e Eventos. Tudo theme-aware. ════════════════════════════════════════════════════════════════ */ /* Casca do app mobile (largura, fundo, bordas laterais) */ .lm-app-shell { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 28rem; margin: 0 auto; background: var(--background); border-left: 1px solid #eef2f6; border-right: 1px solid #eef2f6; } /* Header de tela principal em dois níveis (marca + título) */ .lm-mobile-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #eef2f6; } .lm-mobile-header__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 0; } .lm-mobile-header__title { padding: 4px 16px 12px; } .lm-screen-title { font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; color: #0f172a; } .lm-screen-subtitle { font-size: 13px; line-height: 1.35; color: #64748b; margin-top: 3px; } /* Lockup da marca (ícone + LifeMatch + by Lifework) */ .lm-brand-lockup { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .lm-brand-mark { display: flex; align-items: center; justify-content: center; color: var(--primary); flex: 0 0 auto; } .lm-brand-mark .material-symbols-outlined { font-size: 28px; font-variation-settings: 'FILL' 1; } .lm-brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; line-height: 1; } .lm-brand-name span { color: var(--primary); } .lm-brand-sub { font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .2em; color: #94a3b8; line-height: 1; margin-top: 3px; } /* Botão de ícone do header (favoritos, notificações) */ .lm-head-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; color: #475569; background: #f1f5f9; transition: background-color .15s, color .15s; } .lm-head-btn:hover { background: var(--primary-soft); color: var(--primary); } .lm-head-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9999px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 800; align-items: center; justify-content: center; border: 2px solid #fff; } /* display via utilitário .flex (JS toggla hidden/flex) */ /* Chip flutuante sobre a imagem do card de swipe (tipo / status) */ .lm-swipe-floating-chip { position: absolute; top: 14px; left: 14px; z-index: 10; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 6px 12px; border-radius: 9999px; color: #fff; background: var(--primary); box-shadow: 0 6px 16px -4px rgb(var(--primary-rgb) / .6); } .lm-swipe-floating-chip--soft { background: rgba(255, 255, 255, .95); color: var(--primary-dark); box-shadow: 0 3px 10px rgba(15, 23, 42, .14); } .lm-swipe-floating-chip--soft::before { content: ""; width: 7px; height: 7px; border-radius: 9999px; background: var(--primary); display: inline-block; } /* Botão favorito/flutuante no canto da imagem */ .lm-swipe-favorite { position: absolute; top: 12px; right: 12px; z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9999px; background: rgba(255, 255, 255, .92); color: #334155; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(15, 23, 42, .16); } .lm-swipe-favorite .material-symbols-outlined { font-size: 22px; } /* Lista de Conteúdos em seções (Em destaque / Gratuitos / Ferramentas …) */ .lm-clist { display: flex; flex-direction: column; gap: 10px; } .lm-clist .lm-section-head:not(:first-child) { margin-top: 8px; } .lm-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .lm-section-head h2 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; } .lm-link-ver { font-size: 12px; font-weight: 700; color: var(--primary); cursor: pointer; background: none; border: 0; padding: 0; } .lm-link-ver:hover { text-decoration: underline; } /* Header de Conteúdos — escala reduzida + ícones delicados (sem círculo pesado) */ /* Estado ativo do botão de header (ex.: busca aberta em Conteúdos) */ .lm-head-btn.is-on { background: var(--primary-soft); color: var(--primary); } /* Card destaque de Conteúdos — banner editorial (texto sobre gradiente + capa à direita) */ .lm-feature { position: relative; overflow: hidden; border-radius: 18px; min-height: 128px; padding: 15px 16px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(115deg, var(--primary-soft) 0%, #ffffff 72%); border: 1px solid var(--primary-border); } .lm-feature__img { position: absolute; top: 0; right: 0; bottom: 0; width: 54%; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(to right, transparent, #000 42%); mask-image: linear-gradient(to right, transparent, #000 42%); } .lm-feature__deco { position: absolute; right: -8px; bottom: -18px; color: var(--primary); opacity: .12; pointer-events: none; } .lm-feature__deco .material-symbols-outlined { font-size: 130px; } .lm-feature__content { position: relative; z-index: 1; max-width: 66%; display: flex; flex-direction: column; } .lm-feature__type { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--primary-dark); } .lm-feature__title { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #0f172a; margin-top: 4px; } .lm-feature__sub { font-size: 12.5px; line-height: 1.4; color: #475569; margin-top: 4px; } .lm-feature__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--primary); border-radius: 9999px; padding: 7px 15px; margin-top: 12px; cursor: pointer; transition: filter .15s; } .lm-feature__btn:hover { filter: brightness(.96); } .lm-feature__btn .material-symbols-outlined { font-size: 15px; } /* Card compacto de Conteúdos — leve, thumb pequena, ação circular à direita */ .lm-ccard { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #f1f5f9; border-radius: 14px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, .03); } .lm-ccard__thumb { flex: 0 0 auto; width: 48px; height: 48px; position: relative; border-radius: 11px; overflow: hidden; background: var(--primary-soft); } .lm-ccard__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } .lm-ccard__thumb .lm-auto-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); } .lm-ccard__thumb .lm-auto-ico .material-symbols-outlined { font-size: 22px; } .lm-ccard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lm-ccard__type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; } .lm-ccard__title { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #0f172a; } .lm-ccard__act { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; } .lm-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; flex: 0 0 auto; } .lm-iconbtn:hover { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft); } .lm-iconbtn .material-symbols-outlined { font-size: 19px; } .lm-iconbtn--primary { color: var(--primary); border-color: var(--primary); background: #fff; } .lm-iconbtn--primary:hover { color: var(--primary); background: var(--primary-soft); } .lm-iconbtn:disabled, .lm-iconbtn.is-disabled { color: #cbd5e1; background: #f8fafc; border-color: #eef2f6; cursor: default; } .lm-status { align-self: flex-start; display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; margin-top: 1px; } .lm-status--free { color: #059669; } .lm-status--pago { color: #2563eb; } .lm-status--ok { color: #059669; } /* Card de ferramenta premium (referência): ícone grande à esquerda, rótulo "FERRAMENTA", pill "EM BREVE", título em destaque, descrição e chips de benefícios. Horizontal, fundo claro, sombra suave — premium porém subordinado ao destaque (sem gradiente/hero). */ .lm-tool-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -18px rgba(15, 23, 42, .18); } .lm-tool-card__ico { width: 60px; height: 60px; border-radius: 16px; background: var(--primary-soft); border: 1px solid var(--primary-border); display: flex; align-items: center; justify-content: center; color: var(--primary); flex: 0 0 auto; } .lm-tool-card__ico .material-symbols-outlined { font-size: 32px; } .lm-tool-card__body { flex: 1 1 auto; min-width: 0; } .lm-tool-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .lm-tool-card__tag { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; } .lm-tool-card__status { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #c2410c; background: #fff7ed; border: 1px solid #fed7aa; padding: 2px 9px; border-radius: 9999px; white-space: nowrap; } .lm-tool-card__title { font-size: 16px; font-weight: 800; color: #0f172a; line-height: 1.18; letter-spacing: -.015em; } .lm-tool-card__desc { font-size: 12.5px; color: #64748b; line-height: 1.4; margin-top: 3px; } .lm-tool-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .lm-tool-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--primary-dark); background: var(--primary-soft); border: 1px solid var(--primary-border); padding: 4px 9px; border-radius: 9999px; white-space: nowrap; } .lm-tool-chip .material-symbols-outlined { font-size: 14px; } /* Card destaque de Eventos (banner grande no topo) */ .lm-event-featured { background: #fff; border: 1px solid #eef2f6; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 36px -18px rgba(15, 23, 42, .24); } .lm-event-featured__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--primary-soft); } .lm-event-featured__media > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Card compacto de Eventos (thumbnail + info, ações abaixo) */ .lm-event-compact { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 13px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -12px rgba(15, 23, 42, .14); } .lm-event-compact__thumb { flex: 0 0 auto; width: 64px; height: 64px; position: relative; border-radius: 13px; overflow: hidden; background: var(--primary-soft); } .lm-event-compact__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } .lm-event-compact__thumb .lm-auto-ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--primary); } /* Pilha de avatares (confirmados) */ .lm-avatar-stack { display: inline-flex; align-items: center; } .lm-avatar-stack > * { margin-left: -9px; box-shadow: 0 0 0 2px #fff; } .lm-avatar-stack > *:first-child { margin-left: 0; } .lm-avatar-more { width: 34px; height: 34px; border-radius: 9999px; background: var(--primary-soft); color: var(--primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } /* Botão pílula sólido/contorno reutilizável (CTAs dos cards) */ .lm-btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 13px; border-radius: 12px; padding: 11px 14px; transition: filter .15s, background-color .15s; } .lm-btn-pill--solid { background: var(--primary); color: #fff; } .lm-btn-pill--solid:hover { filter: brightness(.96); } .lm-btn-pill--outline { background: #fff; color: var(--primary); border: 1px solid var(--primary-border); } .lm-btn-pill--outline:hover { background: var(--primary-soft); } /* ════════════════════════════════════════════════════════════════ Fluxo inicial público (login.html / tipo-conta.html) Mesma identidade da home (index.html): logo verde+laranja, cards brancos, cantos arredondados, sombras discretas. Estudante=laranja, Profissional=verde (cores explícitas, página neutra sem data-theme). ════════════════════════════════════════════════════════════════ */ .lm-auth-wrap { width: 100%; max-width: 28rem; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; padding: 14px 22px max(env(safe-area-inset-bottom), 24px); } /* Cartão de escolha (estudante/profissional) reutilizado em tipo-conta e login */ .lm-choice-card { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #eef2f6; border-radius: 20px; padding: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -16px rgba(15, 23, 42, .16); transition: border-color .15s, box-shadow .15s, transform .1s; cursor: pointer; } .lm-choice-card:hover { box-shadow: 0 16px 32px -16px rgba(15, 23, 42, .24); } .lm-choice-card:active { transform: scale(.99); } .lm-choice-card--est:hover { border-color: #fed7aa; } .lm-choice-card--prof:hover { border-color: #bbf7d0; } .lm-choice-ico { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .lm-choice-ico .material-symbols-outlined { font-size: 26px; } .lm-choice-title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #1f2937; line-height: 1.15; } .lm-choice-desc { font-size: 13px; line-height: 1.45; color: #64748b; } /* Variações sólidas por identidade (reusam a base .lm-home-btn) */ .lm-home-btn--est { background: #f97316; color: #fff; box-shadow: 0 11px 22px -10px rgba(249, 115, 22, .5); } .lm-home-btn--est:hover { filter: brightness(.97); } .lm-home-btn--prof { background: #14b84b; color: #fff; box-shadow: 0 11px 22px -10px rgba(20, 184, 75, .5); } .lm-home-btn--prof:hover { filter: brightness(.97); } /* Botão de altura compacta para CTA dentro de card */ .lm-home-btn--sm { height: 48px; font-size: 15px; border-radius: 14px; } /* ════════════════════════════════════════════════════════════════ Oportunidades em LISTA (estudante e profissional) — substitui o swipe. Cards roláveis no padrão "Talentos" da referência. Cor do favorito e das ações = identidade do VISITANTE (via var(--primary) por data-theme); chips usam a cor cruzada da contraparte (.lm-tag-green / .lm-tag-orange). ════════════════════════════════════════════════════════════════ */ .lm-list-card { position: relative; background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .14); } /* Tags cruzadas (cor da contraparte) */ .lm-tag { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 9999px; } .lm-tag-green { background: #f0fdf4; color: #0e9e3e; border: 1px solid #bbf7d0; } .lm-tag-orange { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa; } .lm-tag-more { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 9999px; background: #f1f5f9; color: #64748b; } /* Ações coração / X (herdadas do swipe), discretas no card */ .lm-card-act { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid #eef2f6; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; cursor: pointer; transition: color .15s, background-color .15s, border-color .15s; flex: 0 0 auto; } .lm-card-act .material-symbols-outlined { font-size: 19px; } .lm-card-act.btn-x:hover { color: #f43f5e; border-color: #fecdd3; background: #fff1f2; } .lm-card-act--fav:hover { color: var(--primary); border-color: var(--primary-border); } .lm-card-act--fav.is-active { color: var(--primary); border-color: var(--primary-border); background: var(--primary-soft); } .lm-card-act--fav.is-active .material-symbols-outlined { font-variation-settings: 'FILL' 1; } /* ── Card de Oportunidades v3 — foto grande à esquerda + 4 linhas ── Esquerda: foto (quadrada arredondada) com selo de tipo (Perfil/Vaga). Direita: nome / profissão•cidade / período•instituição / tags. Rodapé (área única de ações): Ver perfil + Instagram | X + coração. */ .lm-op-photo { position: relative; width: 88px; height: 88px; flex: 0 0 auto; border-radius: 18px; background-size: cover; background-position: center; background-color: var(--primary); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 800; overflow: hidden; } .lm-op-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: #0f172a; line-height: 1.2; } .lm-op-meta { font-size: 12px; color: #94a3b8; line-height: 1.4; } /* Rodapé: linha única de ações. Ver perfil (pílula) + Instagram à esquerda, X + coração à direita. Sem quebra em 320px. */ .lm-op-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; row-gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; } .lm-op-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--primary); border: 1px solid var(--primary-border); background: #fff; border-radius: 9999px; padding: 7px 12px; cursor: pointer; transition: background-color .15s; flex: 0 1 auto; min-width: 0; } .lm-op-ver:hover { background: var(--primary-soft); } .lm-op-ver .material-symbols-outlined { font-size: 15px; flex: 0 0 auto; } .lm-op-ver span:not(.material-symbols-outlined) { overflow: hidden; text-overflow: ellipsis; } .lm-insta-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9999px; border: 1px solid #eef2f6; background: #fff; color: #64748b; cursor: pointer; transition: color .15s, border-color .15s; flex: 0 0 auto; } .lm-insta-btn:hover { color: var(--primary); border-color: var(--primary-border); } /* Pílulas de ação dos cards de Matches (matches.html). Cor por perfil via --primary. */ .lm-act-pill { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; border-radius: 9999px; padding: 9px 11px; border: 1px solid #eef2f6; background: #fff; color: #64748b; cursor: pointer; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, filter .15s; flex: 0 0 auto; } .lm-act-pill .material-symbols-outlined { font-size: 15px; } .lm-act-pill--primary { color: var(--primary); border-color: var(--primary-border); } .lm-act-pill--primary:hover { background: var(--primary-soft); } .lm-act-pill--wpp { background: var(--primary); border-color: var(--primary); color: #fff; } .lm-act-pill--wpp:hover { filter: brightness(.95); } .lm-act-pill--mail { color: #475569; border-color: #e2e8f0; } .lm-act-pill--mail:hover { background: #f8fafc; border-color: #cbd5e1; } .lm-act-pill--rm { color: #94a3b8; border-color: #eef2f6; } .lm-act-pill--rm:hover { color: #f43f5e; border-color: #fecdd3; background: #fff1f2; } /* Desfazer compacto (só X) — usado na aba Matches para caber tudo em uma linha */ .lm-act-x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; border: 1px solid #fecdd3; background: #fff1f2; color: #f43f5e; cursor: pointer; transition: background-color .15s, border-color .15s; flex: 0 0 auto; } .lm-act-x:hover { background: #ffe4e6; border-color: #fda4af; } .lm-act-x .material-symbols-outlined { font-size: 18px; } /* Botão de filtro no topo (abre o sheet) + contador discreto */ .lm-head-btn .lm-head-badge { background: var(--primary); } /* Bottom sheet de filtros (estilo Booking/QuintoAndar) */ .lm-sheet { position: fixed; inset: 0; z-index: 60; display: none; } .lm-sheet.is-open { display: block; } .lm-sheet__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); } .lm-sheet__panel { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 28rem; background: #fff; border-radius: 22px 22px 0 0; padding: 16px 20px max(env(safe-area-inset-bottom), 18px); max-height: 82vh; overflow-y: auto; box-shadow: 0 -12px 40px rgba(15, 23, 42, .22); } .lm-sheet__handle { width: 40px; height: 4px; border-radius: 9999px; background: #e2e8f0; margin: 2px auto 14px; } .lm-sheet__chips { display: flex; flex-wrap: wrap; gap: 8px; } .lm-sheet-chip { cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 9999px; color: #475569; background: #fff; border: 1px solid #e2e8f0; transition: color .15s, background-color .15s, border-color .15s; } .lm-sheet-chip.is-active { color: #fff; background: var(--primary); border-color: var(--primary); } /* ── Formulário de Perfil (editar-est / editar-prof) ─────────────── "Só reestilizar": cada
do form vira um card branco do design system, mantendo todos os campos/handlers. */ .lm-edit-form > section { background: #fff; border: 1px solid #eef2f6; border-radius: 18px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -14px rgba(15, 23, 42, .12); } .lm-edit-form > section h3 { font-size: 15px; } /* Foto/avatar no topo do form (capa leve na cor do perfil) */ .lm-edit-photo { position: relative; background: linear-gradient(180deg, var(--primary-soft), #fff); border: 1px solid var(--primary-border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; align-items: center; } .lm-edit-avatar { width: 96px; height: 96px; border-radius: 9999px; overflow: hidden; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 18px -8px rgba(15, 23, 42, .3); display: flex; align-items: center; justify-content: center; } /* Itens em grid (ex.: checkboxes de área) podem encolher e quebrar o texto sem estourar */ .lm-edit-form .grid > label { min-width: 0; } .lm-edit-form .grid > label > span { min-width: 0; overflow-wrap: anywhere; }