/* ========== Tokens (dark default) ========== */ :root{ --maxw: 1100px; /* Core */ --bg:#0b1220; --text:#e7eefc; --panel:#101a2b; --panel-2:#0c1626; --border:#1f2c44; --muted:#aab4c8; --brand:#86b6ff; /* Acentos por papel */ --admin:#8b5cf6; --prof:#10b981; --mentor:#f59e0b; --aluno:#06b6d4; --usuario:#0ea5e9; } /* (Opcional) Tema claro – habilite envolvendo com .theme-light no se quiser .theme-light{ --bg:#fafafa; --text:#222; --panel:#ffffff; --panel-2:#ffffff; --border:#eaecef; --muted:#556; --brand:#2b6cff; } */ /* ========== Base ========== */ *{ box-sizing:border-box } html,body{ margin:0; padding:0 } body{ font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text) } /* ========== Layout ========== */ .container{ max-width:var(--maxw); margin:0 auto; padding:24px } .grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) } /* ========== Navbar ========== */ .navbar{ position:sticky; top:0; z-index:50; background:rgba(15,21,41,.7); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border); } .navbar .container{ padding-block:10px } .navbar .brand{ font-weight:700; letter-spacing:.2px } .navbar nav a{ color:var(--text); padding:8px 10px; border-radius:10px } .navbar nav a:hover{ background:#0f2138 } .navbar nav a.is-active{ background:#0f2138; box-shadow:inset 0 -2px 0 var(--brand); font-weight:600; } /* ========== Cards ========== */ .card{ position:relative; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease; } .card:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.2) } .card .desc{ color:var(--muted) } /* Acento superior */ .card--acc::before{ content:""; position:absolute; left:0; right:0; top:0; height:3px; border-radius:16px 16px 0 0; } .card--admin{ border-color:color-mix(in oklab, var(--admin) 25%, #fff) } .card--admin::before{ background:linear-gradient(90deg,var(--admin),#a78bfa) } .card--prof{ border-color:color-mix(in oklab, var(--prof) 25%, #fff) } .card--prof::before{ background:linear-gradient(90deg,var(--prof),#34d399) } .card--mentor{ border-color:color-mix(in oklab, var(--mentor) 25%, #fff) } .card--mentor::before{ background:linear-gradient(90deg,var(--mentor),#fcd34d) } .card--aluno{ border-color:color-mix(in oklab, var(--aluno) 25%, #fff) } .card--aluno::before{ background:linear-gradient(90deg,var(--aluno),#22d3ee) } .card--usuario{ border-color:color-mix(in oklab, var(--usuario) 25%, #fff) } .card--usuario::before{ background:linear-gradient(90deg,var(--usuario),#60a5fa) } .card--usuario { position: relative; background: radial-gradient(circle at top left, rgba(255, 179, 71, 0.35), transparent 55%), radial-gradient(circle at bottom right, rgba(123, 97, 255, 0.20), transparent 55%), #101322; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55); } /* Bloco de próximos passos (roteiro) */ .portal-next-steps { margin: 0.7rem 0 1rem; padding: 0.8rem 1rem; border-radius: 14px; background: #FFDEAD; border: 1px solid rgba(255, 179, 71, 0.65); font-size: 0.9rem; } .portal-next-steps strong { color: #ffd54f; } .portal-next-steps ul { margin: 0.35rem 0 0; padding-left: 1.2rem; } /* ========== KPIs ========== */ .kpis{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin:16px 0 } .kpi{ background:var(--panel-2); border:1px solid var(--border); border-radius:12px; padding:12px; display:flex; justify-content:space-between; align-items:center } .kpi .label{ color:var(--muted) } .kpi .num{ font-size:1.25rem; font-weight:700 } /* ========== Botões & Links ========== */ .btn{ display:inline-block; padding:8px 14px; border:1px solid var(--border); border-radius:12px; color:var(--text); text-decoration:none; } .btn:hover{ background:#0f2138; border-color:#2a3b5a } a{ color:var(--brand) } a:hover{ text-decoration:underline } a:focus, .btn:focus{ outline:2px solid var(--brand); outline-offset:2px } /* ========== Mensagens (Django messages) ========== */ .messages{ list-style:none; padding:0; margin:12px 0 20px } .messages li{ padding:10px 12px; border-radius:12px; margin-bottom:8px; background:var(--panel-2); border:1px solid var(--border); color:var(--text); } .messages li.success{ background:#0f2a1f; border-color:#1e5842 } .messages li.error { background:#2a0f15; border-color:#5a1e27 } .messages li.warning{ background:#2a2610; border-color:#5a5020 } .messages li.info { background:#101f33; border-color:#203a6a } /* ========== Breadcrumbs ========== */ .breadcrumbs{ font-size:.95rem; margin:8px 0 12px; color:var(--muted) } .breadcrumbs a{ color:var(--brand) } /* ========== Vocacional: caixa de termos ========== */ .vocacional-termos .box{ background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; margin:12px 0; } /* ========== Responsivo ========== */ @media (max-width:560px){ .navbar .container, .container{ padding-inline:12px } } .btn, .btn:visited{ color:var(--text); } .btn--ghost{ background:transparent; border:1px solid var(--border); } .btn--ghost:hover{ background:#0f2138; } /* ----- Botões base ----- */ :root{ --btn: #3b82f6; /* primário */ --btn-ok: #22c55e; /* sucesso */ --btn-ghost-bg: rgba(59,130,246,.12); --btn-ghost-bd: rgba(59,130,246,.35); } button, .btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; padding: .55rem 1rem; border-radius: 9999px; font-weight: 600; border: 1px solid transparent; background: var(--btn); color: #fff; box-shadow: none; outline: 0; transition: transform .12s ease, filter .2s, background-color .2s, color .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn:active { transform: translateY(0) scale(.98); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } /* Ghost (contorno) — para Anterior/Próxima */ .btn.ghost { background: var(--btn-ghost-bg); color: var(--btn); border-color: var(--btn-ghost-bd); } .btn.ghost:hover { background: var(--btn); color: #fff; } /* Sucesso — para Finalizar */ .btn.ok { background: var(--btn-ok); border-color: var(--btn-ok); } .btn.ok:hover { filter: brightness(1.08); } /* Garantias contra overlays estranhos */ .btn::before, .btn::after { content: none !important; } .btn::before, .btn::after { content: none !important; } .btn { border-radius: 999px; padding: .55rem 1rem; border: 1px solid transparent; } .btn.ok { background: var(--ok, #3ba55d); color: #fff; } .btn.ghost { background: transparent; border-color: var(--ok, #3ba55d); color: var(--ok, #3ba55d); } .btn:disabled { opacity: .55; cursor: not-allowed; } .note-ok{ margin:.6rem auto .4rem; padding:.6rem .8rem; border-radius:12px; background:rgba(34,197,94,.09); border:1px solid rgba(34,197,94,.25); display:flex; gap:.5rem; align-items:center; justify-content:center; } /* linha com 2 pílulas */ .sma-cta-row--double{ display:flex; justify-content:left; align-items:center; gap: 12px; flex-wrap: wrap; /* no mobile quebra bonito */ margin-top: 8px; margin-bottom: 6px; /* teste 6px–12px */ } /* 2) menos espaço do texto/nota abaixo dos botões */ .sma-cover-note{ margin-top: 6px; margin-bottom: 0; } .sma-cta-row--double .btn{ white-space: nowrap; } .guia-offer-wrap{ display:flex; justify-content:left; margin-top: 8px; } .guia-offer{ display:flex; justify-content:left; flex-direction:column; align-items:left; gap: 10px; text-decoration:none; } .guia-cover-lg{ width: 200px; /* ajuste aqui (ex.: 220px) */ max-width: 46vw; align-items:left; height:auto; border-radius: 14px; box-shadow: 0 14px 28px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease; } .guia-pill-link{ display:inline-flex; align-items:center; justify-content:center; padding: .55rem .95rem; border-radius: 999px; font-weight: 600; font-size: .9rem; background: #eaf3ff; color: #0d6efd; border: 1px solid rgba(13,110,253,.18); transition: transform .15s ease, box-shadow .15s ease; } .guia-offer:hover .guia-cover-lg, .guia-offer:hover .guia-pill-link{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,0,0,.20); } /* Card branco reutilizável */ .sma-card.sma-card--white{ background: #fff; border-radius: 28px; padding: 34px 40px; box-shadow: 0 22px 60px rgba(0,0,0,.20); color: #0c2238; /* texto escuro dentro do card */ } /* garante títulos/listas legíveis dentro do card */ .sma-card--white h2, .sma-card--white h3{ color: #0c2238; } .sma-card--white p, .sma-card--white li{ color: #25364a; } /* “ROLE PARA VER MAIS” dentro do card */ .sma-card--white .role-hint, .sma-card--white .role-label{ color: #5a6a7a; } @media (max-width: 768px){ .sma-card.sma-card--white{ padding: 22px 18px; border-radius: 22px; } } /* ========================================================= SONHE + ALTO · Landing (templates/core/sonhe_mais_alto_landing.html) ========================================================= */ .sma-cover-note { margin-top: 1rem; display: flex; align-items: center; gap: 0.9rem; font-size: 0.9rem; color: #64748b; /* antes estava claro demais */ } .sma-cover-img { width: 72px; height: auto; border-radius: 8px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.45); } .sma-page { padding: 2.5rem 0 3.5rem 0; } /* HERO – card branco principal ------------------------------------- */ .sma-hero-card { background: #ffffff; border-radius: 26px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15); padding: 2.5rem 3rem; display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center; max-width: 1080px; margin-left: auto; margin-right: auto; } .sma-hero-left { flex: 0 0 220px; text-align: center; } .sma-hero-left img { max-width: 180px; height: auto; display: block; margin: 0 auto 0.75rem auto; } .sma-hero-left p { margin: 0; font-size: 0.9rem; color: #64748b; } .sma-hero-right { flex: 1 1 280px; } .sma-kicker { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #0f766e; margin-bottom: 0.4rem; } .sma-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; color: #0f172a; } .sma-subtitle { font-size: 1rem; color: #475569; margin-bottom: 1rem; } .sma-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; } .sma-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: #e0f2fe; color: #0369a1; font-size: 0.85rem; font-weight: 500; } .sma-badge span { font-size: 1rem; } .sma-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; } .sma-cta-row .btn-primary { border-radius: 999px; padding: 0.65rem 1.8rem; font-weight: 600; } .sma-cta-row .btn-outline-primary { border-radius: 999px; padding: 0.6rem 1.4rem; font-weight: 500; } .sma-cta-note { font-size: 0.8rem; color: #64748b; } /* Hint de rolagem (setinha móvel) ----------------------------------- */ .sma-scroll-hint { margin: 1.4rem 0 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; font-size: 0.82rem; color: #64748b; /* antes #e5e7eb (sumia no branco) */ opacity: 0.95; } .sma-scroll-hint-text { letter-spacing: 0.08em; text-transform: uppercase; } .sma-scroll-arrow { font-size: 1.4rem; animation: sma-bounce 1.1s infinite alternate; } @keyframes sma-bounce { from { transform: translateY(0); opacity: 0.8; } to { transform: translateY(7px); opacity: 1; } } /* SEÇÃO CONTEÚDO + PREÇO ------------------------------------------- */ .sma-section { margin-top: 2.4rem; padding: 2rem 2.2rem; border-radius: 26px; background: #ffffff; /* agora branco */ box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15); display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; align-items: flex-start; /* padroniza largura e centraliza como o hero */ max-width: 1080px; margin-left: auto; margin-right: auto; } .sma-section h2 { font-size: 1.25rem; margin-bottom: 0.7rem; color: #0f172a; } .sma-section p { font-size: 0.95rem; color: #475569; } .sma-list { font-size: 0.95rem; color: #475569; padding-left: 1.2rem; } .sma-list li { margin-bottom: 0.25rem; } .sma-list li::marker { color: #0ea5e9; /* azul legal no branco */ } /* Card de preço (coluna da direita) -------------------------------- */ .sma-price-card { background: #f8fafc; color: #0f172a; border-radius: 20px; padding: 1.6rem 1.5rem; box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12); border: 1px solid rgba(15, 23, 42, 0.10); } .sma-price-tag { font-size: 0.85rem; text-transform: uppercase; letter-spacing: .14em; color: #0f766e; margin-bottom: 0.3rem; } .sma-price-total { font-size: 1.1rem; margin-bottom: 0.4rem; color: #334155; } .sma-price-total span { text-decoration: line-through; opacity: 0.7; } .sma-price-launch { font-size: 1.6rem; font-weight: 800; color: #b45309; margin-bottom: 0.2rem; } .sma-price-small { font-size: 0.82rem; color: #475569; } .sma-price-items { margin-top: 1.1rem; font-size: 0.9rem; } .sma-price-items li { margin-bottom: 0.3rem; } /* FAQ --------------------------------------------------------------- */ .sma-faq { margin-top: 2.4rem; padding: 2rem 2.2rem 2.3rem; border-radius: 26px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15); max-width: 1080px; margin-left: auto; margin-right: auto; } .sma-faq h2 { font-size: 1.2rem; margin-bottom: 0.6rem; color: #0f172a; } .sma-faq dt { font-weight: 600; margin-top: 0.7rem; color: #0f172a; } .sma-faq dd { margin-left: 0; font-size: 0.95rem; color: #475569; } /* Responsivo -------------------------------------------------------- */ @media (max-width: 900px) { .sma-hero-card { padding: 1.8rem 1.4rem; } .sma-section { grid-template-columns: 1fr; padding: 1.6rem 1.4rem; } .sma-price-card { margin-top: 0.6rem; } .sma-faq { padding: 1.6rem 1.4rem 1.9rem; } } /* ===================================================================== AJUSTES – Tema Sonhe + Alto (theme-sma) + Auth + Portal (adicione ao FINAL do site.css) ===================================================================== */ /* 1) Tema claro com contraste melhor */ body.theme-sma{ --bg: #f6f3ea; --panel: #ffffff; --panel-2: #ffffff; --text: #0f172a; --muted: #334155; --border: rgba(15, 23, 42, 0.14); --brand: #0d6efd; --brand2: #d49e25; } /* 2) Header Sonhe + Alto (branco) */ .sma-topbar{ background: #ffffff; border-bottom: 1px solid var(--border); } .sma-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap: 1rem; padding: 1.1rem 0; } .sma-topbar--xl .sma-topbar-inner{ padding: 1.4rem 0; } .sma-brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color: var(--text); } .sma-logo{ height: 44px; width:auto; display:block; } .sma-topbar--xl .sma-logo{ height: 64px; /* logo maior (o que você pediu) */ } .sma-brand-text strong{ font-size: 1.05rem; line-height: 1.1; } .sma-muted{ color: var(--muted); font-size: .92rem; } /* Pills do header */ .sma-actions{ display:flex; gap:.6rem; flex-wrap:wrap; } .sma-pill{ display:inline-flex; align-items:center; justify-content:center; gap:.35rem; padding:.55rem .95rem; border-radius: 999px; border: 1px solid rgba(13,110,253,.35); color: #0b4fb3; text-decoration:none; background: #ffffff; font-weight: 600; font-size: .92rem; } .sma-pill:hover{ background: rgba(13,110,253,.06); } /* 3) Auth layout (criar conta / login) – “card branco” */ .sma-auth{ background: var(--bg); } .sma-auth-wrap{ max-width: 980px; margin: 0 auto; padding: 1.5rem 0 2.6rem; } .sma-auth .sma-card{ background:#fff; border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10); } /* 4) Rodapé alinhado (sem “sair da área”) */ .site-footer{ margin-top: 2.4rem; padding: 1.15rem 0; color: var(--muted); font-size: .92rem; } .site-footer a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; } body.theme-sma .site-footer{ background: transparent; } /* 5) Portal – quando só houver 1 card, ele ocupa a largura (sem “duas colunas vazias”) */ .portal-wrap .grid > .card:only-child{ grid-column: 1 / -1; /* ocupa todas as colunas do grid */ max-width: 1040px; /* deixa mais largo */ justify-self: center; /* centraliza */ width: 100%; } /* ===== Base layout para rodapé não “sair da área” ===== */ .site-shell{ min-height:100vh; display:flex; flex-direction:column; } .site-main{ flex:1; } /* ===== Tema Sonhe + Alto (contraste melhor) ===== */ body.theme-sma{ background: #f6f3ea; color: #0f172a; } body.theme-sma a{ color:#0b4fb3; } body.theme-sma a:hover{ color:#083d88; } body.theme-sma .navbar, body.theme-sma header.card{ display:none; } /* esconde o cabeçalho azul nas páginas theme-sma */ /* Header Sonhe + Alto */ .sma-topbar{ background:#fff; border-bottom:1px solid rgba(15,23,42,.14); } .sma-topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 0; } .sma-topbar--xl .sma-topbar-inner{ padding:1.5rem 0; } .sma-brand{ display:flex; align-items:center; gap:.9rem; text-decoration:none; color:#0f172a; } .sma-logo{ height:52px; width:auto; display:block; } .sma-topbar--xl .sma-logo{ height:76px; } /* logo maior */ .sma-brand-text strong{ font-size:1.08rem; line-height:1.1; } .sma-muted{ color:#334155; font-size:.92rem; } .sma-actions{ display:flex; gap:.6rem; flex-wrap:wrap; } .sma-pill{ display:inline-flex; align-items:center; justify-content:center; padding:.58rem .98rem; border-radius:999px; border:1px solid rgba(13,110,253,.35); background:#fff; color:#0b4fb3; font-weight:600; text-decoration:none; } .sma-pill:hover{ background:rgba(13,110,253,.06); } /* Auth card */ .sma-auth-wrap{ max-width: 980px; margin: 0 auto; padding: 1.6rem 0 2.8rem; } .sma-card{ background:#fff; border:1px solid rgba(15,23,42,.14); border-radius:20px; box-shadow:0 18px 40px rgba(15,23,42,.10); padding: 1.6rem 1.6rem 1.4rem; } .sma-title{ color:#0f172a; font-size:1.55rem; margin:0 0 .35rem; } .sma-sub{ color:#334155; margin:0 0 1.1rem; } .sma-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; } .sma-field label{ display:block; font-weight:700; color:#0f172a; margin-bottom:.35rem; } .sma-field input{ width:100%; padding:.7rem .8rem; border-radius:12px; border:1px solid rgba(15,23,42,.18); background:#fff; color:#0f172a; } .sma-field input:focus{ outline:none; border-color: rgba(13,110,253,.55); box-shadow: 0 0 0 3px rgba(13,110,253,.12); } .sma-field.span2{ grid-column: 1 / -1; } .sma-help{ color:#475569; font-size:.92rem; } .sma-inline-check{ display:flex; gap:.5rem; align-items:center; margin-top:.7rem; } .sma-bottom{ margin-top:1rem; display:flex; flex-direction:column; gap:.65rem; } .sma-btn{ border-radius: 999px; padding: .72rem 1.2rem; font-weight:800; border:1px solid transparent; cursor:pointer; } .sma-btn-primary{ background:#0d6efd; color:#fff; } .sma-btn-primary:hover{ filter:brightness(.97); } .sma-link{ font-weight:700; text-decoration:underline; text-underline-offset:3px; } /* Portal: se só tiver 1 card, ocupa toda a largura do grid */ .portal-wrap .grid > .card:only-child{ grid-column: 1 / -1; max-width: 1040px; justify-self: center; width: 100%; } /* Responsivo */ @media (max-width: 860px){ .sma-form-grid{ grid-template-columns: 1fr; } .sma-topbar-inner{ align-items:flex-start; flex-direction:column; } }