/* ============================================================ FONTE — Plus Jakarta Sans (DEVE estar no topo) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); /* * ============================================================ * GLOBAL-UNIFIED.CSS — acompanhante-local.com * Versão 2.0 · Março 2026 * * CSS UNIFICADO compatível com Site Público + Painel Admin * * COMO USAR: * Adicione no de TODOS os layouts: * * * SITE PÚBLICO: Adicione class="public-site" no * PAINEL ADMIN: Adicione class="admin-panel" no (ou deixe sem classe) * * SEÇÕES: * 1. Variáveis globais compartilhadas (não conflitantes) * 2. Reset e base (escopo limitado) * 3. Componentes do Site Público (prefixo .public-site) * 4. Utilitários universais (sem conflito) * 5. Ícones SVG (biblioteca inline) * 6. Responsividade global * ============================================================ */ /* ============================================================ 1. VARIÁVEIS GLOBAIS COMPARTILHADAS Variáveis com nomes únicos que não conflitam com admin.css ============================================================ */ :root { /* Cores do site público (prefixo al-) */ --al-pink: #e91e8c; --al-pink-light: #fdf0f7; --al-pink-mid: #fce4f3; --al-pink-dark: #c0166d; --al-blue-brand: #1A56A0; --al-blue-light: #eff6ff; --al-bg: #f4f5fb; --al-white: #ffffff; --al-text: #1a1a2e; --al-muted: #6b6b8a; --al-border: #e8e8f0; --al-green: #22c55e; /* Sombras */ --al-shadow: 0 2px 12px rgba(0,0,0,0.06); --al-shadow-hover: 0 8px 32px rgba(233,30,140,0.15); --al-shadow-card: 0 4px 20px rgba(0,0,0,0.08); /* Bordas e raios */ --al-radius: 14px; --al-radius-sm: 8px; --al-radius-lg: 20px; /* Tipografia */ --al-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Largura máxima do conteúdo */ --al-max-width: 1200px; /* Navbar */ --al-nav-height: 64px; } /* ============================================================ 2. RESET E BASE - APENAS PARA SITE PÚBLICO Aplicado somente quando body tem class="public-site" ============================================================ */ .public-site *, .public-site *::before, .public-site *::after { box-sizing: border-box; } .public-site { background: var(--al-bg); color: var(--al-text); font-family: var(--al-font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; } .public-site a { color: inherit; text-decoration: none; } .public-site a:hover { text-decoration: none; } .public-site img { display: block; max-width: 100%; height: auto; } .public-site button { cursor: pointer; font-family: var(--al-font); } .public-site input, .public-site select, .public-site textarea { font-family: var(--al-font); } /* ============================================================ 4. COMPONENTES DO SITE PÚBLICO Todos com prefixo .public-site para evitar conflitos ============================================================ */ /* — Logo bicolor — */ .public-site .brand-logo { font-weight: 800; letter-spacing: -0.3px; color: var(--al-pink); } .public-site .brand-logo span { color: var(--al-blue-brand); } .public-site .nav-logo, .public-site .navbar-brand, .public-site .site-logo { font-weight: 800; letter-spacing: -0.3px; } .public-site .nav-logo .word-local, .public-site .footer-brand .word-local { color: var(--al-blue-brand); } .public-site .nav-logo .word-acompanhante, .public-site .footer-brand .word-acompanhante { color: var(--al-pink); } /* — Navegação — */ .public-site .al-nav { background: var(--al-white); border-bottom: 1px solid var(--al-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0,0,0,0.05); } .public-site .al-nav-inner { max-width: var(--al-max-width); margin: 0 auto; padding: 0 24px; height: var(--al-nav-height); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .public-site .al-nav-links { display: flex; align-items: center; gap: 6px; } .public-site .al-nav-links a { font-size: 13px; font-weight: 500; color: var(--al-muted); padding: 6px 12px; border-radius: var(--al-radius-sm); transition: all .2s; display: flex; align-items: center; gap: 6px; } .public-site .al-nav-links a:hover { color: var(--al-text); background: var(--al-bg); } .public-site .al-btn-entrar { background: var(--al-pink); color: #fff; padding: 8px 18px; border-radius: 10px; font-weight: 700; transition: background .2s; } .public-site .al-btn-entrar:hover { background: var(--al-pink-dark); } .public-site .al-btn-anunciar { color: var(--al-pink); font-weight: 700; } .public-site .al-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .public-site .al-hamburger span { display: block; width: 22px; height: 2px; background: var(--al-text); border-radius: 2px; transition: all .3s; } .public-site .al-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .public-site .al-hamburger.open span:nth-child(2) { opacity: 0; } .public-site .al-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* — Botões — */ .public-site .btn-pink { display: inline-flex; align-items: center; gap: 8px; background: var(--al-pink); color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 14px; border: none; transition: background .2s, transform .2s; cursor: pointer; font-family: var(--al-font); } .public-site .btn-pink:hover { background: var(--al-pink-dark); transform: translateY(-1px); } .public-site .btn-outline { display: inline-flex; align-items: center; gap: 8px; background: var(--al-white); color: var(--al-text); padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 14px; border: 1.5px solid var(--al-border); transition: all .2s; cursor: pointer; font-family: var(--al-font); } .public-site .btn-outline:hover { border-color: var(--al-pink); color: var(--al-pink); } .public-site .btn-whatsapp { display: inline-flex; align-items: center; gap: 8px; background: #25d366; color: #fff; padding: 10px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; border: none; transition: background .2s; cursor: pointer; font-family: var(--al-font); } .public-site .btn-whatsapp:hover { background: #1ebe5d; } /* — Cards de Anúncio — */ .public-site .al-ad-card { background: var(--al-white); border-radius: var(--al-radius); border: 1px solid var(--al-border); overflow: hidden; box-shadow: var(--al-shadow); transition: transform .25s, box-shadow .25s, border-color .25s; cursor: pointer; display: flex; flex-direction: column; } .public-site .al-ad-card:hover { transform: translateY(-4px); box-shadow: var(--al-shadow-hover); border-color: #f5b8df; } .public-site .al-ad-card-img { position: relative; width: 100%; padding-top: 130%; overflow: hidden; background: var(--al-bg); } .public-site .al-ad-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .public-site .al-ad-card:hover .al-ad-card-img img { transform: scale(1.06); } .public-site .al-ad-card-badge { position: absolute; top: 8px; left: 8px; background: var(--al-pink); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; } .public-site .al-ad-card-badge.destaque { background: #f59e0b; } .public-site .al-ad-card-badge.verificado { background: var(--al-green); } .public-site .al-ad-card-body { padding: 11px 12px 12px; flex: 1; display: flex; flex-direction: column; } .public-site .al-ad-card-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .public-site .al-ad-card-loc { font-size: 12px; color: var(--al-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .public-site .al-ad-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; } .public-site .al-ad-card-price { font-size: 14px; font-weight: 800; color: var(--al-pink); } .public-site .al-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 14px; } /* — Footer — */ .public-site .al-footer { background: var(--al-white); border-top: 1px solid var(--al-border); padding: 40px 24px 24px; } .public-site .al-footer-inner { max-width: var(--al-max-width); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; margin-bottom: 32px; } .public-site .al-footer-brand { font-size: 17px; font-weight: 800; margin-bottom: 8px; } .public-site .al-footer-tagline { font-size: 13px; color: var(--al-muted); } .public-site .al-footer-col h4 { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--al-text); } .public-site .al-footer-col a { display: block; font-size: 13px; color: var(--al-muted); margin-bottom: 8px; transition: color .2s; } .public-site .al-footer-col a:hover { color: var(--al-pink); } .public-site .al-footer-bottom { max-width: var(--al-max-width); margin: 0 auto; border-top: 1px solid var(--al-border); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--al-muted); } /* — Notices — */ .public-site .al-notice { display: flex; gap: 14px; align-items: flex-start; border-radius: var(--al-radius-sm); padding: 18px 20px; margin: 16px 0; } .public-site .al-notice--warning { background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0; } .public-site .al-notice--info { background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #3b82f6; border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0; } .public-site .al-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #22c55e; border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0; } .public-site .al-notice--danger { background: #fff1f2; border: 1px solid #fecdd3; border-left: 4px solid #f43f5e; border-radius: 0 var(--al-radius-sm) var(--al-radius-sm) 0; } .public-site .al-notice-body strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; } .public-site .al-notice-body p { font-size: 13px; color: var(--al-muted); line-height: 1.75; margin-bottom: 6px; } /* — Badges — */ .public-site .al-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .public-site .al-badge--pink { background: var(--al-pink-light); color: var(--al-pink-dark); } .public-site .al-badge--blue { background: var(--al-blue-light); color: var(--al-blue-brand); } .public-site .al-badge--green { background: #f0fdf4; color: #166534; } .public-site .al-badge--amber { background: #fffbeb; color: #92400e; } /* — Componentes diversos — */ .public-site .al-skeleton { background: linear-gradient(90deg, #f0f0f5 25%, #e8e8ef 50%, #f0f0f5 75%); background-size: 200% 100%; animation: al-shimmer 1.4s infinite; border-radius: var(--al-radius-sm); } @keyframes al-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .public-site .al-divider { border: none; border-top: 1px solid var(--al-border); margin: 28px 0; } .public-site .al-container { max-width: var(--al-max-width); margin: 0 auto; padding: 0 24px; } .public-site .al-section { padding: 48px 0; } .public-site .al-section-sm { padding: 28px 0; } /* ============================================================ 5. UTILITÁRIOS UNIVERSAIS Classes utilitárias que podem ser usadas em qualquer lugar Prefixo "al-" para evitar conflitos ============================================================ */ .al-text-pink { color: var(--al-pink) !important; } .al-text-blue { color: var(--al-blue-brand) !important; } .al-text-muted { color: var(--al-muted) !important; } .al-text-bold { font-weight: 700 !important; } .al-flex { display: flex !important; align-items: center !important; gap: 8px !important; } .al-flex-wrap { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .al-mt-1 { margin-top: 8px !important; } .al-mt-2 { margin-top: 16px !important; } .al-mt-3 { margin-top: 24px !important; } .al-mt-4 { margin-top: 32px !important; } .al-mb-1 { margin-bottom: 8px !important; } .al-mb-2 { margin-bottom: 16px !important; } .al-mb-3 { margin-bottom: 24px !important; } .al-mb-4 { margin-bottom: 32px !important; } /* ============================================================ 6. ÍCONES SVG Biblioteca de ícones inline — estilo linha fina Podem ser usados em qualquer lugar ============================================================ */ .icon-svg { width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .icon-svg-sm { width: 14px; height: 14px; } .icon-svg-md { width: 18px; height: 18px; } .icon-svg-lg { width: 22px; height: 22px; } .icon-svg-xl { width: 28px; height: 28px; } /* ============================================================ 7. RESPONSIVIDADE GLOBAL Breakpoints para site público ============================================================ */ /* — Desktop (1024px+) — */ @media (min-width: 1024px) { .public-site .al-ads-grid { gap: 20px; } .public-site .al-container { padding: 0 32px; } .public-site .al-section { padding: 56px 0; } .public-site .al-section-sm { padding: 32px 0; } .public-site .al-footer { padding: 48px 32px 28px; } .public-site .al-ad-card-body { padding: 14px 14px 14px; } .public-site .al-notice { padding: 20px 24px; } } /* — Large Desktop (1920px+) — */ @media (min-width: 1920px) { .public-site { font-size: 16px; } .public-site .al-ads-grid { gap: 24px; } .public-site .al-section { padding: 64px 0; } .public-site .al-ad-card-name { font-size: 15px; } .public-site .al-ad-card-price { font-size: 15px; } } /* — 4K Desktop (2560px+) — */ @media (min-width: 2560px) { :root { --al-max-width: 1400px; } .public-site .al-ads-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; } .public-site .al-section { padding: 72px 0; } } /* — Tablet — */ @media (max-width: 900px) { :root { --al-nav-height: 60px; } .public-site .al-ads-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .public-site .al-section { padding: 36px 0; } } /* — Mobile — */ @media (max-width: 600px) { :root { --al-nav-height: 56px; } .public-site .al-container { padding: 0 16px; } .public-site .al-nav-links { display: none; flex-direction: column; align-items: stretch; position: absolute; top: var(--al-nav-height); left: 0; right: 0; background: var(--al-white); border-bottom: 1px solid var(--al-border); padding: 12px 16px; gap: 4px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.10); } .public-site .al-nav-links.open { display: flex; } .public-site .al-nav-links a { padding: 11px 12px; font-size: 14px; } .public-site .al-hamburger { display: flex; } .public-site .al-ads-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .public-site .al-ad-card-img { padding-top: 120%; } .public-site .al-ad-card-body { padding: 8px 10px 10px; } .public-site .al-ad-card-name { font-size: 13px; } .public-site .al-ad-card-price { font-size: 13px; } .public-site .al-notice { flex-direction: column; gap: 8px; padding: 14px 16px; } .public-site .al-footer-inner { grid-template-columns: 1fr; gap: 20px; } .public-site .al-footer-bottom { flex-direction: column; gap: 4px; font-size: 11px; } .public-site .al-footer { padding: 32px 16px 20px; } .public-site .al-section { padding: 28px 0; } .public-site .al-section-sm { padding: 18px 0; } } /* — Small mobile — */ @media (max-width: 380px) { .public-site .al-ads-grid { grid-template-columns: 1fr; } } /* ============================================================ FIM DO GLOBAL-UNIFIED.CSS ============================================================ */