/* ===================================================================== AulAI · sistema de design --------------------------------------------------------------------- Direção: base quase monocromática em neutros de tinta, um único acento forte (violeta) para ação, e um segundo (coral) reservado a energia e progresso. O contraste entre acento e neutro é a ferramenta — não a quantidade de cor. Tipografia: Bricolage Grotesque nos títulos (peso e personalidade), Public Sans no texto corrido (legibilidade em aula longa), JetBrains Mono em dado, etiqueta e número. TEMAS. O visitante tem três estados: "sistema" (padrão) — sem atributo no , vale prefers-color-scheme "claro" — "escuro" — A paleta escura mora uma única vez nas variáveis --d-*; os dois seletores que ativam o tema escuro só apontam para elas. ===================================================================== */ :root{ /* ---------- neutros de tinta (base quase monocromática) ---------- */ --ground:#FBFAFC; --surface:#FFFFFF; --surface-2:#F4F3F7; --surface-3:#EBE9F1; --ink:#16141C; --muted:#5E5870; --line:#E6E3ED; /* Contorna campo e botão: precisa de 3:1 contra o fundo (WCAG 1.4.11). */ --borda:#928CA3; /* ---------- acento de ação ---------- */ --acao:#5B3DF5; --acao-forte:#4426E0; --acao-suave:#EDE9FE; /* Fio decorativo em volta do fundo suave de ação. Não é contorno de controle: 1.4.11 não se aplica, e quem marca o limite da caixa é a régua de acento cheio na lateral, não este fio. */ --acao-borda:#C4B5FD; --sobre-acao:#FFFFFF; /* ---------- acento de energia, usado com parcimônia ---------- */ --sinal:#BD3E1D; --sinal-suave:#FCEAE4; /* ---------- semânticos ---------- */ --ok:#0B7A53; --ok-suave:#E1F4EC; --perigo:#BE2A22; --perigo-suave:#FCEAE9; /* ---------- painéis escuros que valem nos dois temas ---------- */ --tinta:#16141C; --tinta-2:#211D2E; --sobre-tinta:#F7F5FC; --sobre-tinta-suave:#A9A2C0; --tinta-borda:rgba(247,245,252,.14); --sombra-1:0 1px 2px rgba(22,20,28,.04), 0 1px 3px rgba(22,20,28,.06); --sombra-2:0 2px 4px rgba(22,20,28,.04), 0 8px 20px -8px rgba(22,20,28,.12); --sombra-3:0 4px 8px rgba(22,20,28,.05), 0 20px 40px -16px rgba(22,20,28,.20); --anel:0 0 0 3px var(--acao-suave); /* ---------- paleta escura, declarada uma única vez ---------- */ --d-ground:#0E0D14; --d-surface:#16141E; --d-surface-2:#1F1C2B; --d-surface-3:#2A2639; --d-ink:#EDEAF4; --d-muted:#A29BB5; --d-line:#282436; --d-borda:#6C6680; --d-acao:#A594FF; --d-acao-forte:#BCAEFF; --d-acao-suave:#241E3A; --d-acao-borda:#3E3468; --d-sobre-acao:#130F22; --d-sinal:#FF9070; --d-sinal-suave:#2E1A15; --d-ok:#4FD6A0; --d-ok-suave:#0F2820; --d-perigo:#FF8A80; --d-perigo-suave:#2B1413; --d-sombra-1:0 1px 2px rgba(0,0,0,.4); --d-sombra-2:0 2px 4px rgba(0,0,0,.4), 0 8px 20px -8px rgba(0,0,0,.6); --d-sombra-3:0 4px 8px rgba(0,0,0,.4), 0 20px 40px -16px rgba(0,0,0,.8); --d-anel:0 0 0 3px rgba(165,148,255,.28); color-scheme:light; /* ---------- forma ---------- */ --r-1:8px; --r-2:12px; --r-3:18px; --r-4:26px; --pilula:999px; /* ---------- escala de espaço ---------- */ --e-1:.25rem; --e-2:.5rem; --e-3:.75rem; --e-4:1rem; --e-5:1.5rem; --e-6:2rem; --e-7:3rem; --e-8:4rem; --e-9:6rem; /* ---------- escala tipográfica ---------- */ --t--2:.75rem; --t--1:.8125rem; --t-0:1rem; --t-1:1.125rem; --t-2:1.375rem; --t-3:1.75rem; --t-4:2.25rem; --t-5:3rem; --t-6:4rem; --display:"Bricolage Grotesque","Public Sans",system-ui,sans-serif; --sans:"Public Sans",-apple-system,"Segoe UI",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3); --ink:var(--d-ink); --muted:var(--d-muted); --line:var(--d-line); --borda:var(--d-borda); --acao:var(--d-acao); --acao-forte:var(--d-acao-forte); --acao-suave:var(--d-acao-suave); --acao-borda:var(--d-acao-borda); --sobre-acao:var(--d-sobre-acao); --sinal:var(--d-sinal); --sinal-suave:var(--d-sinal-suave); --ok:var(--d-ok); --ok-suave:var(--d-ok-suave); --perigo:var(--d-perigo); --perigo-suave:var(--d-perigo-suave); --sombra-1:var(--d-sombra-1); --sombra-2:var(--d-sombra-2); --sombra-3:var(--d-sombra-3); --anel:var(--d-anel); color-scheme:dark; } } :root[data-theme="dark"]{ --ground:var(--d-ground); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3); --ink:var(--d-ink); --muted:var(--d-muted); --line:var(--d-line); --borda:var(--d-borda); --acao:var(--d-acao); --acao-forte:var(--d-acao-forte); --acao-suave:var(--d-acao-suave); --acao-borda:var(--d-acao-borda); --sobre-acao:var(--d-sobre-acao); --sinal:var(--d-sinal); --sinal-suave:var(--d-sinal-suave); --ok:var(--d-ok); --ok-suave:var(--d-ok-suave); --perigo:var(--d-perigo); --perigo-suave:var(--d-perigo-suave); --sombra-1:var(--d-sombra-1); --sombra-2:var(--d-sombra-2); --sombra-3:var(--d-sombra-3); --anel:var(--d-anel); color-scheme:dark; } :root[data-theme="light"]{color-scheme:light;} /* ============================================================== base === */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:var(--t-0); line-height:1.6; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; display:flex; flex-direction:column; } h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.08; letter-spacing:-.03em; margin:0; text-wrap:balance; } h1{font-size:clamp(1.9rem,1.2rem + 3vw,var(--t-5));} h2{font-size:clamp(1.5rem,1rem + 2.2vw,var(--t-4));letter-spacing:-.028em;} h3{font-size:var(--t-2);letter-spacing:-.022em;} h4{font-size:var(--t-1);letter-spacing:-.018em;} p{margin:0 0 var(--e-4);} p:last-child{margin-bottom:0;} a{color:var(--acao);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .15s;} a:hover{color:var(--acao-forte);} img{max-width:100%;height:auto;display:block;} hr{border:0;border-top:1px solid var(--line);margin:var(--e-6) 0;} small{font-size:var(--t--1);} strong{font-weight:600;} :focus-visible{outline:2px solid var(--acao);outline-offset:2px;border-radius:var(--r-1);} code{ font-family:var(--mono);font-size:.875em; background:var(--surface-2);border:1px solid var(--line); border-radius:6px;padding:.1em .38em; } .pular{ position:absolute;left:-9999px;top:var(--e-2);z-index:200; background:var(--acao);color:var(--sobre-acao); padding:.7rem 1.1rem;border-radius:var(--r-1);font-weight:600; text-decoration:none; } .pular:focus{left:var(--e-2);} /* rótulo em versalete monoespaçado — usado como "olho" de seção */ .rotulo-secao{ font-family:var(--mono);font-size:var(--t--1);font-weight:500; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); margin:0 0 var(--e-3);display:block; } /* ========================================================= cabeçalho === */ .cabecalho{ position:sticky;top:0;z-index:60; background:var(--ground); background:color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); } @supports not (backdrop-filter: blur(1px)){ .cabecalho{background:var(--ground);} } .cabecalho-int{ max-width:78rem;margin:0 auto;padding:.7rem var(--e-5); display:flex;align-items:center;gap:var(--e-5);flex-wrap:wrap; } .marca,.portao-marca{ display:inline-flex;align-items:center;gap:.6rem; text-decoration:none;color:var(--ink); } .marca:hover,.portao-marca:hover{color:var(--ink);} .marca-sigla{ display:grid;place-items:center;flex:none; width:2.15rem;height:2.15rem;border-radius:10px; background:var(--acao);color:var(--sobre-acao); overflow:hidden; } .marca-sigla svg{width:100%;height:100%;display:block;} .marca-nome{ font-family:var(--display);font-size:1.3rem;font-weight:800; letter-spacing:-.035em; } .nav{display:flex;gap:.15rem;margin-right:auto;flex-wrap:wrap;} .nav a{ color:var(--muted);text-decoration:none;font-size:.9375rem;font-weight:500; padding:.45rem .75rem;border-radius:var(--pilula);transition:all .15s; } .nav a:hover{color:var(--ink);background:var(--surface-2);} .nav a[aria-current="page"]{color:var(--acao);background:var(--acao-suave);font-weight:600;} .conta{display:flex;align-items:center;gap:.4rem;} .avatar{width:1.9rem;height:1.9rem;border-radius:var(--pilula);object-fit:cover;background:var(--surface-2);} .avatar-letra{ display:grid;place-items:center;background:var(--acao-suave);color:var(--acao); font-weight:700;font-size:.8rem; } .menu-conta{position:relative;} .menu-conta summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:.45rem; padding:.3rem .5rem .3rem .3rem;border-radius:var(--pilula);color:var(--ink); transition:background-color .15s; } .menu-conta summary::-webkit-details-marker{display:none;} .menu-conta summary:hover{background:var(--surface-2);} .conta-nome{font-size:.9rem;font-weight:500;} .menu-conta .seta{color:var(--muted);transition:transform .2s;} .menu-conta[open] .seta{transform:rotate(180deg);} .menu-pop{ position:absolute;right:0;top:calc(100% + .5rem);min-width:15rem;z-index:70; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2); box-shadow:var(--sombra-3);padding:.35rem; display:flex;flex-direction:column;gap:.1rem; } .menu-email{ font-size:var(--t--1);color:var(--muted);margin:0;padding:.55rem .65rem; border-bottom:1px solid var(--line);margin-bottom:.3rem;overflow-wrap:anywhere; } .menu-pop a,.menu-sair{ display:block;width:100%;text-align:left;padding:.55rem .65rem;border-radius:var(--r-1); color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500; background:none;border:0;font-family:inherit;cursor:pointer;transition:background-color .15s; } .menu-pop a:hover,.menu-sair:hover{background:var(--surface-2);} .menu-sair{color:var(--perigo);} /* seletor de tema */ .tema-btn{ display:grid;place-items:center;flex:none; width:2.1rem;height:2.1rem;padding:0; background:transparent;border:0;border-radius:var(--pilula); color:var(--muted);cursor:pointer;transition:all .15s; } .tema-btn[hidden]{display:none;} .tema-btn:hover{background:var(--surface-2);color:var(--ink);} .tema-btn svg{display:none;} .tema-btn[data-tema="sistema"] .i-sistema, .tema-btn[data-tema="claro"] .i-claro, .tema-btn[data-tema="escuro"] .i-escuro{display:block;} @media (max-width:44rem){ .conta-nome{display:none;} .cabecalho-int{gap:.6rem;padding:.6rem var(--e-4);} .nav{order:3;width:100%;margin-right:0;padding-top:.4rem; border-top:1px solid var(--line);overflow-x:auto;flex-wrap:nowrap;} .nav a{white-space:nowrap;} .conta{margin-left:auto;} } /* ============================================================ avisos === */ .avisos{max-width:78rem;margin:var(--e-4) auto 0;padding:0 var(--e-5); display:flex;flex-direction:column;gap:.5rem;} .aviso{ padding:.85rem 1.1rem;border-radius:var(--r-2);font-size:.9375rem;font-weight:500; border:1px solid transparent;background:var(--surface-2);color:var(--ink); } .aviso-ok{background:var(--ok-suave);color:var(--ok);} .aviso-erro{background:var(--perigo-suave);color:var(--perigo);} .aviso-info{background:var(--sinal-suave);color:var(--sinal);} .aviso a{color:inherit;font-weight:600;} /* ========================================================== conteúdo === */ .conteudo{flex:1;width:100%;margin:0 auto;padding:var(--e-7) var(--e-5) var(--e-9);} .larg-normal{max-width:78rem;} .larg-estreita{max-width:48rem;} /* Coluna de leitura: larga o bastante para um cabeçalho com capa ao lado, estreita o bastante para a lista de aulas não virar uma linha de 1200px com quatro palavras dentro. */ .larg-leitura{max-width:58rem;} .larg-larga{max-width:88rem;} .larg-cheia{max-width:none;padding:0;} .cabeca-pagina{margin-bottom:var(--e-6);} .cabeca-pagina .sobre{ font-family:var(--mono);font-size:var(--t--1);font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--acao);margin:0 0 .5rem; } .cabeca-pagina h1{margin-bottom:.5rem;} .cabeca-pagina p.desc,.cabeca-pagina .desc{ color:var(--muted);max-width:62ch;font-size:var(--t-1);line-height:1.6; } .vazio{ border:1px dashed var(--borda);border-radius:var(--r-3); padding:var(--e-7) var(--e-5);text-align:center;color:var(--muted); background:var(--surface); } .vazio h3{color:var(--ink);margin-bottom:.5rem;} /* ============================================================ botões === */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1.2; letter-spacing:-.01em; padding:.7rem 1.25rem;border-radius:var(--pilula);border:1px solid transparent; cursor:pointer;text-decoration:none;white-space:nowrap; transition:background-color .18s, border-color .18s, color .18s, transform .12s, box-shadow .18s; } .btn:active{transform:translateY(1px);} .btn-primario{background:var(--acao);color:var(--sobre-acao);box-shadow:var(--sombra-1);} .btn-primario:hover{background:var(--acao-forte);color:var(--sobre-acao);box-shadow:var(--sombra-2);} .btn-secundario{background:var(--surface);color:var(--ink);border-color:var(--borda);} .btn-secundario:hover{background:var(--surface-2);color:var(--ink);border-color:var(--ink);} .btn-fantasma{background:transparent;color:var(--muted);} .btn-fantasma:hover{background:var(--surface-2);color:var(--ink);} .btn-perigo{background:transparent;color:var(--perigo);border-color:var(--borda);} .btn-perigo:hover{background:var(--perigo-suave);color:var(--perigo);border-color:var(--perigo);} .btn-p{padding:.42rem .85rem;font-size:.85rem;} .btn-g{padding:.95rem 1.75rem;font-size:var(--t-1);} .btn-bloco{width:100%;} .btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;} .btn-google{background:var(--surface);color:var(--ink);border-color:var(--borda);} .btn-google:hover{background:var(--surface-2);color:var(--ink);} .btn-google svg{flex:none;} .acoes{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;} /* ======================================================= formulários === */ .campo{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--e-4);} .campo label,.rotulo{font-size:.875rem;font-weight:600;color:var(--ink);letter-spacing:-.01em;} .campo .dica{font-size:var(--t--1);color:var(--muted);line-height:1.5;} input[type=text],input[type=email],input[type=password],input[type=url], input[type=number],input[type=search],select,textarea{ font-family:inherit;font-size:var(--t-0);color:var(--ink); background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-1); padding:.7rem .85rem;width:100%; transition:border-color .15s, box-shadow .15s; } textarea{min-height:8rem;resize:vertical;line-height:1.6;} input:hover,select:hover,textarea:hover{border-color:var(--ink);} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--acao);box-shadow:var(--anel); } input::placeholder,textarea::placeholder{color:var(--muted);opacity:.65;} input[type=file]{ font-size:.875rem;padding:.55rem .6rem;background:var(--surface-2); border:1px dashed var(--borda);cursor:pointer; } select{ cursor:pointer;appearance:none;padding-right:2.4rem; background-image: linear-gradient(45deg,transparent 50%,currentColor 50%), linear-gradient(135deg,currentColor 50%,transparent 50%); background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat; } .campo-erro input,.campo-erro select,.campo-erro textarea{border-color:var(--perigo);} .erro-texto{font-size:var(--t--1);color:var(--perigo);font-weight:500;} .caixa-marcar{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem; line-height:1.55;font-weight:400 !important;} .caixa-marcar input{width:auto;margin-top:.22rem;flex:none;accent-color:var(--acao); width:1.05rem;height:1.05rem;} .linha-campos{display:grid;gap:var(--e-4);grid-template-columns:1fr;} @media(min-width:36rem){.linha-campos.duas{grid-template-columns:1fr 1fr;}} fieldset{ border:1px solid var(--line);border-radius:var(--r-3); padding:var(--e-5);margin:0 0 var(--e-5);background:var(--surface); } legend{ font-family:var(--mono);font-size:var(--t--1);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);padding:0 .5rem; } /* =========================================================== cartões === */ .cartao{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3); padding:var(--e-5);box-shadow:var(--sombra-1); } .grade{display:grid;gap:var(--e-5);grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));} /* ---- cartão de trilha ---- */ .trilha-cartao{ display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden; box-shadow:var(--sombra-1);text-decoration:none;color:inherit; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .trilha-cartao:hover{ transform:translateY(-3px);box-shadow:var(--sombra-3); border-color:var(--acao);color:inherit; } @media (prefers-reduced-motion: reduce){ .trilha-cartao:hover{transform:none;} } .trilha-capa{aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--surface-2);} .trilha-capa img{width:100%;height:100%;object-fit:cover;} .trilha-capa svg{width:100%;height:100%;display:block;} .trilha-corpo{padding:1.15rem 1.35rem 1.4rem;display:flex;flex-direction:column; gap:.55rem;flex:1;} .trilha-corpo h3{font-size:var(--t-1);line-height:1.2;} .trilha-resumo{color:var(--muted);font-size:.9375rem;margin:0;flex:1;line-height:1.55;} .trilha-meta{ display:flex;gap:.5rem;flex-wrap:wrap;align-items:center; font-family:var(--mono);font-size:var(--t--2);color:var(--muted); font-variant-numeric:tabular-nums; } .trilha-meta span{display:inline-flex;align-items:center;gap:.3rem;} .trilha-meta .ponto{width:3px;height:3px;border-radius:50%;background:var(--borda);} /* O rodapé do cartão encosta na base: com resumos de tamanhos diferentes, sem isto a contagem de aulas flutua em altura de um cartão para o outro e a fileira perde a linha de base. */ .trilha-rodape{margin-top:auto;display:flex;flex-direction:column;gap:.6rem; padding-top:.35rem;} /* ========================================================= progresso === */ .progresso{display:flex;flex-direction:column;gap:.4rem;} .progresso-barra{ height:7px;background:var(--surface-3);border-radius:var(--pilula);overflow:hidden; } .progresso-preenchida{ height:100%;background:var(--acao);border-radius:var(--pilula); transition:width .4s cubic-bezier(.4,0,.2,1); } .progresso-texto{ font-family:var(--mono);font-size:var(--t--2);color:var(--muted); font-variant-numeric:tabular-nums;display:flex;justify-content:space-between;gap:.5rem; } .progresso-completa .progresso-preenchida{background:var(--ok);} /* ---- anel de progresso, para o painel ---- */ .anel{display:grid;place-items:center;position:relative;width:5rem;height:5rem;flex:none;} .anel svg{transform:rotate(-90deg);width:100%;height:100%;} .anel .trilho{stroke:var(--surface-3);} .anel .valor{stroke:var(--acao);stroke-linecap:round;transition:stroke-dashoffset .5s ease;} .anel .num{ position:absolute;font-family:var(--mono);font-size:.9rem;font-weight:500; font-variant-numeric:tabular-nums;color:var(--ink); } /* ==================================================== lista de aulas === */ .modulo{margin-bottom:var(--e-6);} .modulo-cabeca{ display:flex;align-items:center;gap:.8rem;margin-bottom:.85rem; } .modulo-num{ font-family:var(--mono);font-size:var(--t--2);font-weight:500; color:var(--acao);background:var(--acao-suave); padding:.25rem .5rem;border-radius:6px;letter-spacing:.04em; } .modulo-cabeca h3{font-size:var(--t-1);flex:1;} .modulo-conta{font-family:var(--mono);font-size:var(--t--2);color:var(--muted);} .lista-aulas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;} .aula-item{ display:flex;align-items:center;gap:.9rem; padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-2); background:var(--surface);text-decoration:none;color:inherit; transition:border-color .15s, background-color .15s, transform .15s; } .aula-item:hover{border-color:var(--acao);background:var(--surface);color:inherit;transform:translateX(3px);} @media (prefers-reduced-motion: reduce){ .aula-item:hover{transform:none;} } .aula-marca{ flex:none;width:1.6rem;height:1.6rem;border-radius:var(--pilula); border:1.5px solid var(--borda);display:grid;place-items:center;color:transparent; transition:all .2s; } .aula-feita .aula-marca{background:var(--ok);border-color:var(--ok);color:#FFF;} .aula-feita .aula-titulo{color:var(--muted);} .aula-atual{border-color:var(--acao);background:var(--acao-suave);} .aula-atual .aula-marca{border-color:var(--acao);border-style:dashed;} .aula-titulo{flex:1;font-size:.9375rem;font-weight:500;letter-spacing:-.01em;} .aula-dados{ font-family:var(--mono);font-size:var(--t--2);color:var(--muted); display:flex;gap:.5rem;align-items:center;font-variant-numeric:tabular-nums; } .aula-item[aria-disabled="true"]{opacity:.5;pointer-events:none;} /* ========================================================= etiquetas === */ .etiqueta{ font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.05em; text-transform:uppercase;padding:.2rem .45rem;border-radius:5px; background:var(--surface-2);color:var(--muted);white-space:nowrap; display:inline-flex;align-items:center;gap:.25rem; } .etiqueta-video{background:var(--acao-suave);color:var(--acao);} .etiqueta-passo{background:var(--sinal-suave);color:var(--sinal);} .etiqueta-rascunho{background:var(--perigo-suave);color:var(--perigo);} .etiqueta-ok{background:var(--ok-suave);color:var(--ok);} /* =================================================== página inicial === */ .hero{ position:relative;overflow:hidden; background:var(--tinta);color:var(--sobre-tinta); padding:var(--e-9) var(--e-5) var(--e-8); } /* Malha de luz atrás do conteúdo — dá profundidade sem virar gradiente batido. */ .hero::before{ content:"";position:absolute;inset:-20% -10% auto -10%;height:140%; background: radial-gradient(38rem 26rem at 78% 12%, rgba(91,61,245,.45), transparent 62%), radial-gradient(30rem 22rem at 12% 88%, rgba(189,62,29,.28), transparent 62%); pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background-image: linear-gradient(rgba(247,245,252,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(247,245,252,.045) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%); -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 100%); } .hero-int{ max-width:78rem;margin:0 auto;position:relative;z-index:1; display:grid;grid-template-columns:1fr;gap:var(--e-7);align-items:center; } @media(min-width:64rem){ .hero-int{grid-template-columns:1.1fr .9fr;gap:var(--e-8);} } .hero-selo{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--mono);font-size:var(--t--2);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--sobre-tinta); background:rgba(247,245,252,.09);border:1px solid var(--tinta-borda); padding:.4rem .8rem;border-radius:var(--pilula);margin-bottom:var(--e-5); } .hero-selo .pisca{ width:6px;height:6px;border-radius:50%;background:#7CE7B0;flex:none; box-shadow:0 0 0 3px rgba(124,231,176,.22); } .hero h1{ font-size:clamp(2.4rem,1.4rem + 4.2vw,var(--t-6)); color:var(--sobre-tinta);max-width:16ch;margin:0 0 var(--e-4); letter-spacing:-.04em;line-height:1.02;font-weight:800; } .hero h1 .grifo{ color:transparent;background:linear-gradient(100deg,#C5B6FF 10%,#FFB59B 90%); -webkit-background-clip:text;background-clip:text; } .hero-lead{ font-size:clamp(1.05rem,.95rem + .6vw,var(--t-2));line-height:1.55; color:var(--sobre-tinta-suave);max-width:48ch;margin:0 0 var(--e-6); } .hero .acoes{margin-bottom:var(--e-6);} .hero .btn-primario{background:var(--sobre-tinta);color:var(--tinta);} .hero .btn-primario:hover{background:#FFF;color:var(--tinta);} .hero .btn-secundario{background:transparent;color:var(--sobre-tinta);border-color:var(--tinta-borda);} .hero .btn-secundario:hover{background:rgba(247,245,252,.09);color:var(--sobre-tinta);border-color:rgba(247,245,252,.3);} .hero-numeros{ display:flex;flex-wrap:wrap;gap:var(--e-6); padding-top:var(--e-5);border-top:1px solid var(--tinta-borda); } .hero-numeros div{display:flex;flex-direction:column;gap:.2rem;} .hero-numeros .n{ font-family:var(--display);font-size:var(--t-3);font-weight:800;line-height:1; color:var(--sobre-tinta);font-variant-numeric:tabular-nums;letter-spacing:-.03em; } .hero-numeros .r{ font-family:var(--mono);font-size:var(--t--2);letter-spacing:.06em; text-transform:uppercase;color:var(--sobre-tinta-suave); } .hero-arte{display:none;} @media(min-width:64rem){ .hero-arte{display:block;} } .hero-arte svg{width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.35));} /* retomada */ .hero-retomar{ background:rgba(247,245,252,.07);border:1px solid var(--tinta-borda); border-radius:var(--r-3);padding:1.35rem 1.5rem;max-width:34rem;margin-bottom:var(--e-6); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .hero-retomar .rot{ font-family:var(--mono);font-size:var(--t--2);letter-spacing:.1em;text-transform:uppercase; color:#FFB59B;display:block;margin-bottom:.5rem; } .hero-retomar .tit{ font-family:var(--display);font-size:var(--t-2);font-weight:700;letter-spacing:-.025em; color:var(--sobre-tinta);margin:0 0 1rem;line-height:1.2; } .hero-retomar .barra{height:6px;background:rgba(247,245,252,.16);border-radius:var(--pilula); overflow:hidden;margin-bottom:.45rem;} .hero-retomar .barra span{display:block;height:100%;background:#C5B6FF;border-radius:var(--pilula);} .hero-retomar .conta{ font-family:var(--mono);font-size:var(--t--2);color:var(--sobre-tinta-suave); display:flex;justify-content:space-between;margin-bottom:1.1rem; } .hero-retomar .btn-primario{background:var(--sobre-tinta);color:var(--tinta);} /* ---- seções ---- */ .secao{padding-block:var(--e-9);} .secao-alt{background:var(--surface);border-block:1px solid var(--line);} .secao-int{max-width:78rem;margin:0 auto;padding-inline:var(--e-5);} .secao-cabeca{max-width:50rem;margin-bottom:var(--e-7);} .secao-cabeca .eyebrow{ font-family:var(--mono);font-size:var(--t--1);font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--acao);margin:0 0 .6rem; } .secao-cabeca h2{margin-bottom:.85rem;max-width:22ch;} .secao-cabeca p{color:var(--muted);font-size:var(--t-1);line-height:1.65;margin:0;max-width:60ch;} /* método em três passos */ .metodo{list-style:none;counter-reset:m;padding:0;margin:0;display:grid;gap:var(--e-6); grid-template-columns:1fr;} @media(min-width:52rem){.metodo{grid-template-columns:repeat(3,1fr);gap:var(--e-6);}} .metodo li{counter-increment:m;position:relative;padding-top:var(--e-5); border-top:2px solid var(--line);transition:border-color .2s;} .metodo li:hover{border-color:var(--acao);} .metodo li::before{ content:counter(m,decimal-leading-zero); display:block;font-family:var(--mono);font-size:var(--t--1);font-weight:500; color:var(--acao);margin-bottom:.9rem;letter-spacing:.06em; } .metodo .icone{ width:2.6rem;height:2.6rem;border-radius:var(--r-2);display:grid;place-items:center; background:var(--acao-suave);color:var(--acao);margin-bottom:1rem; } .metodo h3{font-size:var(--t-2);margin-bottom:.5rem;} .metodo p{color:var(--muted);font-size:.9875rem;margin:0;line-height:1.65;} /* ganhos */ .ganhos{list-style:none;padding:0;margin:0;display:grid;gap:1.1rem var(--e-6); grid-template-columns:1fr;} @media(min-width:48rem){.ganhos{grid-template-columns:1fr 1fr;}} .ganhos li{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;align-items:start; font-size:1.03rem;line-height:1.55;} .ganhos li .tique{ width:1.4rem;height:1.4rem;border-radius:var(--pilula);background:var(--ok-suave); color:var(--ok);display:grid;place-items:center;margin-top:.1em;flex:none; } /* perguntas */ .faq{max-width:52rem;display:flex;flex-direction:column;} .faq details{border-bottom:1px solid var(--line);} .faq summary{ cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative; font-family:var(--display);font-size:var(--t-2);font-weight:700;line-height:1.25; letter-spacing:-.022em;transition:color .15s; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{ content:"";position:absolute;right:.4rem;top:1.65rem;width:14px;height:14px; background:currentColor;color:var(--muted);transition:transform .2s; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } .faq details[open] summary::after{transform:rotate(45deg);} .faq summary:hover{color:var(--acao);} .faq .resposta{padding:0 2.5rem 1.6rem 0;color:var(--muted);line-height:1.7;max-width:64ch;} .faq .resposta p{margin:0 0 .85rem;} .faq .resposta p:last-child{margin-bottom:0;} /* chamada final */ .fechamento{ position:relative;overflow:hidden; background:var(--tinta);color:var(--sobre-tinta); border-radius:var(--r-4);padding:var(--e-8) var(--e-6);text-align:center; } .fechamento::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(28rem 18rem at 50% 0%, rgba(91,61,245,.5), transparent 65%); } .fechamento > *{position:relative;z-index:1;} .fechamento h2{margin:0 auto .85rem;max-width:20ch;color:var(--sobre-tinta);} .fechamento p{color:var(--sobre-tinta-suave);max-width:50ch;margin:0 auto var(--e-6); font-size:var(--t-1);} .fechamento .acoes{justify-content:center;} .fechamento .btn-primario{background:var(--sobre-tinta);color:var(--tinta);} .fechamento .btn-primario:hover{background:#FFF;color:var(--tinta);} .fechamento .btn-secundario{background:transparent;color:var(--sobre-tinta);border-color:var(--tinta-borda);} .fechamento .btn-secundario:hover{background:rgba(247,245,252,.1);color:var(--sobre-tinta);} /* ====================================================== tela de aula === */ .aula-layout{display:grid;gap:var(--e-7);grid-template-columns:1fr;} @media (min-width:68rem){ .aula-layout{grid-template-columns:minmax(0,1fr) 20rem;gap:var(--e-8);align-items:start;} .aula-lateral{position:sticky;top:5.5rem;} } .migalha{ font-size:.875rem;color:var(--muted);margin-bottom:.75rem; display:flex;gap:.45rem;align-items:center;flex-wrap:wrap; } .migalha a{color:var(--muted);text-decoration:none;font-weight:500;} .migalha a:hover{color:var(--acao);text-decoration:underline;} .migalha .sep{opacity:.45;} .migalha .mono{font-family:var(--mono);font-size:var(--t--2);} .player{ position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r-3); overflow:hidden;border:1px solid var(--line);margin-bottom:1.1rem; box-shadow:var(--sombra-2); } .player iframe{position:absolute;inset:0;width:100%;height:100%;border:0; background:#000;color-scheme:normal;} .player-indisponivel{ position:absolute;inset:0;display:grid;place-items:center;gap:.85rem; background:var(--surface-2);color:var(--muted);text-align:center;padding:var(--e-6); align-content:center; } .credito{ display:flex;align-items:center;gap:.6rem;flex-wrap:wrap; font-size:.875rem;color:var(--muted); padding:.7rem 1rem;background:var(--surface-2);border-radius:var(--r-2); margin-bottom:var(--e-6); } .credito strong{color:var(--ink);font-weight:600;} .credito a{margin-left:auto;font-weight:600;} .texto-aula{max-width:68ch;font-size:1.08rem;line-height:1.75;color:var(--ink);} .texto-aula p{margin-bottom:1.15rem;} .texto-aula h3{margin:var(--e-6) 0 .7rem;} .texto-aula ul{padding-left:1.2rem;margin-bottom:1.15rem;} .texto-aula li{margin-bottom:.5rem;} /* passo a passo */ .passos{ list-style:none;counter-reset:passo;padding:0;margin:0 0 var(--e-6); display:flex;flex-direction:column;gap:var(--e-5);max-width:68ch; } .passos li{ counter-increment:passo;display:grid;grid-template-columns:2.5rem 1fr;gap:1.1rem; position:relative; } .passos li::before{ content:counter(passo,decimal-leading-zero); font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--acao); background:var(--acao-suave);border-radius:var(--r-1); height:2.1rem;display:grid;place-items:center; font-variant-numeric:tabular-nums; } .passo-titulo{ font-family:var(--display);font-weight:700;font-size:var(--t-2);letter-spacing:-.022em; margin:.15rem 0 .5rem;line-height:1.25; } .passos li > div{font-size:1.03rem;line-height:1.7;} .passo-imagem{margin-top:.9rem;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden;} .desafio{ position:relative; background:var(--sinal-suave);border-radius:var(--r-3); padding:1.5rem 1.75rem;margin:var(--e-6) 0;max-width:68ch; border-left:4px solid var(--sinal); } .desafio-rotulo{ font-family:var(--mono);font-size:var(--t--2);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--sinal);display:flex;align-items:center;gap:.4rem; margin-bottom:.6rem; } .desafio p{font-size:1.03rem;line-height:1.65;} .materiais{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;} .material-item{ display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem; border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface); text-decoration:none;color:inherit;font-size:.9375rem;font-weight:500; transition:border-color .15s, background-color .15s; } .material-item:hover{border-color:var(--acao);background:var(--acao-suave);color:inherit;} .material-item .peso{margin-left:auto;font-family:var(--mono);font-size:var(--t--2); color:var(--muted);font-weight:400;} .barra-avanco{ display:flex;gap:.7rem;align-items:center;flex-wrap:wrap; padding-top:var(--e-5);margin-top:var(--e-7);border-top:1px solid var(--line); } .barra-avanco .esquerda{margin-right:auto;} .lateral-bloco{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3); padding:1.25rem;margin-bottom:var(--e-4); } .lateral-bloco h4{ font-family:var(--mono);font-size:var(--t--2);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);margin:0 0 .9rem; } .lateral-avanco{display:flex;align-items:center;gap:1rem;} .lateral-avanco .texto{display:flex;flex-direction:column;gap:.1rem;} .lateral-avanco .grande{font-family:var(--display);font-size:var(--t-2);font-weight:700; letter-spacing:-.02em;line-height:1;} .lateral-avanco .peq{font-size:var(--t--1);color:var(--muted);} .lateral-aulas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column; gap:.1rem;max-height:28rem;overflow-y:auto;} .lateral-aulas a{ display:flex;gap:.65rem;align-items:center;padding:.5rem .55rem;border-radius:var(--r-1); text-decoration:none;color:var(--muted);font-size:.875rem;line-height:1.4; transition:background-color .15s, color .15s; } .lateral-aulas a:hover{background:var(--surface-2);color:var(--ink);} .lateral-aulas .atual{background:var(--acao-suave);color:var(--acao);font-weight:600;} .lateral-aulas .num{font-family:var(--mono);font-size:.7rem;opacity:.75;flex:none;width:1.4rem;} .lateral-aulas .feita{color:var(--ok);} /* ============================================= entrar / criar conta === */ .corpo-portao{background:var(--ground);} .portao{ flex:1;width:100%;max-width:27rem;margin:0 auto;padding:var(--e-7) var(--e-5) var(--e-8); display:flex;flex-direction:column;gap:var(--e-4); } .portao-topo{display:flex;align-items:center;gap:.75rem;margin-bottom:var(--e-2);} .portao-topo .portao-marca{margin-right:auto;} .portao-cartao{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4); padding:var(--e-6);box-shadow:var(--sombra-2); } .portao-cartao h1{font-size:var(--t-3);margin-bottom:.4rem;} .portao-cartao .sub{color:var(--muted);font-size:.9375rem;margin-bottom:var(--e-5);} .portao-rodape{text-align:center;font-size:var(--t--1);color:var(--muted);} .portao-rodape a{color:var(--muted);} .portao-troca{text-align:center;font-size:.9375rem;color:var(--muted);} .separador{display:flex;align-items:center;gap:.85rem;margin:var(--e-5) 0; color:var(--muted);font-size:var(--t--1);} .separador::before,.separador::after{content:"";flex:1;height:1px;background:var(--line);} /* ============================================ administração (shell) === */ .admin-shell{ flex:1;width:100%;max-width:88rem;margin:0 auto;padding:var(--e-5) var(--e-5) var(--e-9); display:grid;grid-template-columns:1fr;gap:var(--e-5);align-items:start; } @media (min-width:60rem){ .admin-shell{grid-template-columns:15rem minmax(0,1fr);gap:var(--e-7);} } .admin-nav{display:flex;flex-direction:column;gap:.15rem;} @media (min-width:60rem){ .admin-nav{position:sticky;top:5.5rem;} } .admin-nav .grupo{ font-family:var(--mono);font-size:var(--t--2);font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted);padding:.5rem .65rem;margin-top:var(--e-3); } .admin-nav .grupo:first-child{margin-top:0;} .admin-nav a{ display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;border-radius:var(--r-1); text-decoration:none;color:var(--muted);font-size:.9375rem;font-weight:500; transition:background-color .15s, color .15s; } .admin-nav a svg{flex:none;opacity:.85;} .admin-nav a:hover{background:var(--surface-2);color:var(--ink);} .admin-nav a[aria-current="page"]{background:var(--acao-suave);color:var(--acao);font-weight:600;} .admin-nav a[aria-current="page"] svg{opacity:1;} .admin-nav .conta-pendente{ margin-left:auto;font-family:var(--mono);font-size:.68rem;background:var(--sinal); color:#FFF;border-radius:var(--pilula);padding:.05rem .4rem;font-weight:500; } @media (max-width:59.99rem){ .admin-nav{ flex-direction:row;overflow-x:auto;gap:.3rem;padding-bottom:.4rem; border-bottom:1px solid var(--line); /* Sem min-width:0 o item de grade cresce junto com a fila de atalhos e quem rola na horizontal é a PÁGINA, não a barra. Passou a doer quando a barra ganhou Relatórios e Ajustes e ficou mais larga que a tela. */ min-width:0; } .admin-nav .grupo{display:none;} .admin-nav a{white-space:nowrap;border-radius:var(--pilula);} } .admin-corpo{min-width:0;} .admin-topo{ display:flex;align-items:flex-end;gap:var(--e-4);flex-wrap:wrap;margin-bottom:var(--e-6); } .admin-topo h1{font-size:var(--t-3);} .admin-topo .sub{color:var(--muted);font-size:.9375rem;margin:.35rem 0 0;} .admin-topo .acoes{margin-left:auto;} /* números do painel */ .estatisticas{display:grid;gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin-bottom:var(--e-6);} .estat{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3); padding:1.25rem 1.35rem;display:flex;flex-direction:column;gap:.3rem; } .estat .topo{display:flex;align-items:center;gap:.5rem;color:var(--muted);} .estat .topo svg{flex:none;} .estat .rotulo{ font-family:var(--mono);font-size:var(--t--2);letter-spacing:.06em; text-transform:uppercase;color:var(--muted); } .estat .valor{ font-family:var(--display);font-size:var(--t-4);font-weight:800;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.035em;margin-top:.2rem; } /* tabelas */ .tabela-rolagem{ overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-3); background:var(--surface); } table.dados{border-collapse:collapse;width:100%;font-size:.9rem;min-width:40rem;} table.dados th,table.dados td{ padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle; } table.dados thead th{ font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);background:var(--surface-2);white-space:nowrap; } table.dados tbody tr:last-child td{border-bottom:0;} table.dados tbody tr{transition:background-color .12s;} table.dados tbody tr:hover{background:var(--surface-2);} table.dados td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;} table.dados td.acoes-celula{text-align:right;white-space:nowrap;} table.dados td.acoes-celula form{display:inline;} /* listas ordenáveis do editor */ .lista-ordenavel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;} .linha-item{ display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem; border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface); transition:border-color .15s; } .linha-item:hover{border-color:var(--borda);} .linha-item .cresce{flex:1;min-width:0;} .linha-item .cresce strong{display:block;font-weight:600;overflow:hidden; text-overflow:ellipsis;font-size:.9375rem;} .linha-item .cresce small{color:var(--muted);font-size:var(--t--1);} .arrasta{display:inline-flex;gap:.15rem;} .passo-editor{ border:1px solid var(--line);border-radius:var(--r-2);padding:1.1rem; margin-bottom:.75rem;background:var(--surface-2); } .passo-editor .cabeca{display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem;} .passo-editor .cabeca span{ font-family:var(--mono);font-size:var(--t--2);color:var(--acao); background:var(--acao-suave);padding:.2rem .45rem;border-radius:5px; } .passo-editor .cabeca button{margin-left:auto;} /* ========================================================== rodapé === */ .rodape{border-top:1px solid var(--line);background:var(--surface);margin-top:auto;} .rodape-int{ max-width:78rem;margin:0 auto;padding:var(--e-7) var(--e-5); display:flex;gap:var(--e-6);justify-content:space-between;flex-wrap:wrap;align-items:start; } .rodape-marca{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;} .rodape-nome{font-family:var(--display);font-weight:800;font-size:var(--t-1); letter-spacing:-.03em;margin:0;} .rodape-desc{color:var(--muted);font-size:.875rem;margin:0;max-width:42ch;line-height:1.6;} .rodape-links{display:flex;gap:var(--e-5);flex-wrap:wrap;} .rodape-links a{color:var(--muted);font-size:.875rem;text-decoration:none;font-weight:500;} .rodape-links a:hover{color:var(--acao);} /* ======================================================= instalador === */ .instalador{max-width:46rem;margin:0 auto;padding:var(--e-7) var(--e-5) var(--e-9);} .instalador-marca{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:var(--e-6); font-weight:600;color:var(--ink);text-decoration:none;} .passo{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.12em; text-transform:uppercase;color:var(--acao);margin:0 0 .5rem;} .checagem{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;} .checagem li{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.7rem;align-items:baseline; padding:.65rem .2rem;border-bottom:1px solid var(--line);font-size:.9375rem;} .checagem li:last-child{border-bottom:0;} .checagem .marca{font-weight:700;} .checagem .ok .marca{color:var(--ok);} .checagem .falha .marca{color:var(--perigo);} .checagem .alerta .marca{color:var(--sinal);} .checagem .valor{font-family:var(--mono);font-size:var(--t--1);color:var(--muted);} .checagem .ajuda{grid-column:2/-1;color:var(--muted);font-size:var(--t--1);margin-top:.25rem; line-height:1.5;} .pronto{text-align:center;padding:var(--e-4) 0 .5rem;} .pronto .selo{ width:3.5rem;height:3.5rem;margin:0 auto var(--e-4);border-radius:var(--pilula); background:var(--ok-suave);color:var(--ok);display:grid;place-items:center; font-size:1.75rem;line-height:1; } pre.config{ font-family:var(--mono);font-size:.78rem;line-height:1.6;background:var(--tinta); color:var(--sobre-tinta);border-radius:var(--r-2);padding:1.1rem;overflow-x:auto; max-height:24rem; } /* ======================================================= utilidades === */ .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;} .silencioso{color:var(--muted);} .pequeno{font-size:var(--t--1);} .centro{text-align:center;} .pilha{display:flex;flex-direction:column;gap:var(--e-4);} .linha{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;} .so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} .margem-topo{margin-top:var(--e-6);} .plain{list-style:none;padding:0;margin:0 0 var(--e-4);display:flex;flex-direction:column;gap:.6rem;} .plain li{padding-left:1.3rem;position:relative;line-height:1.6;} .plain li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:2px; border-radius:2px;background:var(--acao);} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;} } /* ==================================================== painel do aluno === */ .retomar-cartao{ display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:center; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-4); padding:1.75rem;margin-bottom:var(--e-7);box-shadow:var(--sombra-2); } .retomar-texto{min-width:0;} .retomar-texto h2{font-size:var(--t-3);margin:.15rem 0 .3rem;} .retomar-texto .rotulo-secao{color:var(--acao);margin-bottom:.35rem;} .retomar-acoes{grid-column:1/-1;margin-top:.5rem;} @media(min-width:44rem){ .retomar-cartao{grid-template-columns:auto 1fr auto;padding:1.9rem 2rem;} .retomar-acoes{grid-column:auto;margin-top:0;} } .titulo-bloco{margin-bottom:var(--e-4);} .bloco-grade{margin-bottom:var(--e-7);} /* A lista lateral rola; a máscara avisa que há mais abaixo. */ .lateral-aulas{ mask-image:linear-gradient(#000 calc(100% - 2rem), transparent); -webkit-mask-image:linear-gradient(#000 calc(100% - 2rem), transparent); } .lateral-aulas:not([data-rola]) {mask-image:none;-webkit-mask-image:none;} /* Estado vazio dentro de cartão, mais discreto que a caixa tracejada. */ .vazio-interno{ display:flex;flex-direction:column;align-items:center;gap:.6rem; padding:var(--e-6) var(--e-4);text-align:center;color:var(--muted);font-size:.9375rem; } .vazio-interno .ic{ width:2.5rem;height:2.5rem;border-radius:var(--pilula);background:var(--surface-2); display:grid;place-items:center;color:var(--borda); } /* ===================================================================== PAINÉIS — a linguagem de dashboard As quatro cores dos cartões passaram no validador de paleta: banda de luminosidade, piso de croma, separação para daltonismo e contraste. O texto é sempre branco, e as DUAS pontas de cada degradê dão pelo menos 4.6:1 com branco — é o que impede o rótulo de sumir no lado claro, defeito comum em cartão colorido. ===================================================================== */ /* ---- faixa de saudação ---- */ .saudacao{ display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap; background:linear-gradient(100deg, var(--acao-suave), transparent 70%); border:1px solid var(--line);border-radius:var(--r-3); padding:1.1rem 1.4rem;margin-bottom:var(--e-5); } .saudacao .oi{font-family:var(--display);font-size:var(--t-2);font-weight:700; letter-spacing:-.025em;margin:0;} .saudacao .oi b{color:var(--acao);font-weight:700;} .saudacao .sub{color:var(--muted);font-size:.9375rem;margin:.1rem 0 0;} .saudacao .caminho{ margin-left:auto;font-family:var(--mono);font-size:var(--t--2);color:var(--muted); display:flex;gap:.4rem;align-items:center; } .saudacao .caminho a{color:var(--muted);text-decoration:none;} .saudacao .caminho a:hover{color:var(--acao);} /* ---- cartões de número em degradê ---- */ .cartoes-cor{display:grid;gap:var(--e-4); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));margin-bottom:var(--e-5);} .cartao-cor{ position:relative;overflow:hidden;border-radius:var(--r-3); padding:1.3rem 1.4rem;color:#FFFFFF;min-height:7.5rem; display:flex;flex-direction:column;justify-content:space-between;gap:.75rem; box-shadow:var(--sombra-2); transition:transform .2s ease, box-shadow .2s ease; } .cartao-cor:hover{transform:translateY(-2px);box-shadow:var(--sombra-3);} @media (prefers-reduced-motion: reduce){ .cartao-cor:hover{transform:none;} } /* círculos de luz, como nas referências, mas discretos */ .cartao-cor::before{ content:"";position:absolute;right:-2.5rem;top:-3rem;width:9rem;height:9rem; border-radius:50%;background:rgba(255,255,255,.12); } .cartao-cor::after{ content:"";position:absolute;right:1.5rem;bottom:-3.5rem;width:6rem;height:6rem; border-radius:50%;background:rgba(255,255,255,.08); } .cartao-cor > *{position:relative;z-index:1;} .cartao-cor .ic{ width:2.5rem;height:2.5rem;border-radius:var(--r-2);display:grid;place-items:center; background:rgba(255,255,255,.2);color:#FFFFFF; } .cartao-cor .num{ font-family:var(--display);font-size:2.1rem;font-weight:800;line-height:1; letter-spacing:-.04em;font-variant-numeric:tabular-nums; } .cartao-cor .rot{ font-family:var(--mono);font-size:var(--t--2);letter-spacing:.07em; text-transform:uppercase;opacity:.92;margin-top:.25rem;display:block; } .cor-violeta {background:linear-gradient(135deg,#5211E8,#7949E9);} .cor-coral {background:linear-gradient(135deg,#A1340C,#CC4919);} .cor-esmeralda{background:linear-gradient(135deg,#065538,#108459);} .cor-azul {background:linear-gradient(135deg,#0E56B4,#1B70DE);} /* ---- atalhos em azulejo ---- */ .atalhos{display:grid;gap:var(--e-4); grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));} .atalho{ display:flex;align-items:center;gap:.9rem;padding:.85rem;border-radius:var(--r-2); text-decoration:none;color:inherit;border:1px solid transparent; transition:background-color .15s, border-color .15s, transform .15s; } .atalho:hover{background:var(--surface-2);border-color:var(--line);color:inherit;transform:translateX(2px);} @media (prefers-reduced-motion: reduce){ .atalho:hover{transform:none;} } .atalho .quadro{ width:2.9rem;height:2.9rem;flex:none;display:grid;place-items:center;color:#FFFFFF; /* squircle, como nas referências */ border-radius:38% 62% 58% 42% / 45% 40% 60% 55%; box-shadow:var(--sombra-1); } .atalho .rot{display:flex;flex-direction:column;gap:.1rem;min-width:0;} .atalho .rot strong{font-size:.9375rem;font-weight:600;letter-spacing:-.01em;} .atalho .rot span{font-size:var(--t--1);color:var(--muted);} /* ---- gráfico ---- */ .grafico-cartao{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3); padding:1.4rem 1.5rem;margin-bottom:var(--e-5); } .grafico-cabeca{display:flex;align-items:baseline;gap:var(--e-4);flex-wrap:wrap;margin-bottom:1.2rem;} .grafico-cabeca h3{font-size:var(--t-1);} .grafico-cabeca .periodo{margin-left:auto;font-family:var(--mono);font-size:var(--t--2);color:var(--muted);} .grafico{width:100%;height:auto;display:block;overflow:visible;} .grafico .grade{stroke:var(--line);stroke-width:1;} .grafico .eixo{fill:var(--muted);font-family:var(--mono);font-size:10px;} /* A barra é um (ponta arredondada só em cima), não um : mirar rect.valor deixava a barra com o preto padrão do SVG. */ .grafico .barra .valor{fill:var(--acao);transition:fill .15s;} .grafico .barra:hover .valor{fill:var(--acao-forte);} .grafico .barra .alvo{fill:transparent;} .grafico .barra text.rotulo{ fill:var(--ink);font-family:var(--mono);font-size:11px;font-weight:500; text-anchor:middle;opacity:0;transition:opacity .15s; } .grafico .barra:hover text.rotulo{opacity:1;} .grafico .barra text.fixo{opacity:1;} .grafico-tabela{margin-top:1rem;} .grafico-tabela summary{ cursor:pointer;font-size:var(--t--1);color:var(--muted);list-style:none; display:inline-flex;align-items:center;gap:.35rem; } .grafico-tabela summary::-webkit-details-marker{display:none;} .grafico-tabela summary:hover{color:var(--acao);} .grafico-tabela table{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.875rem;} .grafico-tabela th,.grafico-tabela td{padding:.4rem .6rem;text-align:left; border-bottom:1px solid var(--line);} .grafico-tabela th{font-family:var(--mono);font-size:var(--t--2);text-transform:uppercase; letter-spacing:.06em;color:var(--muted);font-weight:500;} .grafico-tabela td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;} /* ---- duas colunas de painel ---- */ .painel-duplo{display:grid;gap:var(--e-5);grid-template-columns:1fr;align-items:start;} @media(min-width:62rem){ .painel-duplo{grid-template-columns:1.25fr 1fr;} } /* ---- gestão de pessoas e ajustes ---- */ /* Cartão que abre e fecha. O triângulo padrão do navegador destoa do resto; trocamos por um sinal nosso, que gira ao abrir. */ details.cartao > summary{ list-style:none;display:flex;align-items:center;gap:.5rem; font-size:var(--t-0);color:var(--ink); } details.cartao > summary::-webkit-details-marker{display:none;} details.cartao > summary::before{ content:"";width:.5rem;height:.5rem;flex:none; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(-45deg);transition:transform .15s; } details.cartao[open] > summary::before{transform:rotate(45deg);} details.cartao > summary:hover{color:var(--acao);} details.cartao > summary:hover::before{border-color:var(--acao);} /* Senha recém-gerada: precisa ser lida caractere a caractere, em voz alta, por telefone. Monoespaçada, grande e destacada do texto ao redor. */ .senha-nova{ display:inline-block;max-width:100%;font-size:var(--t-1);font-weight:500; letter-spacing:.08em; background:var(--surface);border:1px solid var(--borda);border-radius:var(--r-1); padding:.25rem .6rem;margin:.35rem 0;user-select:all; /* Também carrega o endereço de retorno do Google, que é longo e não tem espaço nenhum: sem isto ele empurra a tela inteira no celular. */ overflow-wrap:anywhere; } /* Um