:root {
/* Color Palette - Verde Musgo & Oliva Nobre */
--bg-primary: #0A120E;
--bg-secondary: #0E1A14;
--bg-card: rgba(18, 32, 25, 0.72);
--bg-card-hover: rgba(24, 43, 33, 0.85);
--bg-elevated: #16281F;
--bg-glass: rgba(14, 26, 20, 0.65);
--color-moss-900: #0A120E;
--color-moss-800: #101E17;
--color-moss-700: #182C22;
--color-moss-600: #234233;
--color-moss-500: #2E5643;
--color-moss-400: #42785F;
--color-moss-300: #5FA584;
/* Ouro Champagne & Luxo */
--color-gold-100: #FCF8EA;
--color-gold-200: #F6ECC9;
--color-gold-300: #EDDA9B;
--color-gold-400: #DFC16E;
--color-gold-500: #CBA548;
--color-gold-600: #AD8530;
--color-gold-700: #88651E;
/* Concreto / Grafite / Neutral */
--color-concrete-900: #111513;
--color-concrete-800: #1A201C;
--color-concrete-700: #2A332E;
--color-concrete-600: #424D46;
--color-concrete-400: #7C8B82;
--color-concrete-300: #A8B5AE;
--color-concrete-100: #E6ECE9;
--color-white: #FFFFFF;
/* Status Colors */
--color-success: #22C55E;
--color-success-bg: rgba(34, 197, 94, 0.12);
--color-whatsapp: #25D366;
--color-cakto: #FF4F00;
/* Gradients */
--gradient-gold: linear-gradient(135deg, #F8EDC5 0%, #D8B155 50%, #B3862A 100%);
--gradient-gold-subtle: linear-gradient(135deg, rgba(216, 177, 85, 0.15) 0%, rgba(179, 134, 42, 0.03) 100%);
--gradient-moss-hero: linear-gradient(140deg, #13241C 0%, #0A120E 100%);
--gradient-card: linear-gradient(145deg, rgba(24, 42, 33, 0.5) 0%, rgba(14, 26, 20, 0.75) 100%);
--gradient-glow: radial-gradient(circle at 50% 0%, rgba(203, 165, 72, 0.15) 0%, transparent 70%);
/* Borders & Shadows */
--border-subtle: rgba(255, 255, 255, 0.08);
--border-moss: rgba(66, 120, 95, 0.25);
--border-gold: rgba(203, 165, 72, 0.35);
--border-gold-glow: rgba(223, 193, 110, 0.6);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
--shadow-gold: 0 0 24px rgba(203, 165, 72, 0.2);
/* Typography */
--font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
/* Spacings & Layout */
--header-height: 72px;
--header-height-mobile: 58px;
--sidebar-width: 288px;
--sidebar-width-collapsed: 80px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* Transitions */
--transition-fast: 0.18s ease;
--transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
/* Cursores customizados (modelo VipHub recolorido para a paleta Verde Musgo Ekoz) */
--cursor-default: url("data:image/svg+xml;utf8,")
1 1, auto;
--cursor-pointer: url("data:image/svg+xml;utf8,")
13 3, pointer;
--cursor-blocked: url("data:image/svg+xml;utf8,")
12 12, not-allowed;
}
/* Safe areas do aparelho (Dynamic Island, notch, home bar). Ficam aqui, com os
demais tokens, porque outros arquivos calculam em cima delas. Em desktop e
em navegador sem entalhe todas valem 0px. */
:root {
--sat: env(safe-area-inset-top, 0px);
--sar: env(safe-area-inset-right, 0px);
--sab: env(safe-area-inset-bottom, 0px);
--sal: env(safe-area-inset-left, 0px);
/* Altura real ocupada pelo cabeçalho, já somada a safe area do topo.
Quem precisa se posicionar abaixo do header usa este token — nunca
--header-height cru, que ignora o entalhe. */
--app-header-h: calc(var(--header-height) + var(--sat));
}
@media (max-width: 768px) {
:root {
--app-header-h: calc(var(--header-height-mobile) + var(--sat));
}
}
/* ==========================================================================
EKOZ LUXURY ECOSYSTEM - COMPONENT STYLES
========================================================================== */
/* Navbar */
.navbar-container {
height: var(--header-height);
background: rgba(10, 18, 14, 0.88);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-subtle);
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.75rem;
}
.navbar-left {
display: flex;
align-items: center;
gap: 2rem;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 0.85rem;
cursor: pointer;
}
.navbar-logo-img {
height: 32px;
width: auto;
filter: drop-shadow(0 0 10px rgba(203, 165, 72, 0.35));
}
/* Emblema + EKOZ no computador; no celular só o emblema, porque a barra
divide a largura com a busca e os botões. */
.navbar-logo-mark {
display: none;
}
.navbar-subtitle {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--color-concrete-400);
margin-top: 0.15rem;
}
.navbar-search-wrapper {
position: relative;
width: 320px;
}
.navbar-search-input {
width: 100%;
background: rgba(18, 32, 25, 0.65);
border: 1px solid var(--border-moss);
border-radius: var(--radius-full);
padding: 0.55rem 1rem 0.55rem 2.4rem;
color: var(--color-white);
font-size: 0.85rem;
outline: none;
transition: all var(--transition-fast);
}
.navbar-search-input:focus {
border-color: var(--color-gold-500);
background: rgba(22, 40, 31, 0.9);
box-shadow: 0 0 0 3px rgba(203, 165, 72, 0.15);
}
.search-icon {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: var(--color-concrete-400);
}
.navbar-search-results {
position: absolute;
top: calc(100% + 0.4rem);
left: 0;
right: 0;
background: rgba(15, 26, 20, 0.98);
border: 1px solid var(--border-moss);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
padding: 0.35rem;
z-index: 200;
max-height: 340px;
overflow-y: auto;
}
.navbar-search-result-item {
display: flex;
align-items: center;
gap: 0.65rem;
width: 100%;
padding: 0.5rem 0.6rem;
background: transparent;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast);
}
.navbar-search-result-item:hover {
background: rgba(22, 40, 31, 0.9);
}
.search-result-avatar {
width: 34px;
height: 34px;
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
}
.search-result-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.search-result-name {
color: var(--color-white);
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search-result-meta {
color: var(--color-concrete-400);
font-size: 0.72rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navbar-search-empty {
padding: 0.75rem 0.6rem;
color: var(--color-concrete-400);
font-size: 0.8rem;
text-align: center;
}
/* Busca no mobile: botão de lupa no header + barra full-width abaixo dele.
No desktop o toggle some (a barra fica à esquerda no navbar). */
.navbar-mobile-search-toggle {
display: none;
}
.navbar-mobile-search {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(10, 18, 14, 0.98);
border-bottom: 1px solid var(--border-moss);
padding: 0.6rem 0.75rem;
z-index: 99;
}
.navbar-mobile-search-inner {
position: relative;
}
@media (min-width: 769px) {
.navbar-mobile-search {
display: none;
}
}
/* ==========================================================================
Edit Profile Modal & Identity Card
========================================================================== */
.edit-profile-modal {
max-width: 620px;
width: 100%;
padding: 2.25rem 2.25rem 2rem 2.25rem;
background: linear-gradient(180deg, #101E17 0%, #0B140F 100%);
border: 1px solid rgba(203, 165, 72, 0.4);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(203, 165, 72, 0.12);
border-radius: 20px;
box-sizing: border-box;
}
.edit-profile-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.edit-profile-title-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.edit-profile-badge-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.edit-profile-modal-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-white);
letter-spacing: -0.01em;
margin: 0.2rem 0 0 0;
}
.edit-profile-modal-subtitle {
font-size: 0.84rem;
color: var(--color-concrete-300);
line-height: 1.45;
margin: 0;
}
.edit-profile-close-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-concrete-300);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all var(--transition-fast);
}
.edit-profile-close-btn:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--color-white);
border-color: rgba(203, 165, 72, 0.4);
}
/* Identity Card */
.edit-profile-identity-card {
display: flex;
align-items: center;
gap: 1.25rem;
padding: 1.2rem 1.35rem;
margin-bottom: 1.35rem;
background: rgba(46, 86, 67, 0.18);
border: 1px solid rgba(203, 165, 72, 0.25);
border-radius: 14px;
}
.edit-profile-avatar-wrapper {
position: relative;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.edit-profile-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
border: 2.5px solid var(--color-gold-400);
box-shadow: 0 0 16px rgba(203, 165, 72, 0.25);
}
.edit-profile-avatar-badge {
position: absolute;
bottom: -2px;
right: -2px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--color-gold-500);
color: #0E1913;
border: 2px solid #0E1913;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
transition: transform var(--transition-fast);
}
.edit-profile-avatar-badge:hover {
transform: scale(1.1);
background: var(--color-gold-400);
}
.edit-profile-identity-info {
display: flex;
flex-direction: column;
gap: 0.3rem;
min-width: 0;
flex: 1;
}
.edit-profile-identity-top {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.edit-profile-identity-name {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-white);
margin: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.edit-profile-identity-headline {
font-size: 0.84rem;
color: var(--color-concrete-300);
margin: 0;
line-height: 1.35;
}
.edit-profile-identity-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.85rem;
margin-top: 0.2rem;
}
.edit-profile-meta-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.76rem;
color: var(--color-concrete-400);
}
.edit-profile-avatar-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.4rem;
}
.edit-profile-photo-error {
padding: 0.6rem 0.85rem;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 8px;
color: #FCA5A5;
font-size: 0.8rem;
margin-bottom: 1rem;
}
/* Edit Form */
.edit-profile-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-section-header {
padding-top: 0.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.form-section-title {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--color-gold-400);
}
.edit-profile-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1.25rem;
margin-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.btn-profile-logout {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: #EF4444;
border: 1px solid rgba(239, 68, 68, 0.25);
background: rgba(239, 68, 68, 0.06);
padding: 0.5rem 0.85rem;
border-radius: var(--radius-sm);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-profile-logout:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #F87171;
}
.edit-profile-footer-right {
display: flex;
align-items: center;
gap: 0.65rem;
}
.edit-profile-save-btn {
box-shadow: 0 4px 16px rgba(203, 165, 72, 0.25);
}
.btn-xs {
padding: 0.3rem 0.65rem;
font-size: 0.75rem;
border-radius: var(--radius-sm);
}
.edit-profile-biz-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: transparent;
border: none;
color: var(--color-gold-400);
font-size: 0.74rem;
font-weight: 500;
cursor: pointer;
padding: 0.2rem 0;
margin-top: 0.15rem;
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--transition-fast);
}
.edit-profile-biz-link:hover {
color: #FFFFFF;
}
@media (max-width: 640px) {
.edit-profile-modal {
padding: 1.5rem 1.15rem;
}
.edit-profile-identity-card {
flex-direction: column;
text-align: center;
align-items: center;
}
.edit-profile-identity-top {
justify-content: center;
}
.edit-profile-identity-meta {
justify-content: center;
}
.edit-profile-avatar-actions {
justify-content: center;
}
.edit-profile-footer {
flex-direction: column-reverse;
gap: 0.75rem;
}
.edit-profile-footer-right {
width: 100%;
}
.edit-profile-footer-right .btn {
flex: 1;
justify-content: center;
}
.btn-profile-logout {
width: 100%;
justify-content: center;
}
}
.lazy-view-loading {
padding: 3rem 1rem;
text-align: center;
color: var(--color-concrete-400);
font-size: 0.9rem;
}
/* Modal de confirmação on-brand */
.confirm-dialog {
max-width: 440px;
}
.confirm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: rgba(203, 165, 72, 0.14);
color: var(--color-gold-500);
flex-shrink: 0;
}
.confirm-icon.danger {
background: rgba(239, 68, 68, 0.14);
color: #f87171;
}
.btn-danger {
background: linear-gradient(135deg, #ef4444, #b91c1c);
color: #fff;
border: 1px solid rgba(239, 68, 68, 0.5);
}
.btn-danger:hover {
background: linear-gradient(135deg, #f05252, #c81e1e);
box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}
.navbar-right {
display: flex;
align-items: center;
gap: 1.1rem;
}
.navbar-tool-btn {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(37, 211, 102, 0.12);
color: #4ADE80;
border: 1px solid rgba(37, 211, 102, 0.3);
padding: 0.45rem 0.85rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.navbar-tool-btn:hover {
background: rgba(37, 211, 102, 0.22);
}
.status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #25D366;
box-shadow: 0 0 8px #25D366;
}
.navbar-icon-btn {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-concrete-200);
cursor: pointer;
position: relative;
transition: all var(--transition-fast);
}
.navbar-icon-btn:hover {
background: rgba(203, 165, 72, 0.15);
border-color: var(--border-gold);
color: var(--color-gold-300);
}
.badge-count {
position: absolute;
top: -4px;
right: -4px;
background: #25D366;
color: #000;
font-size: 0.65rem;
font-weight: 800;
width: 17px;
height: 17px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.count-gold {
background: var(--gradient-gold);
color: #0F1713;
}
/* User Pill */
.navbar-user-pill {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.35rem 0.75rem 0.35rem 0.4rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
}
.user-avatar-wrap {
position: relative;
}
.user-avatar-img {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--color-gold-400);
}
.online-indicator {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: #22C55E;
border: 2px solid var(--bg-primary);
}
.user-name-row {
display: flex;
align-items: center;
gap: 0.4rem;
}
.user-name {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-white);
}
.user-company {
font-size: 0.72rem;
color: var(--color-concrete-400);
display: block;
}
/* Notification Dropdown */
.notification-dropdown-wrapper {
position: relative;
}
.notifications-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 340px;
background: #0E1914;
border: 1px solid var(--border-gold);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1rem;
z-index: 1000;
animation: slideUp 0.2s ease-out;
}
.notifications-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 0.75rem;
}
.notifications-list {
display: flex;
flex-direction: column;
gap: 0.65rem;
max-height: 320px;
overflow-y: auto;
}
.notification-item {
display: flex;
gap: 0.75rem;
padding: 0.65rem;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.02);
transition: background var(--transition-fast);
}
.notification-item.unread {
background: rgba(203, 165, 72, 0.08);
border-left: 3px solid var(--color-gold-400);
}
.notification-icon-pill {
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notification-title {
font-weight: 600;
font-size: 0.82rem;
color: var(--color-white);
}
.notification-desc {
font-size: 0.75rem;
color: var(--color-concrete-300);
margin-top: 0.15rem;
}
.notification-time {
font-size: 0.68rem;
color: var(--color-concrete-400);
margin-top: 0.2rem;
display: block;
}
/* Sidebar — recolhível, expande no hover (estilo Meta) */
.sidebar-container {
width: var(--sidebar-width-collapsed);
background: rgba(10, 18, 14, 0.7);
border-right: 1px solid var(--border-subtle);
padding: 1.5rem 1rem 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-shrink: 0;
min-height: calc(100vh - var(--app-header-h));
position: sticky;
top: var(--app-header-h);
overflow: hidden;
transition: width var(--transition-normal);
z-index: 20;
}
.sidebar-container.expanded {
width: var(--sidebar-width);
}
.sidebar-section-title {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--color-concrete-400);
padding: 0 0.75rem 0.75rem;
display: none;
white-space: nowrap;
}
.sidebar-container.expanded .sidebar-section-title {
display: block;
}
.sidebar-nav-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidebar-nav-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0.75rem;
border-radius: var(--radius-md);
border: 1px solid transparent;
background: transparent;
color: var(--color-concrete-300);
font-family: var(--font-main);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.sidebar-container.expanded .sidebar-nav-item {
justify-content: space-between;
padding: 0.75rem 0.95rem;
}
.sidebar-nav-item:hover {
background: rgba(35, 66, 51, 0.35);
color: var(--color-white);
border-color: rgba(66, 120, 95, 0.3);
}
.sidebar-nav-item.active {
background: linear-gradient(90deg, rgba(203, 165, 72, 0.18) 0%, rgba(35, 66, 51, 0.25) 100%);
border-color: var(--border-gold);
color: var(--color-gold-300);
box-shadow: 0 2px 14px rgba(203, 165, 72, 0.12);
}
.nav-item-content {
display: flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.nav-label {
white-space: nowrap;
display: none;
}
.sidebar-container.expanded .nav-label {
display: inline;
}
.sidebar-nav-item .badge {
display: none;
white-space: nowrap;
}
.sidebar-container.expanded .sidebar-nav-item .badge {
display: inline-flex;
}
.sidebar-footer-card {
background: linear-gradient(145deg, rgba(24, 42, 33, 0.75) 0%, rgba(14, 26, 20, 0.95) 100%);
border: 1px solid var(--border-gold);
border-radius: var(--radius-lg);
padding: 1.25rem 1.1rem;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
display: none;
white-space: nowrap;
}
.sidebar-container.expanded .sidebar-footer-card {
display: block;
}
.quote-mark {
font-family: var(--font-display);
font-size: 3rem;
line-height: 1;
color: rgba(203, 165, 72, 0.2);
position: absolute;
top: 0.4rem;
left: 0.8rem;
pointer-events: none;
}
.sidebar-slogan {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.92rem;
color: var(--color-white);
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.slogan-author-row {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
color: var(--color-gold-400);
font-weight: 600;
margin-bottom: 1rem;
}
.sidebar-quick-actions {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.full-width {
width: 100%;
}
/* ==========================================================================
FEED LAYOUT & CARDS
========================================================================== */
.feed-layout-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 2rem;
align-items: start;
width: 100%;
max-width: 100%;
}
.feed-main-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
max-width: 100%;
width: 100%;
}
.feed-right-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
min-width: 0;
max-width: 100%;
width: 100%;
}
/* Hero Slogan Card */
.hero-slogan-card {
padding: 2.25rem 2rem;
background: radial-gradient(circle at 80% 20%, rgba(203, 165, 72, 0.18) 0%, transparent 60%),
linear-gradient(135deg, #13241C 0%, #0A120E 100%);
border: 1px solid var(--border-gold);
border-radius: var(--radius-xl);
}
.hero-badge-row {
display: flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 1rem;
}
.hero-slogan-title {
font-size: 2.2rem;
font-weight: 800;
line-height: 1.18;
margin-bottom: 0.85rem;
}
.hero-slogan-desc {
color: var(--color-concrete-200);
font-size: 0.98rem;
max-width: 680px;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.hero-metrics-row {
display: flex;
align-items: center;
gap: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
width: 100%;
}
.hero-metric-item {
display: flex;
flex-direction: column;
min-width: 0;
}
.metric-val {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 800;
color: var(--color-gold-400);
line-height: 1;
}
.metric-lbl {
font-size: 0.75rem;
color: var(--color-concrete-400);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
word-break: break-word;
white-space: normal;
}
/* Create Post Card */
.create-post-card {
padding: 1.25rem 1.5rem;
}
.create-post-header {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1rem;
}
.create-post-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--color-gold-400);
}
.post-author-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.post-author-name {
font-weight: 700;
color: var(--color-white);
font-size: 0.95rem;
}
.post-author-sub {
font-size: 0.76rem;
color: var(--color-concrete-400);
}
.create-post-textarea {
background: rgba(14, 26, 20, 0.6);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
margin-bottom: 0.75rem;
}
.media-input-wrapper {
margin-bottom: 0.75rem;
}
.create-post-actions-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.category-select-group {
display: flex;
align-items: center;
gap: 0.55rem;
}
.category-label {
font-size: 0.8rem;
color: var(--color-concrete-400);
}
.category-dropdown {
padding: 0.4rem 0.75rem;
font-size: 0.82rem;
width: auto;
}
.create-post-buttons {
display: flex;
align-items: center;
gap: 0.65rem;
}
/* Filter Navigation Bar */
.feed-filter-bar {
overflow-x: auto;
padding-bottom: 0.25rem;
}
.filter-buttons-scroll {
display: flex;
align-items: center;
gap: 0.5rem;
}
.filter-tab-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
padding: 0.45rem 1.15rem;
color: var(--color-concrete-300);
font-family: var(--font-main);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.filter-tab-btn:hover {
background: rgba(35, 66, 51, 0.4);
color: var(--color-white);
}
.filter-tab-btn.active {
background: var(--gradient-gold-subtle);
border-color: var(--color-gold-400);
color: var(--color-gold-300);
box-shadow: 0 0 14px rgba(203, 165, 72, 0.15);
}
/* Post Cards */
.posts-stream {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.post-card {
padding: 1.65rem;
}
.post-pinned {
border-color: var(--border-gold);
background: linear-gradient(145deg, rgba(28, 51, 40, 0.65) 0%, rgba(15, 26, 20, 0.85) 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(203, 165, 72, 0.12);
}
.pinned-header-badge {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: linear-gradient(135deg, rgba(203, 165, 72, 0.25), rgba(173, 133, 48, 0.1));
border: 1px solid var(--border-gold);
border-radius: var(--radius-full);
padding: 0.3rem 0.85rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-gold-300);
margin-bottom: 1.15rem;
}
.post-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
}
.post-author-group {
display: flex;
align-items: flex-start;
gap: 0.85rem;
}
.avatar-wrapper {
position: relative;
}
.author-avatar-img {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--border-gold);
}
.verified-check {
position: absolute;
bottom: -2px;
right: -2px;
background: #0F1713;
color: #4ADE80;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.author-meta {
display: flex;
flex-direction: column;
}
.author-name-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author-name {
font-weight: 700;
font-size: 1rem;
color: var(--color-white);
}
.author-headline {
font-size: 0.8rem;
color: var(--color-concrete-300);
margin-top: 0.1rem;
}
.post-meta-details {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.3rem;
font-size: 0.75rem;
color: var(--color-concrete-400);
}
.meta-separator {
opacity: 0.5;
}
.post-body {
font-size: 0.95rem;
line-height: 1.65;
color: var(--color-concrete-100);
margin-bottom: 1.25rem;
}
.post-paragraph {
margin-bottom: 0.75rem;
}
.post-paragraph:last-child {
margin-bottom: 0;
}
.post-media-container {
margin-bottom: 1.25rem;
border-radius: var(--radius-md);
overflow: hidden;
max-height: 440px;
}
.post-media-img {
width: 100%;
height: auto;
max-height: 440px;
object-fit: cover;
display: block;
}
.post-actions-bar {
display: flex;
align-items: center;
gap: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
}
.post-action-btn {
display: flex;
align-items: center;
gap: 0.45rem;
background: transparent;
border: none;
color: var(--color-concrete-300);
font-family: var(--font-main);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
padding: 0.35rem 0.65rem;
border-radius: var(--radius-sm);
}
.post-action-btn:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--color-white);
}
.post-action-btn.liked {
color: var(--color-gold-400);
}
.comments-drawer {
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.comment-form {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.comment-my-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.comment-input {
padding: 0.5rem 0.85rem;
font-size: 0.85rem;
}
.comments-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.comment-item {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.comment-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
}
.comment-bubble {
background: rgba(14, 26, 20, 0.75);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.65rem 0.85rem;
flex: 1;
}
.comment-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.comment-author-name {
font-weight: 700;
font-size: 0.82rem;
color: var(--color-white);
}
.comment-time {
font-size: 0.7rem;
color: var(--color-concrete-400);
}
.comment-content {
font-size: 0.85rem;
color: var(--color-concrete-200);
}
.no-comments-text {
font-size: 0.82rem;
color: var(--color-concrete-400);
font-style: italic;
}
/* Right Column Widgets */
.feed-right-column {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.ceo-spotlight-card {
padding: 0;
overflow: hidden;
}
.ceo-card-cover {
height: 95px;
background: linear-gradient(135deg, #1C382A 0%, #0F1A14 100%);
position: relative;
padding: 0.75rem;
}
.cover-gradient-tag {
font-size: 0.65rem;
letter-spacing: 0.12em;
font-weight: 800;
color: var(--color-gold-300);
text-transform: uppercase;
}
.ceo-avatar-badge-wrap {
position: relative;
width: 74px;
height: 74px;
margin: -40px auto 0.5rem;
}
.ceo-avatar-img {
width: 74px;
height: 74px;
border-radius: 50%;
object-fit: cover;
border: 2.5px solid var(--color-gold-400);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.verified-crown {
position: absolute;
bottom: 0;
right: 0;
background: var(--gradient-gold);
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-primary);
}
.ceo-info {
padding: 0 1.5rem 1.5rem;
text-align: center;
}
.ceo-name {
font-size: 1.25rem;
font-weight: 800;
}
.ceo-subtitle {
font-size: 0.8rem;
color: var(--color-gold-400);
font-weight: 600;
margin-top: 0.15rem;
}
.ceo-accolade {
font-size: 0.74rem;
color: var(--color-concrete-300);
margin-top: 0.15rem;
}
.ceo-bio-snippet {
font-size: 0.82rem;
color: var(--color-concrete-200);
font-style: italic;
margin: 0.85rem 0 1.25rem;
line-height: 1.5;
}
/* Mini Event Teaser */
.event-teaser-card {
padding: 1.25rem;
}
.event-card-header-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.event-badge-pill {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-gold-400);
}
.event-teaser-title {
font-size: 0.95rem;
line-height: 1.35;
margin-bottom: 0.45rem;
}
.event-teaser-date, .event-teaser-loc {
font-size: 0.78rem;
color: var(--color-concrete-300);
margin-bottom: 0.2rem;
}
/* Experience Teaser */
.experience-teaser-card {
padding: 1.25rem;
border-color: rgba(203, 165, 72, 0.4);
}
.exp-teaser-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.45rem;
}
.exp-teaser-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--color-gold-300);
}
.exp-teaser-desc {
font-size: 0.8rem;
color: var(--color-concrete-200);
line-height: 1.45;
margin-bottom: 0.85rem;
}
/* Members Connect Card */
.members-connect-card {
padding: 1.25rem;
}
.card-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.85rem;
}
.card-section-header h4 {
font-size: 0.92rem;
}
.members-mini-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.member-mini-item {
display: flex;
align-items: center;
gap: 0.65rem;
}
.member-mini-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border-moss);
}
.member-mini-info {
flex: 1;
min-width: 0;
}
.member-mini-name {
font-weight: 600;
font-size: 0.82rem;
color: var(--color-white);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.member-mini-role {
font-size: 0.72rem;
color: var(--color-concrete-400);
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-icon-only {
width: 34px;
height: 34px;
padding: 0;
border-radius: var(--radius-md);
}
/* Lesson Player Modal */
.lesson-player-modal {
max-width: 1060px;
width: 95vw;
padding: 0;
overflow: hidden;
}
.player-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.75rem;
background: #0A120E;
border-bottom: 1px solid var(--border-subtle);
}
.player-course-title {
font-size: 1.15rem;
margin-top: 0.25rem;
}
.modal-close-btn {
background: transparent;
border: none;
color: var(--color-concrete-400);
cursor: pointer;
transition: color var(--transition-fast);
}
.modal-close-btn:hover {
color: var(--color-white);
}
.player-body-grid {
display: grid;
grid-template-columns: 1fr 340px;
height: 680px;
}
.player-video-column {
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 1.5rem;
}
.video-viewport-wrapper {
background: #000;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
position: relative;
box-shadow: var(--shadow-md);
margin-bottom: 1.25rem;
}
.main-video-element {
width: 100%;
height: 100%;
object-fit: contain;
}
.lesson-header-action-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: 1rem;
}
.active-lesson-title {
font-size: 1.1rem;
}
.active-lesson-duration {
font-size: 0.78rem;
color: var(--color-concrete-400);
}
.player-subtabs-nav {
display: flex;
gap: 0.5rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 1rem;
}
.player-subtab-btn {
display: flex;
align-items: center;
gap: 0.45rem;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
padding: 0.65rem 1rem;
color: var(--color-concrete-300);
font-family: var(--font-main);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.player-subtab-btn.active {
color: var(--color-gold-300);
border-bottom-color: var(--color-gold-400);
}
.summary-tab-pane p {
font-size: 0.88rem;
line-height: 1.6;
color: var(--color-concrete-200);
}
.instructor-card-snippet {
display: flex;
align-items: center;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
}
.inst-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--border-gold);
}
.inst-name {
font-weight: 700;
font-size: 0.85rem;
display: block;
}
.inst-role {
font-size: 0.74rem;
color: var(--color-concrete-400);
}
.resource-item-row {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.85rem 1rem;
}
.resource-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.resource-title {
font-weight: 600;
font-size: 0.85rem;
display: block;
}
.resource-size {
font-size: 0.72rem;
color: var(--color-concrete-400);
}
.doubt-input-row {
display: flex;
gap: 0.5rem;
}
.doubts-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.doubt-item {
background: rgba(255, 255, 255, 0.03);
border-radius: var(--radius-md);
padding: 0.75rem;
}
.doubt-author-line {
display: flex;
justify-content: space-between;
margin-bottom: 0.25rem;
}
.doubt-author {
font-weight: 700;
font-size: 0.8rem;
color: var(--color-gold-300);
}
.doubt-time {
font-size: 0.7rem;
color: var(--color-concrete-400);
}
.doubt-text {
font-size: 0.82rem;
color: var(--color-concrete-200);
}
/* Playlist Column */
.player-playlist-column {
background: #0B1410;
border-left: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.playlist-header {
padding: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-subtle);
}
.playlist-title {
font-weight: 700;
font-size: 0.95rem;
}
.playlist-progress {
font-size: 0.75rem;
color: var(--color-gold-400);
font-weight: 600;
}
.module-title-bar {
padding: 0.75rem 1.25rem;
background: rgba(255, 255, 255, 0.02);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-concrete-400);
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.playlist-lesson-item {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.25rem;
border: none;
background: transparent;
color: var(--color-concrete-200);
cursor: pointer;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: all var(--transition-fast);
}
.playlist-lesson-item:hover {
background: rgba(35, 66, 51, 0.3);
}
.playlist-lesson-item.active {
background: rgba(203, 165, 72, 0.12);
border-left: 3px solid var(--color-gold-400);
color: var(--color-white);
}
.lesson-meta-text {
display: flex;
flex-direction: column;
}
.lesson-item-title {
font-size: 0.84rem;
font-weight: 600;
line-height: 1.35;
}
.lesson-item-duration {
font-size: 0.72rem;
color: var(--color-concrete-400);
margin-top: 0.2rem;
}
/* ==========================================================================
MARKETPLACE & THEMATIC CORES
========================================================================== */
.marketplace-view-container {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.marketplace-hero-card {
padding: 2.25rem 2rem;
background: radial-gradient(circle at 85% 15%, rgba(66, 120, 95, 0.2) 0%, transparent 60%),
linear-gradient(135deg, #182C22 0%, #0A120E 100%);
border: 1px solid var(--border-moss);
}
.hero-title-action-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.marketplace-hero-title {
font-size: 2.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.marketplace-hero-desc {
font-size: 0.95rem;
color: var(--color-concrete-200);
max-width: 620px;
line-height: 1.55;
}
.btn-register-biz {
padding: 0.85rem 1.5rem;
font-size: 0.95rem;
}
.cores-tabs-container {
overflow-x: auto;
padding-bottom: 0.5rem;
}
.cores-tabs-scroll {
display: flex;
gap: 0.75rem;
}
.core-tab-btn {
display: flex;
align-items: center;
gap: 0.65rem;
background: rgba(18, 32, 25, 0.65);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
padding: 0.65rem 1.25rem;
color: var(--color-concrete-200);
font-family: var(--font-main);
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.core-tab-btn:hover {
background: rgba(35, 66, 51, 0.45);
color: var(--color-white);
border-color: var(--border-moss);
}
.core-tab-btn.active {
background: var(--gradient-gold-subtle);
border-color: var(--color-gold-400);
color: var(--color-gold-300);
box-shadow: 0 4px 16px rgba(203, 165, 72, 0.15);
}
.core-count-badge {
background: rgba(255, 255, 255, 0.08);
font-size: 0.72rem;
padding: 0.1rem 0.45rem;
border-radius: var(--radius-full);
}
.badge-active {
background: var(--gradient-gold);
color: #0F1713;
font-weight: 800;
}
.marketplace-controls-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.marketplace-search-wrap {
position: relative;
flex: 1;
max-width: 480px;
}
/* Abre espaço pro ícone de lupa (posicionado absoluto à esquerda) não
sobrepor o placeholder — mesmo padrão já usado no admin e na navbar. */
.marketplace-search-wrap .ekoz-input {
padding-left: 2.6rem;
}
.marketplace-search-wrap .search-icon {
left: 0.95rem;
}
.results-count-text {
font-size: 0.85rem;
color: var(--color-concrete-300);
}
.businesses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.75rem;
}
/* Business Card */
.business-card {
padding: 0;
display: flex;
flex-direction: column;
}
.business-featured {
border-color: var(--border-gold);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(203, 165, 72, 0.12);
}
.featured-ribbon {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--gradient-gold);
color: #0F1713;
font-size: 0.68rem;
font-weight: 800;
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
display: flex;
align-items: center;
gap: 0.35rem;
z-index: 2;
}
.business-cover-wrap {
height: 120px;
position: relative;
overflow: hidden;
}
.business-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.business-cover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(14, 26, 20, 0.95) 100%);
}
.business-card-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.business-header-row {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 0.85rem;
margin-top: -2.5rem;
position: relative;
z-index: 1;
}
.business-founder-avatar-wrap {
position: relative;
}
.business-avatar-img {
width: 54px;
height: 54px;
border-radius: var(--radius-md);
object-fit: cover;
border: 2px solid var(--border-gold);
background: var(--bg-primary);
}
.business-verified-badge {
position: absolute;
bottom: -4px;
right: -4px;
background: #0F1713;
border-radius: 50%;
}
.business-name {
font-size: 1.2rem;
font-weight: 800;
line-height: 1.25;
}
.business-founder-line {
font-size: 0.78rem;
color: var(--color-concrete-300);
}
.business-headline {
font-size: 0.88rem;
font-weight: 600;
color: var(--color-gold-300);
line-height: 1.45;
margin-bottom: 0.65rem;
}
.business-description {
font-size: 0.82rem;
color: var(--color-concrete-200);
line-height: 1.55;
margin-bottom: 1rem;
flex: 1;
}
.business-location-row {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--color-concrete-400);
margin-bottom: 0.85rem;
}
.business-tags-wrap {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.business-actions-footer {
display: flex;
flex-direction: column;
gap: 0.55rem;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
margin-top: auto;
}
.business-btn-whatsapp {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.55rem 1rem;
font-size: 0.84rem;
font-weight: 600;
border-radius: var(--radius-sm);
box-shadow: 0 3px 12px rgba(37, 211, 102, 0.2);
transition: all var(--transition-fast);
}
.business-btn-whatsapp:hover {
box-shadow: 0 5px 18px rgba(37, 211, 102, 0.35);
transform: translateY(-1px);
}
.business-secondary-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
gap: 0.5rem;
width: 100%;
}
.business-btn-sub {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.45rem 0.65rem;
font-size: 0.78rem;
font-weight: 500;
border-radius: var(--radius-sm);
text-decoration: none;
min-width: 0;
white-space: nowrap;
border: 1px solid rgba(46, 86, 67, 0.45);
background: rgba(26, 48, 36, 0.35);
color: var(--color-concrete-200);
transition: all var(--transition-fast);
}
.business-btn-sub:hover {
background: rgba(46, 86, 67, 0.65);
border-color: var(--color-gold-400);
color: #FFFFFF;
transform: translateY(-1px);
}
.biz-external-icon {
opacity: 0.65;
flex-shrink: 0;
}
.business-title-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.btn-edit-business-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.55rem;
background: rgba(203, 165, 72, 0.15);
border: 1px solid rgba(203, 165, 72, 0.35);
color: var(--color-gold-400);
border-radius: var(--radius-full);
font-size: 0.68rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.btn-edit-business-pill:hover {
background: rgba(203, 165, 72, 0.28);
color: #FFFFFF;
border-color: var(--color-gold-400);
}
.business-btn-owner-edit {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.48rem 0.85rem;
font-size: 0.8rem;
font-weight: 600;
border-radius: var(--radius-sm);
background: rgba(203, 165, 72, 0.1);
border: 1px dashed rgba(203, 165, 72, 0.4);
color: var(--color-gold-400);
transition: all var(--transition-fast);
}
.business-btn-owner-edit:hover {
background: rgba(203, 165, 72, 0.22);
border-style: solid;
color: #FFFFFF;
border-color: var(--color-gold-400);
}
.flex-1 {
flex: 1;
}
/* Register Business Modal */
.register-business-modal {
max-width: 620px;
width: 100%;
padding: 2.25rem;
background: linear-gradient(180deg, #101E17 0%, #0B140F 100%);
border: 1px solid rgba(203, 165, 72, 0.4);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(203, 165, 72, 0.12);
border-radius: 20px;
box-sizing: border-box;
}
.business-form-media-preview {
display: flex;
flex-direction: column;
gap: 0.85rem;
padding: 1rem;
background: rgba(46, 86, 67, 0.15);
border: 1px solid rgba(203, 165, 72, 0.2);
border-radius: 12px;
margin-bottom: 1.25rem;
}
.biz-cover-preview-box {
position: relative;
width: 100%;
height: 110px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.biz-cover-preview-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.biz-cover-remove-btn {
position: absolute;
top: 6px;
right: 6px;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.7);
color: #F87171;
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
}
.biz-cover-remove-btn:hover {
background: #EF4444;
color: #FFFFFF;
}
.biz-cover-placeholder-box {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem;
border: 1px dashed rgba(203, 165, 72, 0.35);
border-radius: 8px;
color: var(--color-concrete-300);
font-size: 0.8rem;
cursor: pointer;
background: rgba(26, 48, 36, 0.25);
transition: all var(--transition-fast);
}
.biz-cover-placeholder-box:hover {
border-color: var(--color-gold-400);
color: #FFFFFF;
background: rgba(46, 86, 67, 0.3);
}
.biz-avatar-preview-row {
display: flex;
align-items: center;
gap: 1rem;
}
.biz-avatar-preview-wrapper {
position: relative;
width: 60px;
height: 60px;
flex-shrink: 0;
}
.biz-avatar-preview-img {
width: 100%;
height: 100%;
border-radius: 12px;
object-fit: cover;
border: 2px solid var(--color-gold-400);
}
.biz-avatar-upload-btn {
position: absolute;
bottom: -4px;
right: -4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-gold-500);
color: #0E1913;
border: 2px solid #0E1913;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform var(--transition-fast);
}
.biz-avatar-upload-btn:hover {
transform: scale(1.1);
background: var(--color-gold-400);
}
.biz-avatar-preview-info {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.biz-avatar-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-concrete-200);
}
.biz-media-buttons-row {
display: flex;
gap: 0.5rem;
}
.modal-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.modal-title {
font-size: 1.35rem;
margin-top: 0.35rem;
}
.modal-subtitle {
font-size: 0.88rem;
color: var(--color-concrete-300);
margin-bottom: 1.5rem;
}
.register-business-form {
display: flex;
flex-direction: column;
gap: 1.15rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.form-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-concrete-200);
}
.form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.modal-footer-row {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.85rem;
}
/* ==========================================================================
EVENTS & MASTERCLASSES
========================================================================== */
.events-view-container {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.events-hero-card {
padding: 2.25rem 2rem;
background: radial-gradient(circle at 90% 10%, rgba(203, 165, 72, 0.15) 0%, transparent 60%),
linear-gradient(135deg, #1A382A 0%, #0A120E 100%);
border: 1px solid var(--border-gold);
}
.events-hero-title {
font-size: 2.1rem;
font-weight: 800;
margin-bottom: 0.5rem;
}
.events-hero-desc {
font-size: 0.95rem;
color: var(--color-concrete-200);
max-width: 650px;
line-height: 1.55;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1.75rem;
}
.event-card {
padding: 0;
display: flex;
flex-direction: column;
}
.event-card-cover-wrap {
height: 200px;
position: relative;
overflow: hidden;
}
.event-card-cover-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-cover-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 14, 0.95) 100%);
}
.event-type-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(10, 18, 14, 0.85);
backdrop-filter: blur(8px);
border: 1px solid var(--border-gold);
border-radius: var(--radius-full);
padding: 0.25rem 0.75rem;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-gold-300);
}
.event-registered-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(34, 197, 94, 0.9);
color: #000;
font-weight: 800;
border-radius: var(--radius-full);
padding: 0.25rem 0.65rem;
font-size: 0.72rem;
display: flex;
align-items: center;
gap: 0.35rem;
}
.event-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.event-time-row {
display: flex;
align-items: center;
gap: 1.25rem;
margin-bottom: 0.75rem;
font-size: 0.78rem;
color: var(--color-concrete-300);
}
.event-date, .event-hour {
display: flex;
align-items: center;
gap: 0.35rem;
}
.event-title {
font-size: 1.15rem;
line-height: 1.35;
margin-bottom: 0.65rem;
}
.event-location-row {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: var(--color-gold-300);
margin-bottom: 0.85rem;
}
.event-desc {
font-size: 0.82rem;
color: var(--color-concrete-200);
line-height: 1.55;
margin-bottom: 1.25rem;
flex: 1;
}
.event-speaker-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
}
.speaker-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-concrete-400);
display: block;
}
.speaker-name {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-white);
margin-top: 0.15rem;
}
.speaker-role {
font-size: 0.72rem;
color: var(--color-concrete-400);
}
.event-footer-action-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1rem;
border-top: 1px solid var(--border-subtle);
}
.spots-info {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.78rem;
color: var(--color-concrete-300);
}
/* ==========================================================================
VIAGENS & EXPERIÊNCIAS ("Viva a vida que você nunca VIVEU!")
========================================================================== */
.experiences-view-container {
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.experiences-hero-card {
padding: 2.5rem 2rem;
background: radial-gradient(circle at 80% 20%, rgba(203, 165, 72, 0.22) 0%, transparent 65%),
linear-gradient(135deg, #1C3328 0%, #0A120E 100%);
border: 1px solid var(--border-gold);
}
.experiences-hero-title {
font-size: 2.3rem;
font-weight: 800;
margin-bottom: 0.75rem;
}
.experiences-hero-desc {
font-size: 0.98rem;
color: var(--color-concrete-200);
max-width: 720px;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.experiences-features-row {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
}
.exp-feature {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-concrete-100);
}
.experiences-list {
display: flex;
flex-direction: column;
gap: 2.25rem;
}
.experience-card {
padding: 0;
display: grid;
grid-template-columns: 480px 1fr;
overflow: hidden;
border-color: var(--border-gold);
}
.exp-media-column {
display: flex;
flex-direction: column;
height: 100%;
}
.exp-cover-main {
width: 100%;
height: 360px;
object-fit: cover;
}
.exp-mini-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 6px;
padding: 6px;
background: rgba(18, 40, 29, 0.4);
border-top: 1px solid rgba(203, 152, 39, 0.15);
}
.exp-thumb-img {
width: 100%;
height: 90px;
object-fit: cover;
border-radius: var(--radius-sm);
}
.exp-info-column {
padding: 2.25rem;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.exp-header-badges {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.exp-destination-text {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.82rem;
color: var(--color-concrete-300);
}
.exp-title {
font-size: 1.55rem;
line-height: 1.25;
margin-bottom: 0.35rem;
}
.exp-subtitle {
font-size: 0.92rem;
color: var(--color-gold-300);
font-style: italic;
margin-bottom: 0.85rem;
}
.exp-dates-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--color-concrete-300);
margin-bottom: 1rem;
}
.exp-description {
font-size: 0.88rem;
line-height: 1.6;
color: var(--color-concrete-200);
margin-bottom: 1.5rem;
}
.exp-highlights-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.15rem;
margin-bottom: 1.5rem;
}
.highlights-title {
font-weight: 700;
font-size: 0.85rem;
color: var(--color-white);
display: block;
margin-bottom: 0.75rem;
}
.highlights-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.highlights-list li {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.82rem;
color: var(--color-concrete-200);
}
.highlight-bullet-icon {
flex-shrink: 0;
margin-top: 0.15rem;
}
.exp-footer-cta-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
}
.exp-investment-wrap {
display: flex;
flex-direction: column;
}
.inv-label {
font-size: 0.72rem;
text-transform: uppercase;
color: var(--color-concrete-400);
}
.inv-value {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 800;
color: var(--color-gold-400);
}
/* Experience Modal */
.experience-modal {
padding: 2rem;
}
.exp-modal-intro {
font-size: 0.88rem;
color: var(--color-concrete-200);
line-height: 1.55;
margin-bottom: 1.25rem;
}
.exp-application-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.success-confirmation-pane {
padding: 3rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
/* ==========================================================================
VIDEOCALL ROOM (SALA DE VÍDEO INTERNA)
========================================================================== */
.videocall-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
height: calc(100vh - var(--app-header-h) - 4rem);
}
.meeting-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
background: rgba(14, 26, 20, 0.85);
border: 1px solid var(--border-moss);
border-radius: var(--radius-lg);
}
.meeting-title-group {
display: flex;
align-items: center;
gap: 1rem;
}
.meeting-live-pulse {
display: flex;
align-items: center;
gap: 0.4rem;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
}
.pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #EF4444;
animation: pulseGlow 1.5s infinite;
}
.live-text {
font-size: 0.68rem;
font-weight: 800;
color: #EF4444;
}
.meeting-title {
font-size: 1.05rem;
}
.meeting-top-right {
display: flex;
align-items: center;
gap: 1rem;
}
.attendee-pill {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
color: var(--color-concrete-200);
}
.meeting-content-grid {
display: flex;
gap: 1.25rem;
flex: 1;
min-height: 0;
}
.video-tiles-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1rem;
flex: 1;
min-height: 0;
}
.video-tiles-grid.full-width {
flex: 1;
}
.video-tile {
background: #000;
border-radius: var(--radius-lg);
overflow: hidden;
position: relative;
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
}
.video-tile.active-speaker {
border-color: var(--color-gold-400);
box-shadow: 0 0 20px rgba(203, 165, 72, 0.2);
}
.video-element-stream {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-off-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
color: var(--color-concrete-400);
font-size: 0.85rem;
}
.user-avatar-lg {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-gold);
}
.tile-footer {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
right: 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(10, 18, 14, 0.75);
backdrop-filter: blur(8px);
padding: 0.4rem 0.75rem;
border-radius: var(--radius-md);
}
.tile-user-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-white);
}
.tile-icons {
display: flex;
align-items: center;
gap: 0.4rem;
}
.meeting-side-chat {
width: 320px;
display: flex;
flex-direction: column;
padding: 1.25rem;
height: 100%;
}
.meeting-chat-header {
display: flex;
align-items: center;
gap: 0.55rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 1rem;
}
.meeting-chat-header h4 {
font-size: 0.92rem;
}
.meeting-chat-messages {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.meeting-chat-msg {
background: rgba(255, 255, 255, 0.03);
border-radius: var(--radius-sm);
padding: 0.55rem 0.75rem;
}
.msg-header-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.2rem;
}
.msg-sender {
font-weight: 700;
font-size: 0.75rem;
color: var(--color-gold-300);
}
.msg-time {
font-size: 0.68rem;
color: var(--color-concrete-400);
}
.msg-text {
font-size: 0.8rem;
color: var(--color-concrete-200);
}
.meeting-chat-form {
display: flex;
gap: 0.45rem;
}
.call-controls-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 0.85rem;
background: rgba(14, 26, 20, 0.9);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
width: fit-content;
margin: 0 auto;
}
.control-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--border-subtle);
background: rgba(255, 255, 255, 0.05);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.12);
}
.control-btn.inactive {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.5);
color: #EF4444;
}
.control-btn.active-gold {
background: var(--gradient-gold);
color: #0F1713;
}
.end-call-btn {
background: #EF4444;
border-color: #DC2626;
color: #FFF;
}
.end-call-btn:hover {
background: #DC2626;
}
.call-ended-card {
max-width: 500px;
margin: 4rem auto;
padding: 3rem 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.flex-gap {
display: flex;
gap: 1rem;
}
/* ==========================================================================
DIRECT CHAT DRAWER
========================================================================== */
.chat-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1000;
display: flex;
justify-content: flex-end;
animation: fadeIn 0.2s ease-out;
}
.chat-drawer-content {
width: 400px;
max-width: 100vw;
height: 100%;
background: #0B1410;
border-left: 1px solid var(--border-gold);
display: flex;
flex-direction: column;
animation: slideLeft 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.chat-drawer-empty {
align-items: center;
justify-content: center;
gap: 0.75rem;
text-align: center;
padding: 2rem;
color: var(--text-secondary);
}
.chat-drawer-empty .chat-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
}
@keyframes slideLeft {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.chat-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
background: #0E1A14;
border-bottom: 1px solid var(--border-subtle);
}
.chat-recipient-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.chat-avatar-img {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
border: 1.5px solid var(--border-gold);
}
.recipient-name-clickable {
display: flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
}
.recipient-name-clickable h4 {
font-size: 0.95rem;
}
.recipient-headline {
font-size: 0.75rem;
color: var(--color-concrete-400);
}
.chat-header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
}
.chat-close-btn {
background: transparent;
border: none;
color: var(--color-concrete-400);
cursor: pointer;
}
.recipient-selector-menu {
position: absolute;
top: 72px;
left: 0;
right: 0;
background: #111E18;
border-bottom: 1px solid var(--border-gold);
padding: 1rem;
z-index: 10;
box-shadow: var(--shadow-md);
}
.selector-title {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-concrete-400);
margin-bottom: 0.65rem;
display: block;
}
.selector-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
}
.selector-item:hover, .selector-item.active {
background: rgba(203, 165, 72, 0.12);
}
.selector-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
}
.selector-name {
font-weight: 600;
font-size: 0.85rem;
}
.selector-sub {
font-size: 0.72rem;
color: var(--color-concrete-400);
}
.chat-messages-body {
flex: 1;
overflow-y: auto;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.chat-security-notice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.45rem;
background: rgba(203, 165, 72, 0.08);
border-radius: var(--radius-sm);
font-size: 0.72rem;
color: var(--color-gold-300);
}
.chat-bubble-row {
display: flex;
gap: 0.65rem;
align-items: flex-end;
}
.chat-bubble-row.msg-me {
justify-content: flex-end;
}
.chat-bubble-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
}
.chat-bubble {
max-width: 80%;
padding: 0.75rem 1rem;
border-radius: var(--radius-lg);
font-size: 0.88rem;
line-height: 1.45;
}
.msg-me .chat-bubble {
background: linear-gradient(135deg, #1E3D2F 0%, #152B21 100%);
border: 1px solid var(--border-moss);
color: var(--color-white);
border-bottom-right-radius: 4px;
}
.msg-other .chat-bubble {
background: #14201A;
border: 1px solid var(--border-subtle);
color: var(--color-concrete-100);
border-bottom-left-radius: 4px;
}
.chat-bubble-meta {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.35rem;
margin-top: 0.35rem;
}
.chat-time {
font-size: 0.65rem;
color: var(--color-concrete-400);
}
.chat-input-bar {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 1rem 1.25rem;
background: #0E1A14;
border-top: 1px solid var(--border-subtle);
}
.chat-input-field {
flex: 1;
padding: 0.65rem 1rem;
font-size: 0.85rem;
}
/* ==========================================================================
WHATSAPP PUSH MODAL & CAKTO CHECKOUT MODAL
========================================================================== */
.whatsapp-push-modal {
padding: 2rem;
}
.whatsapp-config-box {
padding: 1.15rem;
border-color: rgba(37, 211, 102, 0.35);
}
.config-header-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.config-title {
font-weight: 700;
font-size: 0.88rem;
display: block;
}
.config-sub {
font-size: 0.72rem;
color: #4ADE80;
}
.phone-input-row {
display: flex;
gap: 0.5rem;
}
.notification-toggles-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.toggle-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: rgba(255, 255, 255, 0.03);
padding: 0.85rem 1rem;
border-radius: var(--radius-md);
cursor: pointer;
}
.toggle-item input {
margin-top: 0.25rem;
accent-color: #25D366;
width: 16px;
height: 16px;
}
.toggle-title {
font-weight: 600;
font-size: 0.85rem;
display: block;
}
.toggle-desc {
font-size: 0.74rem;
color: var(--color-concrete-400);
}
.simulator-section-box {
background: rgba(203, 165, 72, 0.08);
border: 1px dashed var(--border-gold);
border-radius: var(--radius-md);
padding: 1rem;
}
.simulator-label {
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--color-gold-300);
}
.simulator-buttons-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
/* Cakto Checkout */
.cakto-checkout-modal {
padding: 2rem;
max-width: 680px;
}
.cakto-brand-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 79, 0, 0.15);
border: 1px solid rgba(255, 79, 0, 0.35);
color: #FF6B2B;
padding: 0.25rem 0.65rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
}
.checkout-plans-grid {
display: grid;
/* minmax(0, 1fr), não 1fr: "1fr" não encolhe abaixo do conteúdo, e o preço
grande do anual alargava a coluna até o cartão sair pela direita
(print do Ezekiel, 22/09). */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
padding-top: 0.5rem;
}
.checkout-plan-card {
display: flex;
flex-direction: column;
background: rgba(14, 26, 20, 0.75);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.25rem;
position: relative;
transition: all var(--transition-fast);
}
/* Empurra o CTA de cada card para a base, alinhando os botões mesmo
quando os cards têm alturas diferentes (o anual tem a oferta à vista). */
.checkout-plan-card > a {
margin-top: auto;
}
.checkout-plan-card:hover {
border-color: var(--border-gold);
}
.checkout-plan-card.selected {
border-color: var(--color-gold-400);
background: rgba(203, 165, 72, 0.1);
box-shadow: 0 0 20px rgba(203, 165, 72, 0.15);
}
.plan-badge-ribbon {
position: absolute;
top: -10px;
right: 12px;
background: var(--gradient-gold);
color: #000;
font-size: 0.62rem;
font-weight: 800;
padding: 0.15rem 0.5rem;
border-radius: var(--radius-full);
}
.plan-price-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem;
margin: 0.45rem 0 0.85rem;
}
.plan-price {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 800;
color: var(--color-white);
}
.plan-period {
font-size: 0.75rem;
color: var(--color-concrete-400);
}
.plan-features-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.45rem;
font-size: 0.78rem;
color: var(--color-concrete-200);
}
.plan-features-list li {
display: flex;
align-items: center;
gap: 0.45rem;
}
.payment-method-selector {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.method-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
padding: 0.75rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: rgba(255, 255, 255, 0.03);
color: var(--color-concrete-200);
font-family: var(--font-main);
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.method-btn.active {
background: rgba(203, 165, 72, 0.15);
border-color: var(--color-gold-400);
color: var(--color-gold-300);
}
.pix-instruction-box {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(37, 211, 102, 0.08);
border-color: rgba(37, 211, 102, 0.3);
}
.pix-title {
font-weight: 700;
font-size: 0.85rem;
display: block;
}
.pix-desc {
font-size: 0.75rem;
color: var(--color-concrete-300);
margin-top: 0.15rem;
}
/* Duas classes de propósito: `.login-screen-card` (max-width 420px) vem
mais abaixo neste arquivo e, com a mesma especificidade, vencia — o cartão
nunca alargava e os planos ficavam espremidos em 420px, com o preço do
anual quebrando em duas linhas. */
.login-screen-card.login-screen-card-wide {
max-width: 640px;
}
.checkout-plan-featured {
border-color: #4ADE80;
box-shadow: 0 0 0 1px #4ADE80, 0 0 24px rgba(74, 222, 128, 0.2);
position: relative;
}
.checkout-plan-badge {
position: absolute;
top: -11px;
right: 14px;
background: #4ADE80;
color: #06210F;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.03em;
padding: 0.2rem 0.6rem;
border-radius: var(--radius-full);
}
.plan-price-row-highlight {
align-items: baseline;
}
.plan-price-highlight {
font-size: clamp(1.5rem, 3.2vw, 2rem);
color: #4ADE80;
text-shadow: 0 0 18px rgba(74, 222, 128, 0.35);
}
.checkout-cash-offer {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-top: 0.75rem;
margin-bottom: 0.9rem;
padding: 0.65rem 0.75rem;
background: rgba(74, 222, 128, 0.08);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: var(--radius-md);
font-size: 0.75rem;
color: var(--color-concrete-200);
}
.checkout-cash-offer-tag {
font-weight: 700;
color: #4ADE80;
font-size: 0.7rem;
}
.checkout-guarantee-row {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.75rem;
color: var(--color-concrete-300);
}
.purchase-success-view {
padding: 3rem 1.5rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
/* ==========================================================================
TOAST NOTIFICATION
========================================================================== */
.ekoz-toast {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1100;
display: flex;
align-items: flex-start;
gap: 0.85rem;
background: #0E1A14;
border-radius: var(--radius-lg);
padding: 1rem 1.25rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
max-width: 420px;
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.toast-whatsapp {
border: 1px solid rgba(37, 211, 102, 0.6);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.2);
}
.toast-default {
border: 1px solid var(--border-gold);
}
.toast-body {
flex: 1;
}
.toast-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.toast-title {
font-weight: 700;
font-size: 0.88rem;
color: var(--color-white);
}
.toast-message {
font-size: 0.8rem;
color: var(--color-concrete-200);
line-height: 1.45;
}
.toast-close-btn {
background: transparent;
border: none;
color: var(--color-concrete-400);
cursor: pointer;
}
/* Responsive Overrides */
@media (max-width: 1024px) {
.feed-layout-grid {
grid-template-columns: minmax(0, 1fr);
}
.hide-tablet {
display: none !important;
}
.experience-card {
grid-template-columns: 1fr;
}
.exp-cover-main {
height: 240px;
}
.player-body-grid {
grid-template-columns: 1fr;
height: auto;
}
.video-tiles-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
/* Layout Base & Sidebar */
.sidebar-container {
display: none !important;
}
.hide-mobile {
display: none !important;
}
/* Navbar Mobile Optimization */
.navbar-container {
padding: 0 0.75rem;
height: var(--header-height-mobile);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.navbar-left {
gap: 0.5rem;
flex-shrink: 0;
}
.navbar-logo-img {
height: 26px;
width: auto;
}
.navbar-logo-full {
display: none;
}
.navbar-logo-mark {
display: block;
}
.navbar-subtitle {
font-size: 0.52rem;
letter-spacing: 0.18em;
}
.navbar-search-wrapper {
display: none !important;
}
.navbar-mobile-search-toggle {
display: inline-flex;
}
.navbar-right {
gap: 0.35rem;
margin-left: auto;
}
.navbar-tool-btn {
padding: 0.35rem 0.55rem;
font-size: 0.75rem;
}
.btn-upgrade {
padding: 0.35rem 0.55rem;
font-size: 0.75rem;
min-width: 36px;
}
.navbar-icon-btn {
width: 34px;
height: 34px;
border-radius: var(--radius-sm);
}
.navbar-user-pill {
padding: 0;
background: transparent;
border: none;
gap: 0;
}
.user-avatar-img {
width: 34px;
height: 34px;
}
.notifications-menu {
right: -60px;
width: 310px;
}
/* Feed & Hero Slogan Mobile Optimization */
.feed-layout-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 1.25rem;
width: 100% !important;
max-width: 100% !important;
}
.feed-main-column {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.feed-right-column {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.hero-slogan-card {
padding: 1.25rem 1rem;
width: 100%;
box-sizing: border-box;
}
.hero-badge-row {
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.75rem;
}
.hero-badge-row .badge {
font-size: 0.65rem;
padding: 0.2rem 0.55rem;
white-space: normal;
text-align: center;
}
.hero-slogan-title {
font-size: 1.4rem;
line-height: 1.25;
margin-bottom: 0.65rem;
word-break: break-word;
}
.hero-slogan-desc {
font-size: 0.85rem;
line-height: 1.5;
margin-bottom: 1rem;
max-width: 100%;
}
.hero-metrics-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding-top: 0.85rem;
text-align: center;
width: 100%;
}
.hero-metric-item {
align-items: center;
}
.metric-val {
font-size: 1.25rem;
}
.metric-lbl {
font-size: 0.62rem;
line-height: 1.2;
margin-top: 0.15rem;
}
/* Create Post Card Mobile */
.create-post-card {
padding: 1rem;
width: 100%;
box-sizing: border-box;
}
.create-post-actions-row {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.category-select-group {
width: 100%;
}
.category-dropdown {
width: 100%;
font-size: 0.78rem;
}
.create-post-buttons {
width: 100%;
justify-content: flex-end;
}
/* Filter Navigation Bar Mobile */
.feed-filter-bar {
margin: 0;
padding: 0 0 0.5rem;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
}
.filter-tab-btn {
padding: 0.35rem 0.85rem;
font-size: 0.78rem;
}
/* Post Card Mobile */
.post-card {
padding: 1rem;
width: 100%;
box-sizing: border-box;
}
.post-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.post-content {
font-size: 0.88rem;
line-height: 1.55;
word-break: break-word;
}
.post-image-attachment img {
max-height: 250px;
width: 100%;
}
.post-actions-bar {
flex-wrap: wrap;
gap: 0.4rem;
}
.post-action-btn {
padding: 0.35rem 0.55rem;
font-size: 0.75rem;
}
/* Marketplace Mobile */
.marketplace-grid {
grid-template-columns: 1fr;
gap: 1rem;
width: 100%;
}
.marketplace-hero {
padding: 1.25rem 1rem;
}
.marketplace-title {
font-size: 1.35rem;
}
.marketplace-search-row {
flex-direction: column;
gap: 0.6rem;
}
.cores-pills-row {
overflow-x: auto;
padding-bottom: 0.35rem;
}
/* Events Mobile */
.events-cards-grid {
grid-template-columns: 1fr;
width: 100%;
}
.event-card {
padding: 1rem;
}
.event-header-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
/* Experiences Mobile */
.exp-hero {
padding: 1.25rem 1rem;
}
.exp-title {
font-size: 1.35rem;
}
.experience-card {
padding: 1rem;
width: 100%;
}
.exp-details-col {
padding: 1rem;
}
/* Video Call Room Mobile */
.video-room-container {
padding: 0.75rem;
width: 100%;
}
.video-controls-bar {
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem;
}
/* Forms & Modals Mobile */
.form-row-2 {
grid-template-columns: 1fr;
}
.checkout-plans-grid {
grid-template-columns: 1fr;
}
.plan-selection-card {
padding: 1.25rem 1rem;
}
/* Chat Drawer Mobile */
.chat-drawer {
width: 100%;
max-width: 100%;
}
.page-wrapper {
padding-bottom: 6.5rem !important;
}
}
/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 990;
background: rgba(10, 18, 14, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--border-gold);
padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 8px));
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
.mobile-bottom-nav {
display: block;
}
}
.mobile-nav-bar-inner {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 480px;
margin: 0 auto;
}
.mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
background: transparent;
border: none;
color: var(--color-concrete-400);
padding: 0.3rem 0.15rem;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
flex: 1;
min-width: 0;
}
.mobile-nav-item:hover, .mobile-nav-item.active {
color: var(--color-gold-300);
}
.mobile-nav-icon {
display: flex;
align-items: center;
justify-content: center;
}
.mobile-nav-label {
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.mobile-active-dot {
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gradient-gold);
position: absolute;
bottom: 1px;
}
/* Login Screen (portão de acesso) */
.login-screen-root {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-primary);
padding: 1.5rem;
}
.login-screen-card {
width: 100%;
max-width: 420px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 14px;
padding: 2rem;
transition: max-width var(--transition-fast, 0.2s ease);
}
.login-screen-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.75rem;
}
.login-screen-logo {
width: 100%;
max-width: 240px;
height: auto;
object-fit: contain;
}
.login-screen-error {
padding: 0.75rem;
background: rgba(239, 68, 68, 0.15);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 6px;
color: #fca5a5;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.login-screen-success {
padding: 0.75rem;
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 6px;
color: #86efac;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.login-screen-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.login-screen-label {
display: block;
font-size: 0.75rem;
color: var(--text-secondary);
margin-bottom: 0.3rem;
}
.login-screen-input-icon {
position: absolute;
left: 10px;
top: 12px;
color: var(--text-secondary);
}
.login-screen-input {
width: 100%;
padding: 0.65rem 0.65rem 0.65rem 2.3rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 0.9rem;
}
.login-screen-submit {
margin-top: 0.5rem;
font-size: 0.95rem;
padding: 0.8rem;
}
.login-screen-footer {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-color);
text-align: center;
font-size: 0.8rem;
color: var(--text-secondary);
}
.login-screen-checkout-links {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.75rem 0;
}
.login-screen-checkout-links a {
color: var(--gold-light);
text-decoration: underline;
font-size: 0.85rem;
}
.login-screen-footer-note {
font-size: 0.72rem;
opacity: 0.75;
margin-top: 0.5rem;
}
/* Admin — Gerenciar Membros */
.admin-view-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.admin-hero-card {
padding: 1.5rem;
}
.admin-view-title {
margin: 0.5rem 0 0.25rem;
font-family: var(--font-display);
font-size: 1.5rem;
}
.admin-view-subtitle {
margin: 0;
color: var(--text-secondary);
font-size: 0.85rem;
}
.admin-toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
flex-wrap: wrap;
}
.admin-search-wrapper {
position: relative;
flex: 1;
min-width: 220px;
}
.admin-search-wrapper .search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
}
.admin-search-wrapper .ekoz-input {
padding-left: 2.2rem;
width: 100%;
}
.admin-role-filter {
width: auto;
min-width: 160px;
}
.admin-table-card {
padding: 0;
overflow-x: auto;
}
.admin-members-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.admin-members-table th {
text-align: left;
padding: 0.85rem 1.1rem;
color: var(--text-secondary);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border-bottom: 1px solid var(--border-color);
}
.admin-members-table td {
padding: 0.75rem 1.1rem;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
.admin-members-table tr:last-child td {
border-bottom: none;
}
.admin-members-table tr.row-inactive {
opacity: 0.55;
}
.admin-member-cell {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.admin-member-name {
font-weight: 600;
color: var(--text-primary);
}
.admin-member-email {
font-size: 0.75rem;
color: var(--text-secondary);
}
.admin-role-select {
padding: 0.35rem 0.5rem;
font-size: 0.8rem;
width: auto;
}
.admin-section-tabs {
display: flex;
gap: 0.5rem;
/* No celular as 9 abas passam da tela: rolam na própria faixa, sem empurrar a página. */
overflow-x: auto;
scrollbar-width: none;
}
.admin-section-tabs::-webkit-scrollbar {
display: none;
}
.admin-section-tabs .admin-section-tab {
flex-shrink: 0;
}
.admin-section-tab {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
color: var(--text-secondary);
font-size: 0.82rem;
cursor: pointer;
}
.admin-section-tab.active {
color: var(--gold-light);
border-color: rgba(203, 165, 72, 0.5);
background: rgba(203, 165, 72, 0.08);
}
.admin-content-form {
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.admin-form-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.admin-form-header h4 {
margin: 0;
font-size: 1rem;
}
.admin-form-hint {
font-size: 0.8rem;
margin: -0.25rem 0 0.75rem;
}
.admin-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.65rem;
}
.admin-content-form textarea.ekoz-input {
resize: vertical;
font-family: inherit;
}
/* ===== Credenciais de membro recém-cadastrado ===== */
.member-credentials-card {
position: relative;
padding: 1rem 1.1rem;
margin-bottom: 1rem;
border: 1px solid var(--border-gold);
background: var(--gradient-gold-subtle);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.member-credentials-close {
position: absolute;
top: 0.6rem;
right: 0.6rem;
background: transparent;
border: none;
color: var(--color-concrete-400);
cursor: pointer;
}
.member-credentials-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-gold-300);
margin: 0;
}
.member-credentials-body {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
}
.member-credentials-pass {
font-family: 'SFMono-Regular', Consolas, monospace;
background: rgba(0, 0, 0, 0.35);
padding: 0.15rem 0.45rem;
border-radius: var(--radius-sm);
color: var(--color-gold-200);
letter-spacing: 0.02em;
}
/* ===== Controle de Pagamentos (Admin) ===== */
.pay-summary-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.pay-summary-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.9rem 0.75rem;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: var(--bg-card);
}
.pay-summary-count {
font-family: var(--font-display);
font-size: 1.7rem;
font-weight: 700;
line-height: 1;
}
.pay-summary-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-concrete-400);
}
.pay-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 0.85rem;
}
.pay-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 1rem;
border-left: 3px solid var(--border-subtle);
}
.pay-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.5rem;
}
.pay-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.78rem;
color: var(--color-concrete-300);
}
.pay-plan {
font-weight: 600;
color: var(--color-concrete-100);
}
.pay-origem {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-concrete-400);
}
.pay-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
border-top: 1px solid var(--border-subtle);
padding-top: 0.6rem;
}
.pay-dias {
font-size: 0.8rem;
font-weight: 600;
}
.pay-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.28rem 0.6rem;
border-radius: var(--radius-full);
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.pay-lead-tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.22rem 0.55rem;
border-radius: var(--radius-full);
font-size: 0.68rem;
font-weight: 700;
color: var(--color-gold-300);
background: var(--gradient-gold-subtle);
border: 1px solid var(--border-gold);
}
/* Estados por cor — verde (em dia), âmbar (pendente), vermelho (atrasado) */
.pay-status-ok { color: var(--color-success); }
.pay-card.pay-status-ok { border-left-color: var(--color-success); }
.pay-summary-card.pay-status-ok { border-color: rgba(34, 197, 94, 0.35); }
.pay-badge.pay-status-ok { background: rgba(34, 197, 94, 0.14); color: #86efac; }
.pay-status-warn { color: #fbbf24; }
.pay-card.pay-status-warn { border-left-color: #fbbf24; }
.pay-summary-card.pay-status-warn { border-color: rgba(251, 191, 36, 0.35); }
.pay-badge.pay-status-warn { background: rgba(251, 191, 36, 0.14); color: #fde047; }
.pay-status-late { color: #f87171; }
.pay-card.pay-status-late { border-left-color: #ef4444; }
.pay-summary-card.pay-status-late { border-color: rgba(239, 68, 68, 0.35); }
.pay-badge.pay-status-late { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
@media (max-width: 520px) {
.pay-grid { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------------
Abaixo das ofertas: voltar, compartilhar e Programa de Afiliados
(pedido do Ezekiel, "Considerações plataforma Ekoz", 22/09/2026)
------------------------------------------------------------------ */
.plan-feature-note {
font-size: 0.72rem;
color: var(--color-concrete-400);
}
.checkout-share-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.25rem;
}
.checkout-share-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
/* No celular o botão fica estreito e o flexbox encolhia o ícone até 0px —
o símbolo do WhatsApp, que foi justamente o pedido, sumia. Na lista de
benefícios o ✓ das linhas longas encolhia do mesmo jeito. */
.checkout-share-actions .btn svg,
.affiliate-view .btn svg,
.plan-features-list li svg {
flex-shrink: 0;
}
.checkout-share-whatsapp {
color: #4ADE80;
border-color: rgba(74, 222, 128, 0.35);
}
.checkout-affiliate-teaser {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.9rem 1rem;
border: 1px solid rgba(223, 193, 110, 0.35);
border-radius: var(--radius-lg);
background: rgba(203, 152, 39, 0.08);
}
.checkout-affiliate-teaser p {
margin: 0;
flex: 1;
font-size: 0.85rem;
line-height: 1.4;
color: var(--text-secondary);
}
.checkout-affiliate-teaser strong {
color: #DFC16E;
}
.checkout-affiliate-icon {
color: #DFC16E;
flex-shrink: 0;
}
.checkout-affiliate-teaser .btn {
flex-shrink: 0;
}
.affiliate-view {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.9rem;
}
.affiliate-back {
padding-left: 0;
}
.affiliate-title {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.35rem, 4vw, 1.75rem);
line-height: 1.2;
color: var(--color-white);
}
.affiliate-lead {
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: var(--text-secondary);
}
.affiliate-steps {
list-style: none;
margin: 0.25rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.85rem;
width: 100%;
}
.affiliate-steps li {
display: flex;
gap: 0.8rem;
align-items: flex-start;
}
.affiliate-steps strong {
color: var(--color-white);
font-size: 0.92rem;
}
.affiliate-steps p {
margin: 0.15rem 0 0;
font-size: 0.82rem;
line-height: 1.45;
color: var(--text-secondary);
}
.affiliate-step-num {
flex-shrink: 0;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.85rem;
color: #0A120E;
background: #DFC16E;
}
.affiliate-rules {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
width: 100%;
padding: 1rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: rgba(14, 26, 20, 0.75);
}
.affiliate-rules h4 {
margin: 0 0 0.45rem;
font-size: 0.85rem;
}
.affiliate-rules-ok { color: #8FD3A8; }
.affiliate-rules-no { color: #E2A0A0; }
.affiliate-rules ul {
margin: 0;
padding-left: 1rem;
font-size: 0.8rem;
line-height: 1.45;
color: var(--text-secondary);
}
.affiliate-cta {
display: flex;
flex-direction: column;
gap: 0.6rem;
width: 100%;
}
.affiliate-cta-note {
margin: 0;
padding: 0.75rem 0.9rem;
border-left: 3px solid #DFC16E;
font-size: 0.85rem;
line-height: 1.45;
color: var(--text-secondary);
background: rgba(203, 152, 39, 0.06);
}
.affiliate-fineprint {
margin: 0;
font-size: 0.72rem;
color: var(--color-concrete-400);
}
@media (max-width: 560px) {
.checkout-affiliate-teaser {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.affiliate-rules {
grid-template-columns: 1fr;
}
}
/* Faixa do jantar no feed: os estilos base são inline no FeedView; no celular
o botão desce para baixo do texto, que antes ficava espremido em ~120px. */
@media (max-width: 560px) {
.jantar-launch-banner {
flex-direction: column;
align-items: stretch !important;
}
.jantar-launch-banner > .btn {
width: 100%;
justify-content: center;
}
}
/* ==========================================================================
ACADEMY VIEW — LAYOUT ESTILO NETFLIX
========================================================================== */
.academy-view-container {
display: flex;
flex-direction: column;
margin: -2rem -1.75rem 0;
}
/* Hero */
.academy-hero {
position: relative;
min-height: 440px;
height: 60vh;
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
padding: 3rem;
}
.academy-hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--bg-primary) 0%, rgba(10, 18, 14, 0.55) 45%, rgba(10, 18, 14, 0.05) 75%),
linear-gradient(0deg, var(--bg-primary) 0%, rgba(10, 18, 14, 0.1) 45%, rgba(10, 18, 14, 0) 75%);
}
.academy-hero-content {
position: relative;
z-index: 2;
max-width: 620px;
}
.academy-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(203, 165, 72, 0.15);
border: 1px solid var(--border-gold-glow);
color: var(--color-gold-200);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.4rem 0.85rem;
border-radius: var(--radius-full);
margin-bottom: 1rem;
font-family: var(--font-display);
}
.academy-hero-title {
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 800;
line-height: 1.12;
margin-bottom: 0.85rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.academy-hero-desc {
font-size: 0.95rem;
line-height: 1.6;
color: var(--color-concrete-300);
margin-bottom: 1.25rem;
max-width: 520px;
}
.academy-hero-meta {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1.4rem;
font-size: 0.8rem;
color: var(--color-concrete-400);
}
.academy-hero-btns {
display: flex;
gap: 0.75rem;
}
.academy-hero-btn-play {
display: flex;
align-items: center;
gap: 0.5rem;
}
.academy-hero-btn-info {
background: rgba(230, 236, 233, 0.12);
backdrop-filter: blur(6px);
color: var(--color-white);
border: 1px solid var(--border-subtle);
padding: 0.8rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-family: var(--font-main);
transition: background var(--transition-fast);
}
.academy-hero-btn-info:hover {
background: rgba(230, 236, 233, 0.2);
}
.academy-hero-dots {
position: absolute;
right: 2rem;
bottom: 1.5rem;
z-index: 2;
display: flex;
gap: 0.4rem;
}
.academy-hero-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(230, 236, 233, 0.3);
border: none;
cursor: pointer;
padding: 0;
transition: background var(--transition-fast), transform var(--transition-fast);
}
.academy-hero-dot.active {
background: var(--color-gold-400);
transform: scale(1.3);
}
/* Navegação rápida por categoria */
.academy-quick-nav {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding: 1.5rem 3rem 0;
}
.academy-quick-nav-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
padding: 0.5rem 1.25rem;
color: var(--color-concrete-300);
font-family: var(--font-main);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all var(--transition-fast);
}
.academy-quick-nav-btn:hover {
background: rgba(35, 66, 51, 0.35);
border-color: var(--color-gold-400);
color: var(--color-gold-300);
}
/* Fileiras */
.academy-rows {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 1.5rem 3rem 3rem;
}
.course-row-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-gold-200);
margin-bottom: 0.85rem;
}
.course-row-viewport {
position: relative;
}
.course-row-track {
display: flex;
/* overflow-x:auto força overflow-y a computar "auto" mesmo escrevendo
"visible" (regra do spec de CSS Overflow) — em vez de depender disso,
reservamos altura suficiente pra caber o painel expandido do card no
hover, então o conteúdo nunca chega a exceder o container e o corte
nunca é acionado. align-items:flex-start evita que os cards estiquem
para preencher essa altura extra. */
align-items: flex-start;
height: 300px;
gap: 0.9rem;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 0.4rem 0.5rem 0;
}
.course-row-track::-webkit-scrollbar {
display: none;
}
.course-row-arrow {
position: absolute;
top: 0;
bottom: 0.5rem;
width: 44px;
border: none;
background: linear-gradient(90deg, var(--bg-primary) 0%, rgba(10, 18, 14, 0) 100%);
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
}
.course-row-arrow-left {
left: 0;
}
.course-row-arrow-right {
right: 0;
transform: scaleX(-1);
}
/* Card da fileira — no hover, expande PARA BAIXO revelando um painel de
ações/metadados, em vez de sobrepor um overlay na própria imagem
(padrão real da Netflix: o pôster nunca escurece, o painel é uma peça
separada abaixo dele). O wrapper externo reserva só a altura do pôster
no fluxo da fileira; o wrapper interno é position:absolute e cresce
livremente por cima dos vizinhos ao revelar o painel. */
.course-row-card {
position: relative;
flex: 0 0 224px;
height: 130px;
}
.course-row-card-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg-elevated);
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.25s ease;
z-index: 1;
}
.course-row-card:hover .course-row-card-inner {
box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-gold-glow);
z-index: 30;
}
.course-row-card-poster {
position: relative;
width: 100%;
height: 130px;
background-size: cover;
background-position: center;
transition: transform 0.35s ease;
}
.course-row-card:hover .course-row-card-poster {
transform: scale(1.05);
}
.course-row-card-rank {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: rgba(10, 18, 14, 0.75);
backdrop-filter: blur(4px);
color: var(--color-gold-300);
font-size: 0.62rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: var(--radius-sm);
letter-spacing: 0.04em;
z-index: 2;
}
.course-row-card-progress {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.25);
}
.course-row-card-progress-fill {
height: 100%;
background: var(--gradient-gold);
}
/* Painel de detalhes — escondido por padrão (altura 0), revelado no hover */
.course-row-card-details {
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 0.75rem;
background: var(--bg-elevated);
transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}
.course-row-card:hover .course-row-card-details {
max-height: 150px;
opacity: 1;
padding: 0.65rem 0.75rem 0.75rem;
}
.course-row-card-icons {
display: flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.55rem;
}
.course-row-icon-btn {
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(230, 236, 233, 0.1);
border: 1px solid rgba(255, 255, 255, 0.35);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
cursor: pointer;
padding: 0;
transition: border-color var(--transition-fast);
}
.course-row-icon-btn:hover {
border-color: var(--color-white);
}
.course-row-icon-btn.gold {
background: var(--color-gold-400);
color: var(--bg-primary);
border: none;
}
.course-row-icon-btn.push-right {
margin-left: auto;
}
.course-row-card-title {
font-size: 0.78rem;
font-weight: 700;
color: var(--color-white);
margin: 0 0 0.25rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-row-card-meta {
font-size: 0.66rem;
color: var(--color-gold-300);
font-weight: 600;
margin: 0 0 0.3rem;
}
.course-row-card-tags {
font-size: 0.62rem;
color: var(--color-concrete-400);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1024px) {
.academy-view-container {
margin: -1.25rem -1rem 0;
}
.academy-hero {
padding: 2rem;
}
.academy-quick-nav,
.academy-rows {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (max-width: 768px) {
.academy-view-container {
margin: -0.85rem -0.75rem 0;
}
.academy-hero {
height: auto;
min-height: 360px;
padding: 1.5rem 1.25rem 2rem;
}
.academy-hero-title {
font-size: 1.6rem;
}
.academy-hero-desc {
font-size: 0.85rem;
}
.academy-hero-btns {
flex-direction: column;
align-items: stretch;
}
.academy-quick-nav {
padding: 1.25rem 1.25rem 0;
}
.academy-rows {
padding: 1.25rem 1.25rem 2rem;
}
.course-row-track {
height: 250px;
}
.course-row-card {
flex: 0 0 168px;
height: 100px;
}
.course-row-card-poster {
height: 100px;
}
.course-row-arrow {
display: none;
}
}
/* ==========================================================================
ACADEMY — ABAS BIBLIOTECA / MASTERCLASS, ESTADO VAZIO E CAPA DA MARCA
(reativação de 24/09/2026)
========================================================================== */
.academy-section-tabs {
display: flex;
gap: 0.5rem;
padding: 1.5rem 3rem 0;
}
.academy-section-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border-radius: var(--radius-full);
border: 1px solid var(--border-subtle);
background: rgba(255, 255, 255, 0.03);
color: var(--color-concrete-300);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.academy-section-tab svg { flex-shrink: 0; }
.academy-section-tab.active {
color: var(--color-gold-300);
border-color: var(--border-gold);
background: rgba(203, 165, 72, 0.1);
}
.academy-section-count {
font-size: 0.72rem;
font-weight: 700;
padding: 0.05rem 0.45rem;
border-radius: var(--radius-full);
background: rgba(203, 165, 72, 0.18);
color: var(--color-gold-300);
}
.academy-empty-state {
margin: 1.5rem 3rem 2rem;
padding: 2.5rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
text-align: center;
color: var(--color-concrete-300);
}
.academy-empty-state svg { color: var(--color-gold-400); }
.academy-empty-state h3 { color: var(--color-gold-300); font-size: 1.15rem; margin: 0; }
.academy-empty-state p { max-width: 460px; margin: 0; line-height: 1.5; }
/* Conteúdo sem capa: fundo da marca com o título, em vez de um retângulo vazio. */
.course-cover-placeholder {
background:
radial-gradient(circle at 20% 15%, rgba(203, 165, 72, 0.28), transparent 55%),
linear-gradient(135deg, var(--color-moss-700) 0%, var(--bg-primary) 100%);
display: flex;
align-items: flex-end;
}
.course-cover-placeholder-title {
padding: 0.75rem;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
line-height: 1.2;
color: var(--color-gold-300);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Player: iframe do YouTube/Vimeo/Drive e o estado "sem vídeo" */
.video-viewport-wrapper iframe.main-video-element {
display: block;
border: 0;
}
.video-empty-state {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.5rem;
text-align: center;
color: var(--color-concrete-300);
background: linear-gradient(135deg, var(--color-moss-700) 0%, #000 100%);
}
.video-empty-state svg { color: var(--color-gold-400); }
.video-empty-state p { margin: 0; }
/* O .modal-content genérico (index.css, 640px) vencia o .lesson-player-modal
pela ordem dos arquivos: o player abria espremido e cortava a aba "Dúvidas".
Estava escondido porque a Academy ficou desligada de 03/09 a 24/09. */
.modal-content.lesson-player-modal { max-width: 1060px; width: 95vw; }
.player-subtabs-nav { overflow-x: auto; scrollbar-width: none; }
.player-subtabs-nav::-webkit-scrollbar { display: none; }
.player-subtab-btn { white-space: nowrap; flex-shrink: 0; }
.player-body-single { grid-template-columns: 1fr; }
.player-course-description { color: var(--color-concrete-300); line-height: 1.55; margin: 0; }
/* Painel admin da Academy */
.academy-admin-toolbar { padding: 0; background: transparent; border: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.academy-admin-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-concrete-300); cursor: pointer; }
.academy-admin-instructor summary { cursor: pointer; font-size: 0.85rem; color: var(--color-concrete-300); padding: 0.25rem 0; }
.academy-admin-instructor[open] summary { margin-bottom: 0.6rem; }
.academy-admin-modules { display: flex; flex-direction: column; gap: 0.85rem; }
.academy-admin-module {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 0.85rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
background: rgba(255, 255, 255, 0.02);
}
.academy-admin-module-head,
.academy-admin-lesson-head { display: flex; align-items: center; gap: 0.35rem; }
.academy-admin-module-head .ekoz-input { flex: 1; min-width: 0; font-weight: 600; }
.academy-admin-lesson-head { color: var(--color-gold-300); font-size: 0.85rem; }
.academy-admin-lesson-head strong { margin-right: auto; }
.academy-admin-module-head svg,
.academy-admin-lesson-head svg { flex-shrink: 0; }
.academy-admin-lesson {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
border-left: 2px solid var(--border-gold);
background: rgba(255, 255, 255, 0.02);
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.academy-video-hint { font-size: 0.78rem; margin-top: -0.2rem; }
.academy-video-hint.ok { color: #4ADE80; }
.academy-video-hint.warn { color: var(--color-gold-400); }
.academy-video-hint.muted { color: var(--color-concrete-400); }
.academy-admin-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.academy-admin-format { font-size: 0.78rem; font-weight: 400; }
/* Envio de arquivo no painel (07/10/2026) */
.academy-admin-block { display: flex; flex-direction: column; gap: 0.5rem; }
.academy-admin-block-label { font-size: 0.8rem; color: var(--color-concrete-300); }
.academy-admin-cover { display: flex; gap: 0.75rem; align-items: flex-start; }
.academy-admin-cover-thumb {
width: 96px;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.academy-admin-cover-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.admin-file-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.admin-file-row {
display: flex;
align-items: center;
gap: 0.45rem;
padding: 0.5rem 0.6rem;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.03);
color: var(--color-gold-300);
min-width: 0;
}
.admin-file-row svg { flex-shrink: 0; }
.admin-file-name {
flex: 1;
min-width: 0;
font-size: 0.85rem;
color: var(--color-concrete-100);
overflow-wrap: anywhere;
}
.admin-file-meta { font-size: 0.75rem; color: var(--color-concrete-400); }
.admin-file-pick { align-self: flex-start; min-height: 40px; }
.admin-file-progress {
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.admin-file-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--color-gold-600), var(--color-gold-400));
transition: width 0.2s ease;
}
/* Categorias da Academy no painel */
.academy-categories-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.academy-category-item { display: flex; flex-direction: column; gap: 0.5rem; }
.academy-category-row { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.academy-category-row .ekoz-input { flex: 1; min-width: 0; }
.academy-category-name { flex: 1; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.academy-category-move {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.7rem;
border-left: 2px solid var(--border-gold);
background: rgba(255, 255, 255, 0.02);
font-size: 0.85rem;
color: var(--color-concrete-300);
}
.academy-category-move-actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }
/* Aula em áudio e PDF enviados (player do membro). Áudio não precisa do
quadro 16:9 do vídeo: no celular ele cortava os controles. */
.video-viewport-wrapper:has(.audio-lesson-area) { aspect-ratio: auto; }
.audio-lesson-area {
width: 100%;
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1.25rem;
color: var(--color-gold-300);
background: radial-gradient(circle at center, var(--color-moss-700), var(--color-moss-900));
}
.audio-lesson-cover {
width: min(160px, 40vw);
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.audio-lesson-title { font-size: 0.9rem; color: var(--color-concrete-100); text-align: center; }
.audio-lesson-player { width: min(480px, 100%); }
.pdf-lesson-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
@media (max-width: 1024px) {
.academy-section-tabs { padding: 1.25rem 2rem 0; }
.academy-empty-state { margin: 1.25rem 2rem 2rem; }
}
@media (max-width: 768px) {
.academy-section-tabs { padding: 1.25rem 1.25rem 0; }
.academy-section-tab { flex: 1; justify-content: center; }
.academy-empty-state { margin: 1.25rem 1.25rem 2rem; }
.academy-admin-actions .btn { flex: 1 1 auto; justify-content: center; }
}
/* ============================================================
Página de Apresentação do Ekoz (login + dentro do app)
Branding: verde musgo/oliva · ouro champagne · preto profundo
============================================================ */
.presentation-root {
width: 100%;
max-width: 1120px;
margin: 0 auto;
color: var(--color-concrete-100);
}
/* No login ocupa a tela cheia com rolagem própria e respiro nas laterais */
.presentation-public {
min-height: 100vh;
padding: 1.25rem 1.25rem 4rem;
overflow-y: auto;
}
.presentation-topbar {
display: flex;
padding: 0.25rem 0 0.5rem;
}
/* ---------- HERO ---------- */
.presentation-hero {
position: relative;
text-align: center;
padding: 2.5rem 1rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
overflow: hidden;
}
.presentation-glow {
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 680px;
max-width: 120%;
height: 420px;
background: var(--gradient-glow);
pointer-events: none;
z-index: 0;
}
.presentation-hero > *:not(.presentation-glow) {
position: relative;
z-index: 1;
}
.presentation-logo {
width: min(280px, 70vw);
height: auto;
object-fit: contain;
margin-bottom: 0.25rem;
}
.presentation-eyebrow {
display: inline-flex;
}
.presentation-title {
font-family: var(--font-display);
font-size: clamp(2.1rem, 6vw, 3.6rem);
line-height: 1.05;
margin: 0.25rem 0;
max-width: 16ch;
}
.presentation-subtitle {
font-size: clamp(0.98rem, 2.4vw, 1.15rem);
color: var(--color-concrete-300);
max-width: 60ch;
margin: 0 auto;
}
.presentation-hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
.presentation-pillars {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.25rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-subtle);
width: 100%;
max-width: 720px;
}
.presentation-pillar {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.82rem;
color: var(--color-concrete-300);
}
.presentation-pillar-icon {
color: var(--color-gold-400);
display: inline-flex;
}
/* ---------- Seções ---------- */
.presentation-section {
padding: 2.5rem 0.5rem;
}
.presentation-section-head {
text-align: center;
max-width: 62ch;
margin: 0 auto 1.75rem;
}
.presentation-kicker {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--color-gold-400);
}
.presentation-section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2.2rem);
margin: 0.5rem 0;
display: inline-flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
justify-content: center;
}
.presentation-section-lead {
color: var(--color-concrete-300);
font-size: 1rem;
}
/* ---------- 3 braços ---------- */
.presentation-arms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.presentation-arm-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem;
}
.presentation-arm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: var(--radius-md);
background: var(--gradient-gold-subtle);
border: 1px solid var(--border-gold);
color: var(--color-gold-300);
margin-bottom: 0.35rem;
}
.presentation-arm-tag {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-moss-300);
}
.presentation-arm-title {
font-family: var(--font-display);
font-size: 1.25rem;
margin: 0;
}
.presentation-arm-text {
color: var(--color-concrete-300);
font-size: 0.92rem;
}
/* ---------- Academy demo ---------- */
.presentation-soon-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: var(--font-main);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-gold-200);
background: var(--gradient-gold-subtle);
border: 1px solid var(--border-gold);
padding: 0.28rem 0.6rem;
border-radius: var(--radius-full);
}
.presentation-academy-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1rem;
}
.presentation-course-card {
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-card);
transition: transform var(--transition-normal), border-color var(--transition-normal);
}
.presentation-course-card:hover {
transform: translateY(-4px);
border-color: var(--border-gold);
}
.presentation-course-cover {
position: relative;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
filter: saturate(0.9);
}
.presentation-course-cover::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 18, 14, 0.05) 0%, rgba(10, 18, 14, 0.85) 100%);
}
.presentation-course-lock {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.68rem;
font-weight: 700;
color: var(--color-gold-200);
background: rgba(10, 18, 14, 0.75);
border: 1px solid var(--border-gold);
padding: 0.22rem 0.5rem;
border-radius: var(--radius-full);
}
.presentation-course-body {
padding: 0.85rem 0.9rem 1rem;
}
.presentation-course-cat {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-moss-300);
}
.presentation-course-title {
font-family: var(--font-display);
font-size: 1rem;
margin: 0.3rem 0 0;
}
/* ---------- Autoridade / Ezekiel ---------- */
.presentation-authority {
display: grid;
grid-template-columns: 220px 1fr;
gap: 1.75rem;
align-items: center;
padding: 1.75rem;
}
.presentation-authority-photo {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius-lg);
border: 1px solid var(--border-gold);
}
.presentation-authority-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.presentation-authority-content .presentation-section-title {
justify-content: flex-start;
}
.presentation-authority-quote {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--color-gold-300);
margin-top: 0.5rem;
}
/* ---------- CTA / planos ---------- */
.presentation-cta {
border-top: 1px solid var(--border-subtle);
}
.presentation-plans-wrap {
max-width: 760px;
margin: 0 auto;
}
/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
.presentation-authority {
grid-template-columns: 1fr;
text-align: center;
}
.presentation-authority-photo {
max-width: 220px;
margin: 0 auto;
aspect-ratio: 1 / 1;
}
.presentation-authority-content .presentation-section-title {
justify-content: center;
}
}
/* ===== Painel admin: caderno de observações da equipe ===== */
/* Sem token de alerta em variables.css; fica escopado aqui para não espalhar HEX. */
.obs-form,
.obs-list,
.obs-filters {
--obs-alerta: #E5484D;
--obs-alerta-bg: rgba(229, 72, 77, 0.12);
}
.obs-form-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-gold-300);
}
.obs-form-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
}
.obs-chips {
display: flex;
gap: 0.4rem;
}
.obs-chip {
min-height: 40px;
padding: 0.45rem 0.9rem;
border-radius: var(--radius-full);
border: 1px solid var(--border-subtle);
background: var(--bg-secondary);
color: var(--color-concrete-300);
font-size: 0.82rem;
cursor: pointer;
}
.obs-chip.active {
color: var(--color-gold-300);
border-color: var(--border-gold);
background: var(--gradient-gold-subtle);
}
.obs-priority {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.8rem;
color: var(--color-concrete-300);
}
.obs-priority select {
width: auto;
min-height: 40px;
padding: 0.4rem 0.6rem;
}
.obs-submit {
margin-left: auto;
min-height: 40px;
}
.obs-filters {
display: flex;
gap: 0.5rem;
overflow-x: auto;
scrollbar-width: none;
}
.obs-filters .admin-section-tab {
flex-shrink: 0;
min-height: 40px;
}
.obs-count {
min-width: 1.4rem;
padding: 0 0.35rem;
border-radius: var(--radius-full);
background: var(--border-subtle);
font-size: 0.72rem;
text-align: center;
}
.obs-empty {
padding: 1.5rem;
text-align: center;
}
.obs-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.obs-card {
padding: 1rem 1.1rem;
display: flex;
flex-direction: column;
gap: 0.55rem;
border-left: 3px solid var(--border-gold);
}
.obs-card.obs-status-em_andamento {
border-left-color: var(--color-moss-300);
}
.obs-card.obs-status-feita {
border-left-color: var(--border-subtle);
opacity: 0.75;
}
.obs-card-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
}
.obs-tag {
padding: 0.15rem 0.55rem;
border-radius: var(--radius-full);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
background: var(--border-subtle);
color: var(--color-concrete-300);
}
.obs-tag.obs-cat-ideia {
background: var(--gradient-gold-subtle);
color: var(--color-gold-300);
}
.obs-tag.obs-cat-bug,
.obs-tag.obs-prio-alta {
background: var(--obs-alerta-bg);
color: var(--obs-alerta);
}
.obs-delete {
margin-left: auto;
min-width: 40px;
min-height: 40px;
justify-content: center;
}
.obs-text {
margin: 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: 1.5;
color: var(--color-concrete-100);
}
.obs-meta {
margin: 0;
font-size: 0.75rem;
color: var(--color-concrete-400);
}
.obs-status {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
max-width: 420px;
}
.obs-status-btn {
min-height: 40px;
padding: 0.4rem 0.5rem;
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
background: var(--bg-secondary);
color: var(--color-concrete-300);
font-size: 0.78rem;
cursor: pointer;
}
.obs-status-btn.active {
color: var(--color-gold-300);
border-color: var(--border-gold);
background: var(--gradient-gold-subtle);
font-weight: 600;
}
@media (max-width: 640px) {
.obs-chips {
width: 100%;
}
.obs-chip {
flex: 1;
}
.obs-submit {
width: 100%;
justify-content: center;
margin-left: 0;
}
.obs-status {
max-width: none;
}
}
/* ===== Gravação de reunião: aviso na sala e aba Gravações do painel ===== */
/* Vermelho de "gravando" sem token em variables.css; fica escopado aqui. */
.gravacao-sala,
.grav-lista,
.grav-vazia {
--grav-vermelho: #E5484D;
--grav-vermelho-bg: rgba(229, 72, 77, 0.16);
}
/* Fica por cima da grade da sala, no alto, sem cobrir a barra de controles. */
.gravacao-sala {
position: absolute;
top: 0.6rem;
left: 0.6rem;
right: 0.6rem;
z-index: 20;
display: flex;
justify-content: flex-start;
pointer-events: none;
}
.gravacao-pilula {
pointer-events: auto;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem 0.6rem;
max-width: 100%;
min-height: 40px;
padding: 0.4rem 0.5rem 0.4rem 0.8rem;
border-radius: var(--radius-full);
background: rgba(6, 11, 8, 0.82);
border: 1px solid var(--border-subtle);
color: var(--color-concrete-100);
font-size: 0.82rem;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.gravacao-pilula.gravando {
border-color: var(--grav-vermelho);
background: rgba(30, 8, 9, 0.85);
}
.gravacao-ponto {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--grav-vermelho);
box-shadow: 0 0 0 4px var(--grav-vermelho-bg);
animation: gravacao-pulsar 1.4s ease-in-out infinite;
}
@keyframes gravacao-pulsar {
50% { opacity: 0.35; }
}
.gravacao-rotulo {
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 0.74rem;
color: var(--grav-vermelho);
}
.gravacao-tempo {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.gravacao-envio {
color: var(--color-concrete-300);
font-size: 0.75rem;
}
.gravacao-botao {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 32px;
padding: 0.3rem 0.8rem;
border-radius: var(--radius-full);
border: 1px solid transparent;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
}
.gravacao-botao.parar {
background: var(--grav-vermelho);
color: var(--color-white);
}
/* "Gravar" é a própria pílula. */
.gravacao-pilula.gravar {
padding: 0.4rem 0.95rem;
color: var(--color-concrete-100);
background: rgba(6, 11, 8, 0.82);
border-color: var(--border-subtle);
}
.gravacao-pilula.gravar svg {
color: var(--grav-vermelho);
}
.gravacao-girando {
animation: gravacao-girar 1s linear infinite;
}
@keyframes gravacao-girar {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.gravacao-ponto,
.gravacao-girando {
animation: none;
}
}
/* ===== Painel: lista de gravações ===== */
.grav-lista {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.grav-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 1rem;
}
.grav-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.grav-titulo {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
color: var(--color-concrete-100);
margin-right: auto;
}
.grav-tag {
font-size: 0.72rem;
padding: 0.2rem 0.55rem;
border-radius: var(--radius-full);
border: 1px solid var(--border-subtle);
color: var(--color-concrete-300);
}
.grav-tag.gravando {
color: var(--grav-vermelho);
border-color: var(--grav-vermelho);
background: var(--grav-vermelho-bg);
}
.grav-tag.masterclass {
color: var(--color-gold-300);
border-color: var(--border-gold);
}
.grav-meta {
font-size: 0.8rem;
color: var(--color-concrete-300);
}
.grav-player {
width: 100%;
max-height: 60vh;
border-radius: var(--radius-md);
background: var(--color-moss-900);
}
.grav-acoes {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.grav-acoes .btn {
min-height: 40px;
}
.grav-vazia {
padding: 1.25rem;
line-height: 1.5;
}
@media (max-width: 480px) {
.grav-acoes .btn {
flex: 1 1 auto;
justify-content: center;
}
}
/* Por último: camada native-feel sobrescreve os componentes por cascata. */
/* ==========================================================================
EKOZ — CAMADA "NATIVE FEEL"
Remove os vícios de navegador e ensina o app a se comportar como aplicativo
instalado (iOS/WebKit e Android/Chromium). Importado por último no
index.css, então vence os estilos de componente por ordem de cascata.
========================================================================== */
/* Os tokens de safe area (--sat/--sar/--sab/--sal) e --app-header-h moram em
variables.css, junto com o resto dos tokens. */
/* --------------------------------------------------------------------------
2. Sem destaque de toque, sem menu de contexto, sem seleção acidental
-------------------------------------------------------------------------- */
* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
/* O prefixo não é redundante: `user-select` sem prefixo só existe no Safari
17+, e o projeto não usa autoprefixer. */
-webkit-user-select: none;
user-select: none;
}
/* Onde o conteúdo existe para ser lido e copiado, a seleção volta:
campos de formulário, corpo de post, comentário e mensagem de chat. */
input,
textarea,
select,
[contenteditable='true'],
code,
pre,
.allow-select,
.post-body,
.comment-bubble,
.chat-bubble {
user-select: text;
-webkit-user-select: text;
-webkit-touch-callout: default;
}
/* --------------------------------------------------------------------------
3. Sem bounce/rubber-banding: a página não rola — o container rola
-------------------------------------------------------------------------- */
html,
body {
overscroll-behavior: none;
height: 100%;
width: 100%;
overflow: hidden;
/* Trava o body: no Safari é o que impede a página de deslizar por trás de
modais e drawers, e mata o efeito elástico da borda. */
position: fixed;
top: 0;
left: 0;
}
/* Único container de rolagem do app. Qualquer código que precise rolar o app
deve mexer aqui (ver src/utils/viewport.ts), não em window.scrollTo. */
#root {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
}
/* Áreas de rolagem internas (drawer de chat, listas de modal) também não
devem propagar o scroll pro container pai. */
.chat-messages-body,
.modal-content,
.chat-drawer-content {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* --------------------------------------------------------------------------
4. Cabeçalho e barra inferior respeitando as safe areas
-------------------------------------------------------------------------- */
.navbar-container {
padding-top: var(--sat);
/* --app-header-h já considera o breakpoint: 72px no desktop, 58px no
mobile, mais a safe area do topo nos dois casos. */
height: var(--app-header-h);
padding-left: max(1.75rem, var(--sal));
padding-right: max(1.75rem, var(--sar));
}
.mobile-bottom-nav {
padding-bottom: max(0.35rem, var(--sab));
padding-left: max(0.25rem, var(--sal));
padding-right: max(0.25rem, var(--sar));
/* Vidro nativo: o conteúdo atravessa desfocado por baixo da barra. */
background: rgba(10, 18, 14, 0.82);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
}
/* O conteúdo precisa terminar acima da barra inferior + home bar do iPhone. */
@media (max-width: 768px) {
.page-wrapper {
padding-bottom: calc(6.5rem + var(--sab)) !important;
}
.navbar-container {
padding-left: max(0.75rem, var(--sal));
padding-right: max(0.75rem, var(--sar));
}
}
/* Drawer e modais também encostam nas bordas do aparelho. */
.chat-drawer-content {
padding-bottom: var(--sab);
}
/* Toast: no mobile precisa subir acima da barra inferior e da home bar,
senão a notificação nasce escondida atrás da navegação. */
@media (max-width: 768px) {
.ekoz-toast {
left: max(0.75rem, var(--sal));
right: max(0.75rem, var(--sar));
bottom: calc(4.75rem + var(--sab));
max-width: none;
}
}
/* --------------------------------------------------------------------------
5. Feedback de toque instantâneo
-------------------------------------------------------------------------- */
button:active,
.clickable-card:active,
.ekoz-card.clickable-card:active,
.mobile-nav-item:active {
transform: scale(0.97);
transition: transform 0.1s ease-out;
}
/* Alvos de toque nunca menores que o mínimo confortável (44px no iOS). */
@media (max-width: 768px) {
.mobile-nav-item,
.navbar-icon-btn,
.navbar-tool-btn {
min-height: 44px;
}
}
/* No toque não existe hover: o :hover "grudado" depois do tap some. */
@media (hover: none) {
.ekoz-card:hover {
border-color: var(--border-subtle);
box-shadow: var(--shadow-sm);
transform: none;
}
.ekoz-card:hover::before {
opacity: 0;
}
.btn-gold:hover,
.btn-secondary:hover {
transform: none;
}
}
/* --------------------------------------------------------------------------
6. Teclado virtual: nada de zoom automático no foco (iOS)
Abaixo de 16px o Safari dá zoom no campo e desalinha a tela inteira.
O !important é proposital: é restrição da plataforma, não preferência.
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
input,
textarea,
select,
.ekoz-input,
.ekoz-textarea,
.ekoz-select {
font-size: 16px !important;
}
}
/* --------------------------------------------------------------------------
7. Sem arrastar imagem como no desktop
-------------------------------------------------------------------------- */
img {
-webkit-user-drag: none;
user-select: none;
}
/* --------------------------------------------------------------------------
8. Modo instalado (standalone): sem barra do navegador, o app ocupa tudo
-------------------------------------------------------------------------- */
@media (display-mode: standalone) {
.navbar-container {
/* Em standalone a status bar é translúcida por cima do app (WebKit),
então o respiro vem inteiro da safe area. */
padding-top: max(var(--sat), 8px);
}
}
/* --------------------------------------------------------------------------
9. Respeita quem pediu menos movimento no sistema
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------------------
10. Puxar para atualizar
-------------------------------------------------------------------------- */
/* O wrapper entra entre .ekoz-app-root (flex column) e .app-container: precisa
se comportar como o filho que substituiu, senão o conteúdo para de esticar. */
.ptr-content {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
width: 100%;
}
.ptr-indicator {
position: fixed;
top: calc(var(--app-header-h) - 26px);
left: 50%;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-full);
background: rgba(14, 26, 20, 0.95);
border: 1px solid var(--border-gold);
color: var(--color-gold-400);
box-shadow: var(--shadow-md);
pointer-events: none;
transition: opacity 0.15s ease-out;
}
.ptr-indicator.refreshing svg {
animation: ptr-spin 0.8s linear infinite;
}
@keyframes ptr-spin {
to {
transform: rotate(360deg);
}
}
/* --------------------------------------------------------------------------
11. Convite de instalação (Android) e folha de instruções (iOS)
-------------------------------------------------------------------------- */
.pwa-install-banner,
.pwa-ios-sheet {
position: fixed;
left: max(0.75rem, var(--sal));
right: max(0.75rem, var(--sar));
bottom: calc(0.75rem + var(--sab));
z-index: 1200;
background: rgba(14, 26, 20, 0.92);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--border-gold);
border-radius: var(--radius-lg);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
max-width: 460px;
margin: 0 auto;
}
/* No mobile a barra inferior ocupa o rodapé: o convite sobe pra não cobri-la. */
@media (max-width: 768px) {
.pwa-install-banner,
.pwa-ios-sheet {
bottom: calc(4.75rem + var(--sab));
}
}
.pwa-install-banner {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 2.25rem 0.85rem 0.85rem;
}
.pwa-install-icon {
width: 42px;
height: 42px;
border-radius: 11px;
flex-shrink: 0;
}
.pwa-install-copy {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
flex: 1;
}
.pwa-install-copy strong {
font-family: var(--font-display);
font-size: 0.92rem;
color: var(--color-white);
}
.pwa-install-copy span {
font-size: 0.78rem;
color: var(--color-concrete-400);
line-height: 1.35;
}
.pwa-install-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--radius-full);
background: transparent;
color: var(--color-concrete-400);
cursor: pointer;
}
.pwa-install-close:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--color-white);
}
.pwa-ios-sheet {
padding: 1.1rem 1rem 1.15rem;
}
.pwa-ios-sheet-head {
display: flex;
align-items: center;
gap: 0.85rem;
padding-right: 1.75rem;
}
.pwa-ios-steps {
list-style: none;
margin: 0.9rem 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.pwa-ios-steps li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.82rem;
line-height: 1.4;
color: var(--color-concrete-300);
}
.pwa-ios-steps strong {
color: var(--color-gold-300);
font-weight: 600;
}
.pwa-ios-step-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-top: 1px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: rgba(203, 165, 72, 0.12);
border: 1px solid var(--border-gold);
color: var(--color-gold-400);
}
/* --------------------------------------------------------------------------
12. Botão de instalação em destaque (tela de acesso)
Fica entre o "Entrar na Plataforma" (ouro sólido) e o rodapé: precisa ser
notado sem disputar a atenção com a ação principal da tela, por isso é
contorno dourado em vez de preenchimento.
-------------------------------------------------------------------------- */
.pwa-install-cta {
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
margin-top: 1.1rem;
padding: 0.8rem 0.9rem;
text-align: left;
cursor: pointer;
border: 1px solid var(--border-gold);
border-radius: var(--radius-md);
background: var(--gradient-gold-subtle);
color: var(--color-concrete-100);
font-family: var(--font-main);
transition: all var(--transition-fast);
animation: pulseGlow 3.2s ease-in-out 1.5s 3;
}
.pwa-install-cta:hover {
border-color: var(--border-gold-glow);
background: rgba(203, 165, 72, 0.16);
}
.pwa-install-cta-icon {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex-shrink: 0;
border-radius: var(--radius-sm);
background: rgba(203, 165, 72, 0.16);
border: 1px solid var(--border-gold);
color: var(--color-gold-400);
}
.pwa-install-cta-text {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
flex: 1;
}
.pwa-install-cta-text strong {
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 700;
color: var(--color-gold-200);
letter-spacing: -0.01em;
}
.pwa-install-cta-text span {
font-size: 0.75rem;
line-height: 1.35;
color: var(--color-concrete-400);
}
.pwa-install-cta-arrow {
flex-shrink: 0;
color: var(--color-gold-500);
}
/* CSS Reset & Global Base */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
width: 100%;
min-height: 100vh;
background-color: var(--bg-primary);
color: var(--color-concrete-100);
font-family: var(--font-main);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
/* Palavras/URLs longas coladas em posts, bios e chat nunca esticam o
layout além da viewport (rede de segurança global anti-overflow). */
overflow-wrap: break-word;
}
/* Sistema de cursor customizado */
body {
cursor: var(--cursor-default);
}
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
label[for],
select,
.cursor-pointer {
cursor: var(--cursor-pointer);
}
button:disabled,
input:disabled,
select:disabled,
[disabled],
[aria-disabled="true"],
[data-cursor-blocked="true"],
.cursor-not-allowed {
cursor: var(--cursor-blocked);
}
/* Nenhuma mídia (foto de post, capa de negócio, avatar enviado pelo usuário)
pode ultrapassar a largura do seu container — vale pra qualquer tela. */
img,
video,
canvas {
max-width: 100%;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--color-moss-600);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-gold-500);
}
/* Typography Helpers */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-white);
letter-spacing: -0.02em;
}
.text-gold-gradient {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
}
.text-muted {
color: var(--color-concrete-400);
}
/* Base Card Style */
.ekoz-card {
background: var(--gradient-card);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 1.5rem;
transition: all var(--transition-normal);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
box-sizing: border-box;
max-width: 100%;
}
.ekoz-card:hover {
border-color: var(--border-gold);
box-shadow: var(--shadow-gold);
transform: translateY(-2px);
}
.ekoz-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(203, 165, 72, 0.3), transparent);
opacity: 0;
transition: opacity var(--transition-normal);
}
.ekoz-card:hover::before {
opacity: 1;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
font-family: var(--font-main);
font-size: 0.92rem;
font-weight: 600;
padding: 0.65rem 1.35rem;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
text-decoration: none;
line-height: 1;
white-space: nowrap;
}
.btn:active {
transform: scale(0.98);
}
.btn-gold {
background: var(--gradient-gold);
color: #0F1713;
font-weight: 700;
box-shadow: 0 4px 16px rgba(203, 165, 72, 0.28);
}
.btn-gold:hover {
filter: brightness(1.08);
box-shadow: 0 6px 22px rgba(203, 165, 72, 0.45);
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(35, 66, 51, 0.4);
color: var(--color-concrete-100);
border: 1px solid var(--border-moss);
}
.btn-secondary:hover {
background: rgba(46, 86, 67, 0.6);
border-color: var(--color-gold-400);
color: var(--color-white);
}
.btn-ghost {
background: transparent;
color: var(--color-concrete-300);
}
.btn-ghost:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-white);
}
.btn-whatsapp {
background: #25D366;
color: #FFFFFF;
font-weight: 600;
}
.btn-whatsapp:hover {
background: #20BA5A;
box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35);
}
.btn-sm {
padding: 0.45rem 0.9rem;
font-size: 0.82rem;
border-radius: var(--radius-sm);
}
/* Badges */
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.badge-gold {
background: rgba(203, 165, 72, 0.15);
color: var(--color-gold-400);
border: 1px solid rgba(203, 165, 72, 0.35);
}
.badge-moss {
background: rgba(46, 86, 67, 0.3);
color: var(--color-moss-300);
border: 1px solid rgba(66, 120, 95, 0.4);
}
.badge-verified {
background: rgba(34, 197, 94, 0.12);
color: #4ADE80;
border: 1px solid rgba(34, 197, 94, 0.28);
}
.badge-pinned {
background: linear-gradient(135deg, rgba(203, 165, 72, 0.25), rgba(173, 133, 48, 0.15));
color: var(--color-gold-300);
border: 1px solid var(--border-gold);
}
/* Form Inputs */
.ekoz-input, .ekoz-textarea, .ekoz-select {
width: 100%;
background: rgba(14, 26, 20, 0.85);
border: 1px solid var(--border-moss);
border-radius: var(--radius-md);
padding: 0.75rem 1rem;
color: var(--color-white);
font-family: var(--font-main);
font-size: 0.92rem;
transition: all var(--transition-fast);
outline: none;
}
.ekoz-input:focus, .ekoz-textarea:focus, .ekoz-select:focus {
border-color: var(--color-gold-500);
box-shadow: 0 0 0 3px rgba(203, 165, 72, 0.18);
background: rgba(18, 32, 25, 0.95);
}
.ekoz-textarea {
min-height: 95px;
resize: vertical;
}
/* Modals & Overlays */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(5, 10, 8, 0.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 1.5rem;
animation: fadeIn 0.2s ease-out;
}
.modal-content {
background: #0E1913;
border: 1px solid var(--border-gold);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 30px rgba(203, 165, 72, 0.15);
border-radius: var(--radius-xl);
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Keyframes */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(18px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 16px rgba(203, 165, 72, 0.2); }
50% { box-shadow: 0 0 28px rgba(203, 165, 72, 0.45); }
}
/* Responsive Grid & Containers */
.app-container {
display: flex;
min-height: 100vh;
background: radial-gradient(circle at 50% 0%, rgba(26, 48, 36, 0.4) 0%, #0A120E 80%);
}
.main-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ekoz-app-root {
min-height: 100vh;
display: flex;
flex-direction: column;
max-width: 100%;
width: 100%;
overflow-x: hidden;
}
.page-wrapper {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 2rem 1.75rem 4rem;
box-sizing: border-box;
}
@media (max-width: 1024px) {
.page-wrapper {
padding: 1.25rem 1rem 3rem;
}
}
@media (max-width: 768px) {
.app-container {
max-width: 100%;
width: 100%;
overflow-x: hidden;
}
.main-content {
max-width: 100%;
width: 100%;
overflow-x: hidden;
}
.page-wrapper {
padding: 0.85rem 0.75rem 6.5rem !important;
max-width: 100%;
width: 100%;
box-sizing: border-box;
overflow-x: hidden;
}
.modal-overlay {
padding: 0.75rem;
}
.modal-content {
max-width: 100%;
border-radius: var(--radius-lg);
}
}