/*
* PortalDaNoiva — Design System Compartilhado
* Versão: 1.0
*
* Inclua este arquivo em todas as interfaces do sistema:
*
*
* Fontes: adicione no do HTML (antes deste link):
*
*
*/
/* ═══════════════════════════════════════════════════════════════════
TOKENS — Paleta PortalDaNoiva Premium
Cobre todos os alias usados nos arquivos do sistema
═══════════════════════════════════════════════════════════════════ */
:root {
/* ── Fundos ── */
--bg: #FAF6EF;
--cream: #FAF6EF; /* alias painel.html */
--cream2: #F0E4CC; /* alias painel.html */
--surface: #FFFFFF;
--card: #FFFFFF;
/* ── Bordas ── */
--border: #E8DCCB;
/* ── Dourado principal ── */
--gold: #C9A96E;
--gold-dk: #A98445; /* alias painel.html / casal-editor */
--gold-dark: #A98445; /* alias admin/index */
--gold-lt: #F5EDD8; /* alias casal-editor */
/* ── Texto ── */
--text: #2B1E16;
--muted: #8A7765;
--text-soft: #8A7765; /* alias admin/index */
--text-light: #B5A896; /* alias admin/index */
/* ── Status ── */
--success: #6FA77A;
--green: #6FA77A; /* alias admin/index */
--danger: #B85C5C;
--red: #B85C5C; /* alias admin/index */
--warn: #C98A4A;
--info: #4A8AB5;
/* ── Superfícies premium ── */
--surface-alt: #FBF7F2; /* sidebar e section-header fundo quente */
--border-soft: #F4EDE3; /* bordas mais suaves entre seções */
--text-mid: #6B5744; /* texto médio — entre muted e text */
--soft: #C2B3A5; /* elementos decorativos suaves */
--gold-glow: rgba(201,169,110,.16); /* glow dourado para hover/focus */
--shadow-xs: 0 1px 4px rgba(61,43,31,.05); /* sombra micro para cards */
/* ── Efeitos ── */
--radius: 10px;
--shadow: 0 2px 20px rgba(43,30,22,0.09);
--shadow-md: 0 6px 32px rgba(43,30,22,0.14);
--shadow-sm: 0 1px 6px rgba(43,30,22,0.06);
/* ── Tipografia ── */
--font-serif: 'Playfair Display', Georgia, serif;
--font-sans: 'Inter', 'Montserrat', sans-serif;
}
/* ═══════════════════════════════════════════════════════════════════
RESET GLOBAL
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
}
/* ═══════════════════════════════════════════════════════════════════
TIPOGRAFIA BASE
═══════════════════════════════════════════════════════════════════ */
/* Títulos elegantes */
.portal-title,
.page-title,
.panel-title,
.modal-title,
.plan-modal-title,
.card-names,
.header-title,
.toolbar-left h1 {
font-family: var(--font-serif);
}
/* ═══════════════════════════════════════════════════════════════════
TOAST GLOBAL
═══════════════════════════════════════════════════════════════════ */
.toast {
position: fixed;
bottom: 28px;
right: 28px;
background: var(--text);
color: #fff;
padding: 12px 22px;
border-radius: 10px;
font-size: 0.85rem;
font-family: var(--font-sans);
font-weight: 500;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.28s, transform 0.28s;
pointer-events: none;
z-index: 9999;
max-width: 340px;
line-height: 1.4;
box-shadow: var(--shadow-md);
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warn); }
/* ═══════════════════════════════════════════════════════════════════
BADGES PREMIUM
═══════════════════════════════════════════════════════════════════ */
.badge-published,
.status-badge.published {
background: rgba(111,167,122,0.13);
color: #4a8558;
border: 1px solid rgba(111,167,122,0.35);
}
.badge-draft,
.status-badge.draft {
background: rgba(180,168,150,0.12);
color: var(--text-soft);
border: 1px solid var(--border);
}
/* ═══════════════════════════════════════════════════════════════════
BOTÕES GLOBAIS PREMIUM
═══════════════════════════════════════════════════════════════════ */
/* Botão primário dourado */
.portal-btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 22px;
background: var(--gold);
color: #fff;
border: none;
border-radius: 8px;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s;
letter-spacing: 0.02em;
text-decoration: none;
}
.portal-btn-primary:hover {
background: var(--gold-dk);
box-shadow: 0 3px 12px rgba(201,169,110,0.32);
}
/* Botão ghost */
.portal-btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: transparent;
border: 1.5px solid var(--border);
border-radius: 8px;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 500;
color: var(--muted);
cursor: pointer;
transition: all 0.18s;
text-decoration: none;
}
.portal-btn-ghost:hover {
border-color: var(--gold);
color: var(--gold-dk);
background: rgba(201,169,110,0.06);
}
/* ═══════════════════════════════════════════════════════════════════
HEADER PREMIUM COMPARTILHADO
═══════════════════════════════════════════════════════════════════ */
.portal-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 28px;
height: 64px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 12px rgba(43,30,22,0.07);
}
.portal-header-brand {
display: flex;
align-items: center;
gap: 12px;
}
.portal-header-logo {
width: 36px;
height: 36px;
background: var(--gold);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
flex-shrink: 0;
}
.portal-header-wordmark {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--text);
letter-spacing: 0.02em;
line-height: 1.1;
}
.portal-header-sub {
font-family: var(--font-sans);
font-size: 10px;
color: var(--text-light);
letter-spacing: 0.09em;
text-transform: uppercase;
margin-top: 1px;
}
/* ═══════════════════════════════════════════════════════════════════
SIDEBAR PREMIUM COMPARTILHADA
═══════════════════════════════════════════════════════════════════ */
/* Seções e itens de sidebar — usados em painel.html e casal-editor.html */
.sidebar-section {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.13em;
color: var(--text-light);
padding: 18px 20px 6px;
}
.tab-item {
font-family: var(--font-sans) !important;
}
/* ═══════════════════════════════════════════════════════════════════
CARDS PREMIUM
═══════════════════════════════════════════════════════════════════ */
.stat-card,
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
/* ═══════════════════════════════════════════════════════════════════
FORMULÁRIOS PREMIUM
═══════════════════════════════════════════════════════════════════ */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201,169,110,0.14);
outline: none;
}
/* ═══════════════════════════════════════════════════════════════════
ADMIN BADGE (modo suporte)
═══════════════════════════════════════════════════════════════════ */
.admin-badge {
padding: 3px 12px;
background: #fef3e2;
color: #a05a08;
border-radius: 20px;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid #f5d9a0;
}
/* ═══════════════════════════════════════════════════════════════════
SCROLLBAR ELEGANTE
═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-lt); }
/* ═══════════════════════════════════════════════════════════════════
SELEÇÃO DE TEXTO
═══════════════════════════════════════════════════════════════════ */
::selection {
background: rgba(201,169,110,0.22);
color: var(--text);
}