/* =================================================================== CREATOR PRO HUB — DESIGN SYSTEM Azul royal + branco/off-white, estética Gen Z premium. Edite as variáveis abaixo para trocar cores/fontes rapidamente. =================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap'); :root{ /* ---- cores principais ---- */ --royal: #3b4bf6; --royal-dark: #2432c9; --royal-light: #6b78ff; --royal-softest: #eef0ff; --royal-soft: #dde1ff; --ink: #14163a; --ink-soft: #565a82; --ink-faint: #9497b8; --off-white: #f7f7fb; --white: #ffffff; --surface-2: #fbfbfe; /* superfície suave (fundos internos, inputs) */ --line: #edeef6; /* bordas / divisórias */ --success: #16b378; --success-soft: #e3f9ef; --warning: #f5a623; --warning-soft: #fff3e0; --danger: #ff5a6e; --danger-soft: #ffe7ea; --info: #8b5cf6; --info-soft: #f1eaff; /* ---- tipografia ---- */ --font-display: 'Sora', 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* ---- espaçamento / raios ---- */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-pill: 999px; --shadow-sm: 0 2px 10px rgba(59, 75, 246, 0.06); --shadow-md: 0 8px 24px rgba(59, 75, 246, 0.10); --shadow-lg: 0 20px 48px rgba(36, 50, 201, 0.16); --sidebar-w: 264px; } /* =================================================================== TEMA ESCURO — só redefine as VARIÁVEIS; os componentes continuam usando var(--...). Ativado quando data-theme="dark" está no (o botão nas Configurações grava a escolha em localStorage). =================================================================== */ :root[data-theme="dark"]{ --royal-softest: rgba(107,120,255,0.14); --royal-soft: rgba(107,120,255,0.22); --ink: #eef0ff; --ink-soft: #aab0d6; --ink-faint: #7e83aa; --off-white: #0e0f26; /* fundo da página */ --white: #191b40; /* fundo dos cards */ --surface-2: #1f2148; /* superfície suave / inputs */ --line: #2b2e5e; /* bordas */ --success-soft: rgba(22,179,120,0.18); --warning-soft: rgba(245,166,35,0.16); --danger-soft: rgba(255,90,110,0.18); --info-soft: rgba(139,92,246,0.20); --shadow-sm: 0 2px 10px rgba(0,0,0,0.30); --shadow-md: 0 8px 24px rgba(0,0,0,0.42); --shadow-lg: 0 20px 48px rgba(0,0,0,0.55); } /* garante o claro explícito quando a aluna força "claro" (vence o dark do sistema, se houver) */ :root[data-theme="light"]{ --off-white: #f7f7fb; --white: #ffffff; --surface-2: #fbfbfe; --line: #edeef6; --ink: #14163a; --ink-soft: #565a82; --ink-faint: #9497b8; } *, *::before, *::after{ box-sizing: border-box; } html, body{ height: 100%; } body{ margin: 0; font-family: var(--font-body); background: var(--off-white); color: var(--ink); -webkit-font-smoothing: antialiased; } h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; color: var(--ink); } p{ margin: 0; } button{ font-family: inherit; } ul{ list-style:none; margin:0; padding:0; } a{ color: inherit; text-decoration: none; } input, select, textarea{ font-family: inherit; } ::selection{ background: var(--royal-soft); } /* scrollbar */ ::-webkit-scrollbar{ width: 8px; height: 8px; } ::-webkit-scrollbar-thumb{ background: var(--royal-soft); border-radius: 10px; } ::-webkit-scrollbar-track{ background: transparent; } /* =================================================================== APP SHELL =================================================================== */ .app-shell{ display: flex; min-height: 100vh; } /* ---- SIDEBAR ---- */ .sidebar{ width: var(--sidebar-w); flex-shrink: 0; background: linear-gradient(180deg, var(--royal) 0%, var(--royal-dark) 100%); color: var(--white); display: flex; flex-direction: column; padding: 24px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40; } .sidebar-brand{ display: flex; align-items: center; gap: 12px; padding: 6px 10px 28px; } .brand-mark{ width: 42px; height: 42px; background: rgba(255,255,255,0.16); border-radius: var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size: 20px; backdrop-filter: blur(4px); } .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .brand-text strong{ font-family: var(--font-display); font-size: 17px; font-weight:800; } .brand-text span{ font-size: 12px; opacity: .8; letter-spacing: 1px; text-transform: uppercase; } .sidebar-nav{ display:flex; flex-direction:column; gap: 4px; flex: 1; margin-top: 4px; } .nav-group-label{ font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .55; padding: 16px 12px 6px; font-weight: 700; } .nav-item{ display:flex; align-items:center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,0.82); cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; white-space: nowrap; } .nav-item .nav-icon{ font-size: 17px; width: 22px; text-align:center; } .nav-item:hover{ background: rgba(255,255,255,0.10); color: #fff; } .nav-item.active{ background: rgba(255,255,255,0.94); color: var(--royal-dark); box-shadow: var(--shadow-sm); } .nav-item.active .nav-icon{ filter: none; } .nav-item:active{ transform: scale(.98); } .sidebar-footer{ padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.14); } .sidebar-user{ display:flex; align-items:center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor:pointer; transition: background .15s; } .sidebar-user:hover{ background: rgba(255,255,255,0.1); } .sidebar-user-info{ display:flex; flex-direction:column; line-height:1.2; } .sidebar-user-info strong{ font-size: 13.5px; } .sidebar-user-info span{ font-size: 11.5px; opacity: .75; } .avatar{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-weight: 800; font-size: 15px; color:#fff; flex-shrink: 0; overflow: hidden; background-size: cover; background-position: center; } /* ---- MAIN ---- */ .main-content{ flex: 1; min-width: 0; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; justify-content: space-between; padding: 26px 36px 10px; position: sticky; top:0; z-index: 20; background: linear-gradient(var(--off-white) 70%, transparent); } .topbar-title h1{ font-size: 24px; font-weight: 800; } .topbar-title p{ color: var(--ink-soft); font-size: 13.5px; margin-top: 2px; } .topbar-actions{ display:flex; gap: 10px; } .view-container{ padding: 10px 36px 60px; flex:1; } /* =================================================================== BUTTONS =================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; border: none; cursor: pointer; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13.5px; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; } .btn:active{ transform: scale(.96); } .btn-primary{ background: var(--royal); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover{ background: var(--royal-dark); } .btn-ghost{ background: var(--white); color: var(--royal-dark); border: 1px solid var(--royal-soft); } .btn-ghost:hover{ background: var(--royal-softest); } .btn-soft{ background: var(--royal-softest); color: var(--royal-dark); } .btn-soft:hover{ background: var(--royal-soft); } .btn-danger{ background: var(--danger-soft); color: #c9273b; } .btn-danger:hover{ background: #ffd6dc; } .btn-sm{ padding: 6px 12px; font-size: 12.5px; } .btn-icon{ width: 38px; height: 38px; padding: 0; border-radius: 50%; } .btn:disabled{ opacity: .5; cursor: not-allowed; } .btn-block{ width: 100%; } /* =================================================================== CARDS / GRID =================================================================== */ .card{ background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 22px; border: 1px solid rgba(59,75,246,0.05); } .card-hover{ transition: transform .15s ease, box-shadow .15s ease; } .card-hover:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); } .grid{ display:grid; gap: 18px; } .grid-4{ grid-template-columns: repeat(4, 1fr); } .grid-3{ grid-template-columns: repeat(3, 1fr); } .grid-2{ grid-template-columns: repeat(2, 1fr); } @media (max-width: 1200px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(2, 1fr);} } @media (max-width: 640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns: 1fr; } } /* ---- Metric card ---- */ .metric-card{ position: relative; overflow: hidden; } .metric-card .metric-icon{ width: 44px; height: 44px; border-radius: 14px; display:flex; align-items:center; justify-content:center; font-size: 20px; margin-bottom: 14px; } .metric-card .metric-label{ font-size: 12.5px; color: var(--ink-soft); font-weight: 600; } .metric-card .metric-value{ font-family: var(--font-display); font-size: 25px; font-weight: 800; margin-top: 4px; } .metric-card .metric-sub{ font-size: 12px; color: var(--ink-faint); margin-top: 6px; } .metric-card .metric-sub.up{ color: var(--success); } .metric-card .metric-sub.down{ color: var(--danger); } .tone-royal .metric-icon{ background: var(--royal-softest); color: var(--royal); } .tone-success .metric-icon{ background: var(--success-soft); color: var(--success); } .tone-warning .metric-icon{ background: var(--warning-soft); color: var(--warning); } .tone-info .metric-icon{ background: var(--info-soft); color: var(--info); } .tone-danger .metric-icon{ background: var(--danger-soft); color: var(--danger); } /* =================================================================== HERO / GREETING =================================================================== */ .hero-greeting{ background: linear-gradient(120deg, var(--royal) 0%, var(--royal-light) 60%, #8b5cf6 130%); border-radius: var(--radius-lg); padding: 32px 34px; color: #fff; position: relative; overflow: hidden; margin-bottom: 22px; box-shadow: var(--shadow-lg); } .hero-greeting::after{ content:''; position:absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,0.10); } .hero-greeting::before{ content:''; position:absolute; right: 80px; bottom: -80px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,0.08); } .hero-greeting h2{ font-size: 26px; font-weight: 800; position: relative; z-index: 1; } .hero-greeting p{ margin-top: 8px; font-size: 14.5px; opacity: .92; max-width: 460px; position: relative; z-index: 1; } .hero-badge{ position: relative; z-index: 1; display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,0.16); padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; margin-top: 16px; } /* =================================================================== SECTION HEADERS =================================================================== */ .section-header{ display:flex; align-items:center; justify-content: space-between; margin: 30px 0 14px; } .section-header h3{ font-size: 17px; font-weight: 800; } .section-header .see-all{ font-size: 12.5px; font-weight: 700; color: var(--royal); cursor:pointer; } /* =================================================================== TABS =================================================================== */ .tabs{ display:flex; gap: 6px; flex-wrap: wrap; background: var(--white); padding: 6px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); width: fit-content; margin-bottom: 20px; } .tab-btn{ padding: 9px 16px; border-radius: var(--radius-pill); border: none; background: transparent; font-weight: 700; font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: all .15s; white-space: nowrap; } .tab-btn.active{ background: var(--royal); color: #fff; } .tab-btn:hover:not(.active){ background: var(--royal-softest); color: var(--royal-dark); } /* pill source tabs (colored chips for editable income sources) */ .chip-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .chip{ display:inline-flex; align-items:center; gap: 8px; background: var(--white); padding: 9px 16px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); font-weight: 700; font-size: 13px; cursor: pointer; border: 2px solid transparent; } .chip.active{ border-color: var(--royal); color: var(--royal-dark); background: var(--royal-softest); } .chip .chip-edit{ opacity: .4; font-size: 11px; } .chip:hover .chip-edit{ opacity: .9; } /* =================================================================== TABLE =================================================================== */ .table-wrap{ background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } table{ width: 100%; border-collapse: collapse; } thead th{ text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } tbody td{ padding: 14px 18px; font-size: 13.5px; border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:last-child td{ border-bottom: none; } tbody tr:hover{ background: var(--surface-2); } .row-actions{ display:flex; gap: 6px; justify-content: flex-end; } .empty-state{ text-align:center; padding: 60px 20px; color: var(--ink-faint); } .empty-state .empty-emoji{ font-size: 40px; margin-bottom: 10px; } .empty-state h4{ color: var(--ink); margin-bottom: 6px; } .empty-state p{ font-size: 13.5px; margin-bottom: 16px; } /* =================================================================== BADGES =================================================================== */ .badge{ display:inline-flex; align-items:center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; } .badge-dot{ width:6px; height:6px; border-radius:50%; background: currentColor; } .badge-success{ background: var(--success-soft); color: var(--success); } .badge-warning{ background: var(--warning-soft); color: #b9790a; } .badge-danger{ background: var(--danger-soft); color: #c9273b; } .badge-info{ background: var(--info-soft); color: var(--info); } .badge-royal{ background: var(--royal-softest); color: var(--royal); } .badge-neutral{ background: #eef0f4; color: var(--ink-soft); } .priority-alta{ background: var(--danger-soft); color: #c9273b; } .priority-media{ background: var(--warning-soft); color: #b9790a; } .priority-baixa{ background: var(--success-soft); color: var(--success); } /* =================================================================== PROGRESS BARS =================================================================== */ .progress-block{ margin-bottom: 18px; } .progress-head{ display:flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; } .progress-head strong{ font-weight: 700; } .progress-head span{ color: var(--ink-soft); } .progress-track{ height: 12px; background: #eef0f8; border-radius: var(--radius-pill); overflow: hidden; } .progress-fill{ height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--royal), var(--royal-light)); transition: width .4s ease; } .progress-fill.success{ background: linear-gradient(90deg, #16b378, #38d99a); } .progress-fill.warning{ background: linear-gradient(90deg, #f5a623, #ffc35c); } .progress-fill.danger{ background: linear-gradient(90deg, #ff5a6e, #ff8b98); } /* =================================================================== KANBAN =================================================================== */ .kanban-wrap{ overflow-x: auto; padding-bottom: 16px; } .kanban-board{ display:flex; gap: 14px; align-items: flex-start; min-width: max-content; } .kanban-col{ width: 250px; flex-shrink: 0; background: var(--surface-2); border-radius: var(--radius-md); padding: 12px; min-height: 120px; } .kanban-col-head{ display:flex; align-items:center; justify-content: space-between; padding: 4px 6px 12px; } .kanban-col-head h4{ font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); } .kanban-count{ background: var(--white); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); color: var(--royal); } .kanban-cards{ display:flex; flex-direction:column; gap: 10px; min-height: 40px; } .kanban-card{ background: var(--white); border-radius: var(--radius-sm); padding: 13px 14px; box-shadow: var(--shadow-sm); cursor: grab; transition: box-shadow .15s, transform .15s; border: 1px solid transparent; } .kanban-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); } .kanban-card.dragging{ opacity: .4; } .kanban-card h5{ font-size: 13.5px; font-weight: 800; margin-bottom: 4px; } .kanban-card .kc-niche{ font-size: 11.5px; color: var(--ink-soft); margin-bottom: 8px; } .kanban-card .kc-meta{ display:flex; align-items:center; justify-content: space-between; font-size: 11px; color: var(--ink-faint); } .kanban-col.drag-over{ background: var(--royal-softest); outline: 2px dashed var(--royal-light); } /* =================================================================== FORMS / MODAL =================================================================== */ .modal-root:empty{ display:none; } .modal-overlay{ position: fixed; inset:0; background: rgba(20,22,58,0.45); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index: 100; padding: 20px; animation: fadeIn .15s ease; } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } .modal-box{ background: var(--white); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: popIn .18s ease; } @keyframes popIn{ from{ transform: scale(.94) translateY(10px); opacity:0;} to{ transform: scale(1) translateY(0); opacity:1;} } .modal-head{ display:flex; align-items:center; justify-content: space-between; margin-bottom: 18px; } .modal-head h3{ font-size: 19px; font-weight: 800; } .modal-close{ width: 32px; height: 32px; border-radius: 50%; border:none; background: var(--surface-2); cursor:pointer; font-size: 15px; color: var(--ink-soft); } .modal-close:hover{ background: var(--royal-softest); color: var(--royal); } .form-group{ margin-bottom: 16px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } label{ display:block; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; } input[type=text], input[type=number], input[type=date], input[type=url], input[type=email], input[type=password], input[type=tel], input[type=search], select, textarea{ width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); font-size: 13.5px; background: var(--surface-2); color: var(--ink); transition: border .15s; } input:focus, select:focus, textarea:focus{ outline: none; border-color: var(--royal-light); background: var(--white); } textarea{ resize: vertical; min-height: 80px; } .form-actions{ display:flex; gap: 10px; margin-top: 22px; } .form-hint{ font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; } input[type=file]{ font-size: 12.5px; } /* avatar upload */ .avatar-upload{ display:flex; align-items:center; gap: 16px; margin-bottom: 20px; } .avatar-upload .avatar{ width: 64px; height: 64px; font-size: 22px; background: var(--royal-softest); color: var(--royal); } /* confirm dialog */ .confirm-box{ max-width: 380px; text-align:center; } .confirm-box .confirm-emoji{ font-size: 34px; margin-bottom: 10px; } .confirm-box p{ color: var(--ink-soft); font-size: 13.5px; margin-top: 6px; } .confirm-box .form-actions{ justify-content:center; } /* =================================================================== TOASTS =================================================================== */ .toast-stack{ position: fixed; bottom: 24px; right: 24px; display:flex; flex-direction:column; gap: 10px; z-index: 200; } .toast{ background: var(--ink); color:#fff; padding: 13px 20px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg); animation: toastIn .2s ease; display:flex; align-items:center; gap:8px; } .toast.success{ background: #15825f; } .toast.danger{ background: #c9273b; } @keyframes toastIn{ from{ transform: translateY(10px); opacity:0;} to{ transform:translateY(0); opacity:1;} } /* =================================================================== MISC =================================================================== */ .text-muted{ color: var(--ink-soft); } .text-faint{ color: var(--ink-faint); } .flex-between{ display:flex; align-items:center; justify-content:space-between; } .mt-8{ margin-top: 8px; } .mt-16{ margin-top:16px;} .mt-24{ margin-top:24px;} .mb-8{ margin-bottom: 8px; } .mb-16{ margin-bottom:16px;} .mb-24{ margin-bottom:24px;} .flex-gap{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; } .search-input{ position: relative; max-width: 320px; } .filters-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; align-items:center; } .filters-row select, .filters-row input{ width: auto; min-width: 150px; } .list-editable{ display:flex; flex-direction:column; gap: 8px; } .list-editable-item{ display:flex; align-items:center; gap: 10px; background:var(--surface-2); border:1px solid var(--line); padding: 10px 12px; border-radius: var(--radius-sm); } .list-editable-item input{ flex:1; } .drag-handle{ cursor: grab; color: var(--ink-faint); } .color-swatch{ width: 22px; height:22px; border-radius:50%; flex-shrink:0; } .notes-box{ background: #fffdf3; border: 1px solid #f5edcf; border-radius: var(--radius-md); padding: 18px; } .note-item{ background: var(--white); border-radius: var(--radius-sm); padding: 14px; margin-bottom:10px; box-shadow: var(--shadow-sm); position:relative; } .note-item .note-date{ font-size:11px; color:var(--ink-faint); margin-top:8px; } /* chart */ .chart-card canvas{ width: 100% !important; height: 220px !important; } .legend-row{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; } .legend-item{ display:flex; align-items:center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); font-weight: 600; } .legend-dot{ width: 10px; height: 10px; border-radius: 3px; } /* =================================================================== RESPONSIVE =================================================================== */ .mobile-nav-toggle{ display:none; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 16px; z-index: 60; width: 42px; height: 42px; border-radius: 50%; border:none; background: var(--royal); box-shadow: var(--shadow-md); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; } .mobile-nav-toggle span{ width: 18px; height: 2px; background: var(--white); border-radius:2px; } .sidebar-overlay{ display:none; } @media (max-width: 980px){ .mobile-nav-toggle{ display:flex; } .sidebar{ position: fixed; left: 0; top:0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); } .sidebar.open{ transform: translateX(0); } .sidebar-overlay{ display:none; position: fixed; inset:0; background: rgba(20,22,58,0.4); z-index: 39; } .sidebar-overlay.show{ display:block; } .topbar{ padding: calc(env(safe-area-inset-top, 0px) + 60px) 20px 10px; flex-direction: column; align-items:flex-start; gap: 14px; } .topbar-actions{ width: 100%; } .view-container{ padding: 10px 18px 60px; } .form-row{ grid-template-columns: 1fr; } .hero-greeting{ padding: 24px 20px; } } /* =================================================================== PWA — boot loader, banner e instruções de instalação (bloco adicionado só pra transformar o sistema em app instalável; não altera nenhum estilo das seções acima) =================================================================== */ .boot-loader{ position: fixed; inset: 0; z-index: 999; display:flex; flex-direction:column; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--royal-light) 0%, var(--royal) 55%, var(--royal-dark) 100%); transition: opacity .45s ease, visibility .45s ease; } .boot-loader.boot-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } .boot-gem{ animation: bootFloat 1.8s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(20,22,58,0.25)); } @keyframes bootFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } } .boot-title{ color:#fff; font-family: var(--font-display); font-weight: 800; font-size: 21px; margin-top: 20px; letter-spacing: .2px; } .boot-bar{ width: 160px; height: 5px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.25); margin-top: 22px; overflow: hidden; } .boot-bar-fill{ height: 100%; width: 40%; border-radius: var(--radius-pill); background: var(--white); animation: bootSlide 1.1s ease-in-out infinite; } @keyframes bootSlide{ 0%{ transform: translateX(-100%); } 50%{ transform: translateX(120%); } 100%{ transform: translateX(280%); } } .boot-sub{ color: rgba(255,255,255,0.85); font-size: 12.5px; margin-top: 14px; font-weight: 600; } /* banner de instalação (some no rodapé até a usuária instalar ou dispensar) */ .install-banner{ position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 90; max-width: 460px; margin: 0 auto; background: linear-gradient(120deg, var(--royal) 0%, var(--royal-light) 100%); color: #fff; border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap: 14px; animation: installBannerIn .3s ease; } @keyframes installBannerIn{ from{ transform: translateY(16px); opacity:0; } to{ transform: translateY(0); opacity:1; } } .install-banner .install-banner-icon{ width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,0.18); display:flex; align-items:center; justify-content:center; font-size: 20px; flex-shrink: 0; } .install-banner .install-banner-text{ flex: 1; min-width: 0; } .install-banner .install-banner-text strong{ display:block; font-size: 13.5px; } .install-banner .install-banner-text span{ display:block; font-size: 11.5px; opacity: .85; margin-top: 2px; } .install-banner .install-banner-actions{ display:flex; gap: 8px; flex-shrink: 0; } .install-banner .btn-install-close{ background: transparent; border:none; color: rgba(255,255,255,0.8); cursor:pointer; font-size: 18px; line-height: 1; padding: 4px; } @media (max-width: 640px){ .install-banner{ left: 12px; right: 12px; bottom: 84px; padding: 14px; } .install-banner .install-banner-text span{ display:none; } } /* seção de instalação dentro de Configurações */ .install-steps{ display:flex; flex-direction:column; gap: 10px; margin-top: 14px; } .install-step{ display:flex; gap: 12px; align-items:flex-start; } .install-step .install-step-num{ width: 24px; height: 24px; border-radius: 50%; background: var(--royal-softest); color: var(--royal); font-size: 12px; font-weight: 800; display:flex; align-items:center; justify-content:center; flex-shrink: 0; margin-top: 1px; } .install-step p{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; } .install-platform-tabs{ display:flex; gap: 8px; margin-bottom: 16px; } .install-status-pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 16px; background: var(--success-soft); color: var(--success); border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; } /* =================================================================== SUPABASE AUTH — telas de login, cadastro e recuperação de senha (bloco adicionado pra ligar o sistema à conta na nuvem; reaproveita os mesmos cards/inputs/botões do resto do app) =================================================================== */ .hidden{ display: none !important; } .auth-shell{ min-height: 100vh; width: 100%; display:flex; align-items:center; justify-content:center; padding: 24px; background: linear-gradient(135deg, var(--royal-light) 0%, var(--royal) 55%, var(--royal-dark) 100%); } .auth-card-wrap{ width: 100%; max-width: 420px; } .auth-brand{ display:flex; align-items:center; justify-content:center; gap: 12px; margin-bottom: 26px; color: #fff; } .auth-brand .brand-mark{ width: 48px; height: 48px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; font-size: 22px; } .auth-brand .brand-text{ display:flex; flex-direction:column; line-height:1.1; } .auth-brand .brand-text strong{ font-family: var(--font-display); font-size: 19px; font-weight: 800; } .auth-brand .brand-text span{ font-size: 12px; opacity: .85; letter-spacing: 1px; text-transform: uppercase; } .auth-card{ background: var(--white); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-lg); text-align: left; animation: popIn .2s ease; } .auth-card h2{ font-size: 21px; font-weight: 800; margin-bottom: 4px; text-align:center; } .auth-card > p{ text-align:center; } .auth-card .auth-icon{ font-size: 38px; text-align:center; margin-bottom: 6px; } .auth-card code{ background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: 12px; } .auth-links{ display:flex; justify-content:space-between; align-items:center; margin-top: 20px; flex-wrap:wrap; gap: 10px; } .auth-links a{ font-size: 12.5px; font-weight: 700; color: var(--royal); } .auth-links a:hover{ text-decoration: underline; } .auth-alert{ display:none; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; } .auth-alert.show{ display:block; } .auth-alert.danger{ background: var(--danger-soft); color: #c9273b; } .auth-alert.success{ background: var(--success-soft); color: var(--success); } @media (max-width: 480px){ .auth-card{ padding: 28px 22px; } } /* =================================================================== CREATOR OS — expansão premium (Creator AI · Conselho · Clube do Livro · Desafios · Banners) Bloco 100% aditivo: nada acima foi alterado. =================================================================== */ /* ---- animações e microinterações compartilhadas ---- */ @keyframes riseIn{ from{ opacity: 0; transform: translateY(14px); } to{ opacity: 1; transform: translateY(0); } } .anim-rise{ animation: riseIn .45s cubic-bezier(.21,.9,.35,1) both; } @media (prefers-reduced-motion: reduce){ .anim-rise{ animation: none; } } /* ================== BANNERS DO DASHBOARD ================== */ .banner-rail{ display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 14px; margin-bottom: 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .banner-rail::-webkit-scrollbar{ height: 6px; } .banner-card{ scroll-snap-align: start; min-width: 340px; flex: 1; border-radius: var(--radius-md); padding: 20px 22px; color: #fff; cursor: pointer; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-md); transition: transform .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } .banner-card::after{ content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,0.12); } .banner-card:hover{ transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-lg); } .banner-emoji{ font-size: 34px; flex-shrink: 0; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); } .banner-text{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .banner-text strong{ font-family: var(--font-display); font-size: 16px; font-weight: 800; } .banner-text span{ font-size: 12.5px; opacity: .9; } .banner-cta{ font-size: 12px; font-weight: 800; white-space: nowrap; background: rgba(255,255,255,0.18); padding: 8px 14px; border-radius: var(--radius-pill); backdrop-filter: blur(4px); position: relative; z-index: 1; } @media (max-width: 640px){ /* banners viram full-width empilhados (iguais ao card "boa noite"), em vez de um carrossel de cards estreitos que espremia o título na vertical. O botão desce pra própria linha, dando a largura toda pro título. */ .banner-rail{ flex-direction: column; overflow-x: visible; scroll-snap-type: none; } .banner-card{ min-width: 0; width: 100%; flex-wrap: wrap; row-gap: 14px; } .banner-text{ flex-basis: calc(100% - 48px); } .banner-cta{ margin-left: 48px; } } /* ================== CREATOR AI — EQUIPE ================== */ .ai-hero{ display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(120deg, var(--royal) 0%, var(--royal-light) 70%, #8b5cf6 130%); border-radius: var(--radius-lg); padding: 30px 32px; color: #fff; box-shadow: var(--shadow-lg); margin-bottom: 24px; position: relative; overflow: hidden; } .ai-hero::before{ content: ''; position: absolute; right: 10%; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,0.09); } .ai-hero-text h2{ font-size: 23px; font-weight: 800; color: #fff; } .ai-hero-text p{ margin-top: 6px; font-size: 13.5px; opacity: .92; max-width: 480px; } .ai-council-btn{ background: rgba(255,255,255,0.95); color: var(--royal-dark); border-radius: var(--radius-md); padding: 14px 20px; display: flex; align-items: center; gap: 12px; text-align: left; box-shadow: var(--shadow-md); flex-shrink: 0; z-index: 1; } .ai-council-btn:hover{ background: var(--white); transform: translateY(-2px); } .ai-council-icon{ font-size: 26px; } .ai-council-btn strong{ display: block; font-size: 14px; } .ai-council-btn small{ display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 600; } .ai-team-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 18px; } .ai-card{ display: flex; flex-direction: column; cursor: pointer; } .ai-card-top{ display: flex; align-items: center; gap: 13px; } .ai-avatar{ border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: inset 0 -3px 8px rgba(0,0,0,0.14), 0 4px 10px rgba(36,50,201,0.18); border: 2.5px solid rgba(255,255,255,0.85); } .ai-card-id h4{ font-size: 16px; display: flex; align-items: center; gap: 7px; } .ai-tag{ font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: var(--radius-pill); letter-spacing: .5px; } .ai-role{ font-size: 12px; color: var(--ink-soft); font-weight: 600; } .ai-card-desc{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin: 12px 0 16px; flex: 1; } .ai-talk-btn{ margin-top: auto; } .ai-card:hover .ai-talk-btn{ background: var(--royal); color: #fff; } /* ================== CREATOR AI — CHAT ================== */ .ai-chat-wrap{ background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; height: calc(100vh - 190px); min-height: 480px; overflow: hidden; } .ai-chat-header{ display: flex; align-items: center; gap: 12px; padding: 16px 20px; color: #fff; } .ai-back{ width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.2); color: #fff; font-size: 16px; transition: background .15s; } .ai-back:hover{ background: rgba(255,255,255,0.35); } .ai-chat-header-info{ display: flex; flex-direction: column; line-height: 1.25; } .ai-chat-header-info strong{ font-size: 15px; } .ai-chat-header-info span{ font-size: 11.5px; opacity: .88; } .ai-messages{ flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: var(--surface-2); } .ai-msg{ display: flex; gap: 10px; align-items: flex-end; animation: riseIn .3s ease both; } .ai-msg-user{ justify-content: flex-end; } .ai-bubble{ max-width: 78%; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; border-radius: 18px 18px 18px 5px; background: var(--white); box-shadow: var(--shadow-sm); color: var(--ink); } .ai-msg-user .ai-bubble{ background: var(--royal); color: #fff; border-radius: 18px 18px 5px 18px; } .ai-typing{ display: flex; gap: 4px; padding: 15px 18px; } .ai-typing span, .ai-typing-inline span{ width: 7px; height: 7px; border-radius: 50%; background: var(--royal-light); animation: typingBounce 1.2s infinite; } .ai-typing span:nth-child(2), .ai-typing-inline span:nth-child(2){ animation-delay: .18s; } .ai-typing span:nth-child(3), .ai-typing-inline span:nth-child(3){ animation-delay: .36s; } @keyframes typingBounce{ 0%, 60%, 100%{ transform: translateY(0); opacity: .5; } 30%{ transform: translateY(-5px); opacity: 1; } } .ai-typing-inline{ display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; } /* ---- bolha do bot: wrapper + toolbar (copiar / refazer) ---- */ .ai-bubble-wrap{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 78%; } .ai-bubble-wrap .ai-bubble{ max-width: 100%; } .ai-bubble-tools{ display: flex; gap: 4px; padding-left: 4px; opacity: .6; transition: opacity .15s; } .ai-msg-bot:hover .ai-bubble-tools, .ai-bubble-tools:focus-within{ opacity: 1; } .ai-tool-btn{ border: none; background: transparent; cursor: pointer; font-size: 13px; line-height: 1; padding: 4px 7px; border-radius: 8px; color: var(--ink-faint); transition: background .15s, color .15s; } .ai-tool-btn:hover{ background: var(--royal-soft); color: var(--royal-dark); } /* ---- indicador "pensando…" ---- */ .ai-thinking-bubble{ display: inline-flex; align-items: center; gap: 4px; padding: 12px 16px; } .ai-thinking-label{ font-size: 13px; color: var(--ink-faint); font-weight: 600; } .ai-thinking-bubble .ai-typing{ padding: 0; } /* ---- aviso elegante de erro da IA / conexão ---- */ .ai-error{ align-self: center; max-width: 94%; display: flex; align-items: center; gap: 10px; background: #fff4f4; border: 1.5px solid #ffd4d9; color: #b3253a; padding: 11px 14px; border-radius: 14px; font-size: 12.5px; font-weight: 600; animation: riseIn .3s ease both; } .ai-error-icon{ font-size: 18px; line-height: 1; } .ai-error-body{ flex: 1; } .ai-error-retry{ border: none; background: var(--royal); color: #fff; cursor: pointer; font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-pill); white-space: nowrap; transition: filter .15s; } .ai-error-retry:hover{ filter: brightness(1.08); } .ai-suggestions{ display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px 4px; background: var(--surface-2); } .ai-chip{ border: 1.5px solid var(--royal-soft); background: var(--white); color: var(--royal-dark); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: all .15s; } .ai-chip:hover{ background: var(--royal); border-color: var(--royal); color: #fff; transform: translateY(-1px); } .ai-input-row{ display: flex; gap: 10px; padding: 14px 20px 18px; background: var(--surface-2); } .ai-input-row input{ flex: 1; border-radius: var(--radius-pill); padding: 12px 18px; } .ai-send{ border-radius: var(--radius-pill); } /* ================== CONSELHO CREATOR PRO ================== */ .council-hero{ background: linear-gradient(135deg, #14163a 0%, var(--royal-dark) 55%, var(--royal) 100%); border-radius: var(--radius-lg); padding: 40px 34px; color: #fff; text-align: center; box-shadow: var(--shadow-lg); margin-bottom: 22px; position: relative; overflow: hidden; } .council-hero::after{ content: ''; position: absolute; left: 50%; top: -120px; transform: translateX(-50%); width: 420px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(107,120,255,0.35), transparent); } .council-hero-inner{ position: relative; z-index: 1; } .council-back{ position: absolute; left: 0; top: 0; } .council-seats{ display: flex; justify-content: center; gap: -6px; margin-bottom: 18px; } .council-seats .ai-avatar{ margin: 0 -7px; border-width: 2px; } .council-more{ width: 40px; height: 40px; font-size: 12.5px; font-weight: 800; background: rgba(255,255,255,0.16); backdrop-filter: blur(4px); } .council-hero h2{ color: #fff; font-size: 24px; } .council-hero p{ margin: 10px auto 22px; font-size: 13.5px; opacity: .9; max-width: 480px; } .council-start-btn{ background: var(--white); color: var(--royal-dark); font-size: 15px; padding: 14px 30px; border-radius: var(--radius-pill); box-shadow: 0 10px 28px rgba(0,0,0,0.28); } .council-start-btn:hover{ transform: translateY(-2px) scale(1.02); } .council-start-btn:disabled{ opacity: .7; } .council-live{ margin-bottom: 24px; } .council-status{ text-align: center; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); padding: 12px; margin-bottom: 14px; } .council-speech{ display: flex; gap: 12px; align-items: flex-start; background: var(--white); border-radius: var(--radius-md); padding: 15px 17px; box-shadow: var(--shadow-sm); margin-bottom: 10px; } .council-speech strong{ font-size: 13px; display: block; margin-bottom: 3px; } .council-speech p{ font-size: 13px; color: var(--ink-soft); line-height: 1.55; } .council-plan{ background: linear-gradient(160deg, #fff 0%, var(--royal-softest) 100%); border: 2px solid var(--royal-soft); border-radius: var(--radius-lg); padding: 26px; margin-top: 20px; box-shadow: var(--shadow-md); } .council-plan-head{ margin-bottom: 14px; } .council-plan-badge{ display: inline-block; background: var(--success-soft); color: var(--success); font-size: 11.5px; font-weight: 800; padding: 5px 13px; border-radius: var(--radius-pill); margin-bottom: 10px; } .council-plan h3{ font-size: 19px; } .plan-pre{ font-family: var(--font-body); font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; color: var(--ink-soft); margin: 10px 0 0; background: rgba(255,255,255,0.7); border-radius: var(--radius-sm); padding: 16px; } /* ================== CLUBE DO LIVRO ================== */ .book-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .book-card{ padding: 0; overflow: hidden; display: flex; flex-direction: column; } .book-cover{ height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; position: relative; overflow: hidden; } .book-cover::after{ content: ''; position: absolute; left: 14px; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.28); /* lombada do livro */ } .book-cover-emoji{ font-size: 40px; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); } .book-cover-title{ font-family: var(--font-display); font-weight: 800; font-size: 13px; text-align: center; padding: 0 24px; text-shadow: 0 2px 6px rgba(0,0,0,0.18); } .book-body{ padding: 18px; display: flex; flex-direction: column; flex: 1; } .book-cat{ align-self: flex-start; margin-bottom: 8px; } .book-body h4{ font-size: 15.5px; } .book-author{ font-size: 12px; color: var(--ink-faint); font-weight: 600; margin-top: 2px; } .book-desc{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 10px; flex: 1; } .book-stars{ display: inline-flex; gap: 2px; } .book-star{ color: #dfe1f0; font-size: 17px; transition: color .12s, transform .12s; } .book-star.on{ color: #f5a623; } .book-stars-input .book-star{ cursor: pointer; font-size: 26px; } .book-stars-input .book-star:hover{ transform: scale(1.2); } .book-reading-row{ display: flex; gap: 16px; align-items: flex-start; } .book-mini-cover{ width: 52px; height: 68px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: var(--shadow-sm); } .book-reading-info{ flex: 1; min-width: 0; } .book-note-preview{ font-size: 12.5px; color: var(--ink-soft); background: var(--royal-softest); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; } .book-modal-head{ display: flex; gap: 14px; align-items: center; margin-bottom: 18px; } /* ================== DESAFIOS / GAMIFICAÇÃO ================== */ .player-card{ background: linear-gradient(120deg, var(--royal) 0%, #8b5cf6 100%); border-radius: var(--radius-lg); padding: 26px 28px; color: #fff; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; position: relative; overflow: hidden; } .player-card::after{ content: ''; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,0.1); } .player-level{ display: flex; align-items: center; gap: 14px; } .player-level-emoji{ width: 62px; height: 62px; border-radius: 50%; font-size: 30px; background: rgba(255,255,255,0.18); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; border: 2.5px solid rgba(255,255,255,0.6); } .player-level-label{ font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: .85; } .player-level h3{ color: #fff; font-size: 20px; } .player-xp .progress-head{ color: #fff; } .player-xp .progress-head span{ color: rgba(255,255,255,0.85); font-size: 12px; } .player-track{ background: rgba(255,255,255,0.22); height: 14px; } .player-fill{ background: linear-gradient(90deg, #fff, #ffe9a8); } .player-stats{ display: flex; gap: 22px; position: relative; z-index: 1; } .player-stats div{ text-align: center; } .player-stats strong{ display: block; font-family: var(--font-display); font-size: 24px; font-weight: 800; } .player-stats span{ font-size: 11px; opacity: .85; } @media (max-width: 860px){ .player-card{ grid-template-columns: 1fr; gap: 18px; } } .medal-row{ display: flex; gap: 12px; flex-wrap: wrap; } .medal{ background: var(--white); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; box-shadow: var(--shadow-sm); transition: transform .15s ease; } .medal.earned:hover{ transform: translateY(-3px) rotate(-1deg); } .medal-emoji{ font-size: 26px; } .medal-name{ font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-align: center; } .medal.locked{ opacity: .45; filter: grayscale(.8); } .medal.earned{ border: 1.5px solid #ffe9a8; background: linear-gradient(160deg, #fff, #fffbea); } .challenge-card{ display: flex; flex-direction: column; } .challenge-desc{ font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; margin-top: 6px; flex: 1; } .challenge-points{ font-weight: 800; font-size: 13px; color: var(--royal); } .challenge-done{ background: linear-gradient(160deg, #fff, var(--success-soft)); border-color: rgba(22,179,120,0.25); } .challenge-done h4{ color: var(--success); } .diff-facil{ background: var(--success-soft); color: var(--success); } .diff-medio{ background: var(--warning-soft); color: #b9790a; } .diff-dificil{ background: var(--danger-soft); color: #c9273b; } .diff-lendario{ background: linear-gradient(90deg, #fdf0c2, #fbd9ff); color: #8b5cf6; } .leader-row{ display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--line); } .leader-row:last-child{ border-bottom: none; } .leader-me{ background: var(--royal-softest); border-radius: var(--radius-sm); } .leader-pos{ font-size: 16px; font-weight: 800; width: 36px; text-align: center; } .leader-name{ flex: 1; font-weight: 700; font-size: 13.5px; } .leader-xp{ font-weight: 800; color: var(--royal); font-size: 13.5px; } .leader-count{ font-size: 11.5px; width: 84px; text-align: right; } /* ---- mobile: chat e heros ---- */ @media (max-width: 640px){ .ai-hero{ flex-direction: column; align-items: stretch; text-align: center; } .ai-council-btn{ justify-content: center; } .ai-chat-wrap{ height: calc(100vh - 230px); } .ai-bubble{ max-width: 88%; } .ai-bubble-wrap{ max-width: 88%; } .ai-bubble-tools{ opacity: 1; } /* sem hover no touch: sempre visível */ .council-hero{ padding: 32px 20px; } } /* =================================================================== BATCH 2 — auto-update, estante do livro, energia IA Bloco 100% aditivo. =================================================================== */ /* ---------- modal "nova versão disponível" ---------- */ .update-toast{ position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 250; width: calc(100% - 32px); max-width: 460px; background: linear-gradient(120deg, var(--royal) 0%, var(--royal-light) 100%); color: #fff; border-radius: var(--radius-md); padding: 16px 18px; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; transition: transform .4s cubic-bezier(.21,.9,.35,1), opacity .3s ease; opacity: 0; } .update-toast.show{ transform: translate(-50%, 0); opacity: 1; } .update-toast-icon{ font-size: 26px; flex-shrink: 0; } .update-toast-body{ flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; } .update-toast-body strong{ font-size: 13.5px; font-weight: 800; line-height: 1.3; } .update-toast-body span{ font-size: 12px; opacity: .9; } .update-toast-actions{ display: flex; gap: 8px; align-items: center; } .btn-update-later{ background: transparent; border: none; color: rgba(255,255,255,0.85); font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 8px 10px; } .btn-update-now{ background: var(--white); color: var(--royal-dark); border: none; font-weight: 800; font-size: 12.5px; cursor: pointer; padding: 9px 16px; border-radius: var(--radius-pill); transition: transform .12s ease; } .btn-update-now:hover{ transform: translateY(-1px); } .btn-update-now:disabled{ opacity: .7; cursor: default; } @media (max-width: 480px){ .update-toast-actions{ width: 100%; justify-content: flex-end; } } /* ---------- ESTANTE DO CLUBE DO LIVRO ---------- */ .bookshelf-wrap{ background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 100%); border-radius: var(--radius-lg); padding: 30px 26px 0; box-shadow: var(--shadow-sm); } .bookshelf{ display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end; padding-bottom: 18px; border-bottom: 14px solid #c9a26a; border-radius: 0 0 6px 6px; box-shadow: 0 14px 0 -2px #a8814f; /* "madeira" da prateleira */ margin-bottom: 40px; min-height: 210px; } .book-spine{ width: 52px; height: 200px; border-radius: 4px 6px 6px 4px; cursor: pointer; position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 0 16px; gap: 8px; box-shadow: inset -6px 0 12px rgba(0,0,0,0.22), inset 4px 0 6px rgba(255,255,255,0.18), var(--shadow-sm); transition: transform .18s cubic-bezier(.21,.9,.35,1), box-shadow .18s ease; color: #fff; overflow: hidden; } .book-spine::before{ /* faixa da lombada */ content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: rgba(255,255,255,0.25); border-radius: 2px; } .book-spine::after{ content: ''; position: absolute; right: 5px; top: 10px; bottom: 10px; width: 2px; background: rgba(0,0,0,0.15); border-radius: 2px; } .book-spine:hover{ transform: translateY(-14px) rotate(-1deg); box-shadow: inset -6px 0 12px rgba(0,0,0,0.22), var(--shadow-lg); } .book-spine-text{ writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: .3px; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,0.28); max-height: 118px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .book-spine-author{ writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; opacity: .82; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.3); white-space: nowrap; max-height: 60px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; } .book-spine-done{ position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 13px; } .bookshelf-hint{ text-align: center; color: var(--ink-faint); font-size: 12px; padding: 0 0 18px; } /* detalhe do livro (dentro do modal) */ .book-detail-cover{ height: 190px; border-radius: var(--radius-md); margin-bottom: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; position: relative; overflow: hidden; } .book-detail-cover::after{ content: ''; position: absolute; left: 16px; top: 0; bottom: 0; width: 3px; background: rgba(255,255,255,0.28); } .book-detail-cover .bd-emoji{ font-size: 46px; filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2)); } .book-detail-cover .bd-title{ font-family: var(--font-display); font-weight: 800; font-size: 16px; text-align: center; padding: 0 30px; text-shadow: 0 2px 6px rgba(0,0,0,0.2); } .book-detail-meta{ display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; } .book-detail-desc{ font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; } .book-read-btn{ text-decoration: none; } .book-no-link{ font-size: 12px; color: var(--ink-faint); text-align: center; margin-top: 8px; } /* ---------- BARRA DE ENERGIA IA ---------- */ .energy-bar-card{ background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px 20px; margin-bottom: 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .energy-bolt{ width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; background: linear-gradient(135deg, #f5a623, #ff8b3d); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 6px 14px rgba(245,166,35,0.35); } .energy-main{ flex: 1; min-width: 200px; } .energy-head{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .energy-head strong{ font-family: var(--font-display); font-size: 15px; font-weight: 800; } .energy-head strong span{ color: var(--ink-faint); font-weight: 600; font-size: 12.5px; } .energy-track{ height: 12px; background: #eef0f8; border-radius: var(--radius-pill); overflow: hidden; } .energy-fill{ height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #f5a623, #ff8b3d); transition: width .5s cubic-bezier(.21,.9,.35,1); } .energy-fill.low{ background: linear-gradient(90deg, #ff5a6e, #ff8b98); } .energy-meta{ display: flex; gap: 18px; flex-wrap: wrap; margin-top: 9px; } .energy-meta span{ font-size: 11.5px; color: var(--ink-soft); } .energy-meta strong{ color: var(--ink); } .energy-badge-plan{ font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--royal-softest); color: var(--royal); } .energy-badge-plan.premium{ background: linear-gradient(90deg, #fdf0c2, #fbd9ff); color: #8b5cf6; } .energy-cost{ font-size: 10.5px; font-weight: 700; color: var(--warning); background: var(--warning-soft); padding: 2px 8px; border-radius: var(--radius-pill); } .ai-card-top .energy-cost{ margin-left: auto; } .ai-empty-energy{ background: var(--warning-soft); color: #b9790a; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; } /* =================================================================== BATCH 3 — tema (botão), CAMPANHAS e MEU PERFIL (tudo via var(--...) pra funcionar no claro e no escuro) =================================================================== */ /* ---- botão de tema (Configurações) ---- */ .theme-switch{ display:inline-flex; gap:6px; background:var(--surface-2); border:1px solid var(--line); padding:5px; border-radius:var(--radius-pill); } .theme-opt{ font-family:var(--font-display); font-weight:700; font-size:13px; padding:9px 18px; border-radius:var(--radius-pill); border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:all .15s; } .theme-opt.active{ background:var(--royal); color:#fff; box-shadow:var(--shadow-sm); } /* ===================== CAMPANHAS ===================== */ .camp-hero{ background:linear-gradient(120deg,var(--royal-light) 0%,var(--royal) 55%,var(--royal-dark) 100%); color:#fff; border-radius:var(--radius-lg); padding:26px 28px; margin-bottom:18px; } .camp-hero h2{ color:#fff; font-size:23px; } .camp-hero p{ color:rgba(255,255,255,0.9); font-size:14px; margin-top:6px; max-width:60ch; } .tab-count{ margin-left:6px; opacity:.65; font-size:11px; } .camp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:16px; margin-top:18px; } .camp-card{ position:relative; display:flex; flex-direction:column; gap:12px; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease; } .camp-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .camp-card.is-done{ opacity:.62; filter:grayscale(.35); } .camp-ribbon{ position:absolute; top:16px; left:-1px; font-family:var(--font-display); font-weight:800; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--info); padding:4px 11px; border-radius:0 999px 999px 0; box-shadow:var(--shadow-sm); } .camp-card.has-ribbon .camp-top{ margin-top:12px; } .camp-status{ position:absolute; top:16px; right:16px; font-family:var(--font-display); font-weight:800; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; } .camp-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .camp-status.st-open{ color:var(--success); background:var(--success-soft); } .camp-status.st-closing{ color:var(--warning); background:var(--warning-soft); } .camp-status.st-done{ color:var(--ink-faint); background:var(--surface-2); } .camp-status.light{ position:static; color:#fff; background:rgba(255,255,255,0.18); margin-left:auto; } .camp-status.light::before{ display:none; } .camp-applied{ align-self:flex-start; font-size:10.5px; font-weight:800; color:var(--success); background:var(--success-soft); padding:3px 9px; border-radius:999px; } .camp-top{ display:flex; align-items:center; gap:12px; } .camp-logo{ width:48px; height:48px; border-radius:13px; flex-shrink:0; display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:18px; box-shadow:var(--shadow-sm); } .camp-logo.lg{ width:54px; height:54px; font-size:20px; } .camp-id{ min-width:0; } .camp-id b{ font-family:var(--font-display); font-weight:800; font-size:16px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink); } .camp-cat{ display:inline-block; margin-top:3px; font-size:11px; font-weight:700; color:var(--royal); background:var(--royal-softest); padding:3px 9px; border-radius:999px; } .camp-cat.light{ color:#fff; background:rgba(255,255,255,0.2); } .camp-urgency{ font-size:11.5px; font-weight:700; display:flex; align-items:center; gap:6px; } .camp-urgency.warn{ color:var(--warning); } .camp-urgency.faint{ color:var(--ink-faint); } .camp-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px solid var(--line); padding-top:13px; } .camp-meta .row .lab{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); } .camp-meta .row .val{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--ink); } .camp-meta .val.pay{ color:var(--success); } /* detalhe da campanha (modal) */ .camp-detail-hero{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--radius-md); color:#fff; margin-bottom:16px; } .camp-detail-hero b{ font-family:var(--font-display); font-weight:800; font-size:19px; display:block; } .camp-detail-body{ display:flex; flex-direction:column; gap:16px; } .cd-block .cd-lab{ font-family:var(--font-display); font-weight:800; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--royal); margin-bottom:5px; } .cd-block p{ color:var(--ink-soft); font-size:14px; } .cd-block ul{ margin:4px 0 0; padding-left:18px; color:var(--ink-soft); font-size:14px; display:flex; flex-direction:column; gap:4px; } .cd-deliver{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .cd-deliver .d{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center; } .cd-deliver .d b{ font-family:var(--font-display); font-size:19px; font-weight:800; display:block; color:var(--ink); } .cd-deliver .d span{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); } .cd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .cd-info{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:13px; } .cd-info .cd-lab{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); } .cd-info .cd-big{ font-family:var(--font-display); font-weight:800; font-size:15px; margin-top:3px; color:var(--ink); } .cd-bar{ height:7px; border-radius:999px; background:var(--royal-softest); overflow:hidden; margin-top:8px; } .cd-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--royal-light),var(--royal)); border-radius:999px; } .camp-detail-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; } .cd-pay{ font-family:var(--font-display); font-weight:800; font-size:19px; color:var(--success); } .cd-pay span{ display:block; font-size:11px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.03em; } /* inscrição */ .apply-badge{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-display); font-weight:800; font-size:12px; color:var(--success); background:var(--success-soft); padding:6px 13px; border-radius:999px; margin-bottom:14px; } .apply-success{ text-align:center; padding:8px 0 4px; } .apply-success .tick{ width:56px; height:56px; border-radius:50%; background:var(--success-soft); color:var(--success); display:grid; place-items:center; font-size:28px; margin:0 auto 12px; } .apply-success h3{ font-size:20px; } .apply-success p{ color:var(--ink-soft); font-size:14px; margin:8px 0 18px; } /* ===================== MEU PERFIL ===================== */ .prof-hero{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .prof-cover{ height:96px; background:linear-gradient(120deg,var(--royal-light) 0%,var(--royal) 55%,var(--royal-dark) 100%); } .prof-hero-body{ padding:0 24px 22px; display:flex; gap:18px; flex-wrap:wrap; } .prof-avatar{ width:100px; height:100px; border-radius:28px; margin-top:-42px; border:4px solid var(--white); flex-shrink:0; background:linear-gradient(135deg,var(--royal-light),var(--royal-dark)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:800; font-size:36px; box-shadow:var(--shadow-md); } .prof-idn{ flex:1; min-width:220px; padding-top:14px; } .prof-namerow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; } .prof-namerow h2{ font-size:24px; } .prof-tbadge{ font-family:var(--font-display); font-weight:800; font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--info-soft); color:var(--info); } .prof-handle{ color:var(--ink-faint); font-size:13.5px; margin-top:2px; } .prof-meta{ display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-soft); font-size:13px; margin-top:9px; } .prof-bio{ color:var(--ink-soft); font-size:14px; margin-top:11px; max-width:60ch; } .prof-trust{ display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; } .prof-tchip{ font-size:11.5px; font-weight:700; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); padding:5px 11px; border-radius:999px; } .prof-tchip.yes{ color:var(--success); background:var(--success-soft); border-color:transparent; } .prof-actions{ display:flex; flex-direction:column; gap:9px; padding-top:16px; } @media(max-width:680px){ .prof-actions{ width:100%; flex-direction:row; flex-wrap:wrap; } .prof-actions .btn{ flex:1; } } .prof-complete{ margin-top:16px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:16px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .prof-complete-pct{ font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--royal); } .prof-complete-txt{ flex:1; min-width:200px; } .prof-complete-txt strong{ font-size:14px; } .prof-bar{ height:9px; border-radius:999px; background:var(--royal-softest); overflow:hidden; margin-top:7px; } .prof-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--royal-light),var(--royal)); border-radius:999px; } .prof-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-top:16px; } @media(max-width:900px){ .prof-grid{ grid-template-columns:1fr; } } .prof-col{ display:flex; flex-direction:column; gap:16px; } .prof-card-title{ font-family:var(--font-display); font-weight:800; font-size:14.5px; display:flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--ink); } .prof-edit{ margin-left:auto; font-size:11px; font-weight:800; color:var(--royal); background:var(--royal-softest); border:none; padding:5px 11px; border-radius:999px; cursor:pointer; } .prof-soon{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--info); background:var(--info-soft); padding:3px 9px; border-radius:999px; } .prof-socials{ display:flex; flex-direction:column; gap:10px; } .prof-soc{ display:flex; align-items:center; gap:12px; padding:11px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); } .prof-soc-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; color:#fff; flex-shrink:0; } .prof-soc-n b{ font-family:var(--font-display); font-weight:800; font-size:14.5px; display:block; color:var(--ink); } .prof-soc-n span{ font-size:12px; color:var(--ink-faint); } .prof-soc-stat{ margin-left:auto; text-align:right; } .prof-soc-stat .big{ font-family:var(--font-display); font-weight:800; font-size:16px; color:var(--ink); } .prof-soc-stat .unit{ font-size:10.5px; color:var(--ink-faint); font-weight:700; } .prof-rows{ display:flex; flex-direction:column; } .prof-r{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); } .prof-r:first-child{ border-top:none; } .prof-r .k{ font-size:13px; color:var(--ink-soft); } .prof-r .v{ font-family:var(--font-display); font-weight:800; font-size:13.5px; text-align:right; color:var(--ink); } .prof-r .v.yes{ color:var(--success); } .prof-r .v.no{ color:var(--ink-faint); } .prof-togs{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media(max-width:420px){ .prof-togs{ grid-template-columns:1fr; } } .prof-tog{ display:flex; align-items:center; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } .edit-togs .prof-tog{ cursor:pointer; } .prof-sw{ width:34px; height:20px; border-radius:999px; flex-shrink:0; position:relative; background:var(--royal); transition:background .15s; } .prof-sw::after{ content:""; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:.15s; } .prof-tog.off .prof-sw{ background:var(--line); } .prof-tog.off .prof-sw::after{ right:auto; left:2px; } .prof-tog b{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink); } .prof-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media(max-width:520px){ .prof-stats{ grid-template-columns:repeat(2,1fr); } } .prof-stile{ background:var(--surface-2); border:1px solid var(--line); border-radius:13px; padding:13px; text-align:center; } .prof-stile .big{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink-faint); } .prof-stile .lab{ font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; } .prof-lk{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); margin-bottom:10px; text-decoration:none; } .prof-lk:last-of-type{ margin-bottom:0; } .prof-lk .ic{ width:40px; height:40px; border-radius:11px; background:var(--royal-softest); display:grid; place-items:center; font-size:19px; flex-shrink:0; } .prof-lk b{ font-family:var(--font-display); font-weight:800; font-size:13.5px; display:block; color:var(--ink); } .prof-lk span{ font-size:12px; color:var(--royal); } .prof-lk.empty span{ color:var(--ink-faint); } .prof-lk .go{ margin-left:auto; color:var(--ink-faint); font-weight:800; } /* chips de seleção (perfil) */ .chip-on{ background:var(--royal); color:#fff; border-color:var(--royal); } .chip-off{ color:var(--ink-faint); background:transparent; border:1px dashed var(--line); } .chip-toggle{ cursor:pointer; } /* seções do modal de edição */ .edit-sec{ font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:18px 0 10px; padding-top:14px; border-top:1px solid var(--line); } .edit-sec:first-of-type{ border-top:none; padding-top:0; margin-top:4px; } .edit-chips{ margin-bottom:4px; }