/* AdLuminon — sistema visual "Estúdio". Claro é o padrão; escuro entra com data-tema="escuro" no (botão no cabeçalho). Os nomes de classe são os mesmos de antes, então todas as telas continuam funcionando. */ :root{ /* claro: cinza-azulado (nada de creme/rosado), destaque azul */ --papel:#f3f6fb; --papel2:#ffffff; --papel3:#e9eef7; --tinta:#0f1b2d; --tinta2:#55637a; --tinta3:#8793a8; --linha:#dde4ef; --linha2:#c9d3e3; --ouro:#2f6fed; --ouro-forte:#1b57d1; --ouro-suave:#e5edff; --ok:#1f7a4d; --erro:#c23b2b; --aviso:#1b57d1; --sombra:0 10px 30px rgba(15,27,45,.07); --sombra-forte:0 18px 38px rgba(15,27,45,.14); --capa-veu:linear-gradient(90deg,rgba(243,246,251,.985) 0%,rgba(243,246,251,.95) 38%,rgba(243,246,251,.6) 58%,rgba(243,246,251,0) 86%); } html[data-tema="escuro"]{ /* escuro: azul-noite */ --papel:#0a1020; --papel2:#111a2e; --papel3:#18233a; --tinta:#e9eefb; --tinta2:#9fadc6; --tinta3:#78869e; --linha:#1e2a42; --linha2:#2b3a56; --ouro:#5b9bff; --ouro-forte:#8fbcff; --ouro-suave:#16243f; --ok:#54ca8d; --erro:#ff7a68; --aviso:#8fbcff; --sombra:0 10px 30px rgba(0,0,0,.35); --sombra-forte:0 18px 40px rgba(0,0,0,.5); --capa-veu:linear-gradient(90deg,rgba(10,16,32,.985) 0%,rgba(10,16,32,.93) 38%,rgba(10,16,32,.6) 58%,rgba(10,16,32,0) 86%); } *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:var(--papel);color:var(--tinta); line-height:1.55;-webkit-font-smoothing:antialiased} .serif{font-family:'Fraunces',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:-.4px} a{color:inherit} img{max-width:100%} /* ---------- cabeçalho ---------- */ .container{max-width:1080px;margin:0 auto;padding:0 24px 90px} .header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;padding:14px 0;margin-bottom:8px; background:var(--papel);border-bottom:1px solid var(--linha)} .logo{width:42px;height:42px;border-radius:12px;background:var(--tinta);display:grid;place-items:center;flex-shrink:0; color:var(--ouro-forte);font-weight:800;font-size:20px;overflow:hidden} .logo img{width:27px;height:27px;display:block} .brand h1{font-size:17px;letter-spacing:.2px;font-weight:700} .brand h1 span{color:var(--ouro)} .brand p{color:var(--tinta2);font-size:11.5px;letter-spacing:.8px;text-transform:uppercase} .header .spacer{flex:1} .userbox{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--tinta2);flex-wrap:wrap;justify-content:flex-end} .link{color:var(--tinta2);cursor:pointer;font-size:13.5px;font-weight:500;text-decoration:none} .link:hover{color:var(--ouro)} .tema{width:36px;height:36px;border-radius:11px;border:1px solid var(--linha);background:var(--papel2); cursor:pointer;font-size:15px;line-height:1;color:var(--tinta);display:grid;place-items:center} .tema:hover{border-color:var(--ouro)} nav.abas{display:flex;gap:4px} nav.abas a{padding:9px 15px;border-radius:10px;color:var(--tinta2);text-decoration:none;font-size:14px;font-weight:500} nav.abas a:hover{background:var(--papel3);color:var(--tinta)} nav.abas a.on{background:var(--tinta);color:var(--papel2);font-weight:600} html[data-tema="escuro"] nav.abas a.on{background:var(--ouro);color:#06101f} /* ---------- capa / hero ---------- */ .hero{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--linha);box-shadow:var(--sombra); margin:26px 0 30px;background:var(--papel2);padding:32px 36px} /* telas internas usam o hero só com texto; com imagem, quem posiciona é o .sobre */ .hero:has(> img){padding:0} .hero > h2{font-family:'Fraunces',Georgia,serif;font-size:30px;line-height:1.1;letter-spacing:-.5px} .hero > p{color:var(--tinta2);margin-top:10px;font-size:15px;max-width:640px} .hero > img{width:100%;height:300px;object-fit:cover;object-position:right center;display:block} .hero .sobre{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:46px; background:var(--capa-veu)} .hero h2{font-family:'Fraunces',Georgia,serif;font-size:40px;line-height:1.06;max-width:500px;letter-spacing:-.6px} .hero h2 span{color:var(--ouro);font-style:italic} .hero p{color:var(--tinta2);margin-top:12px;max-width:420px;font-size:15.5px} .etiqueta{font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ouro);font-weight:700;margin-bottom:12px} /* ---------- blocos ---------- */ .section-title{display:flex;align-items:center;gap:12px;margin:34px 0 14px} .section-title h3{font-size:12px;letter-spacing:2.6px;text-transform:uppercase;color:var(--tinta2);font-weight:600} .badge{background:var(--ouro-suave);color:var(--aviso);font-size:11.5px;padding:3px 10px;border-radius:999px;font-weight:600} .card{background:var(--papel2);border:1px solid var(--linha);border-radius:20px;padding:26px;box-shadow:var(--sombra)} .card h3{font-size:18px;margin-bottom:6px} .card .sub,.sub{color:var(--tinta2);font-size:13.5px;margin-bottom:14px} .note{color:var(--tinta3);font-size:12.5px;margin-top:14px;line-height:1.6} .desc{color:var(--tinta2);font-size:13px} .label{font-weight:600;font-size:14.5px} .footer{text-align:center;color:var(--tinta3);font-size:12px;margin-top:40px} .spacer{flex:1} /* ---------- menu de ferramentas (tela inicial) ---------- */ .destaque{display:grid;grid-template-columns:1.15fr .85fr;border-radius:24px;overflow:hidden; border:1px solid var(--linha);box-shadow:var(--sombra);background:var(--papel2);cursor:pointer;transition:.18s;margin-bottom:22px} .destaque:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte);border-color:var(--ouro)} .destaque .txt{padding:38px} .destaque h3{font-family:'Fraunces',Georgia,serif;font-size:28px;margin:6px 0 8px;letter-spacing:-.4px} .destaque p{color:var(--tinta2);font-size:14.5px;max-width:420px} .destaque .ir{margin-top:18px;font-weight:600;font-size:14px;display:inline-flex;gap:8px;align-items:center} .destaque .ir b{color:var(--ouro);font-size:17px} .destaque .arte{position:relative;min-height:190px;background:var(--papel3)} .destaque .arte img{width:100%;height:100%;object-fit:cover;display:block} .destaque .play{position:absolute;inset:0;display:grid;place-items:center} .destaque .play span{width:62px;height:62px;border-radius:50%;background:rgba(20,18,12,.78);color:#fff; display:grid;place-items:center;font-size:22px;border:1px solid rgba(255,255,255,.25)} .quadrados{display:grid;grid-template-columns:1fr 1fr;gap:22px} .quadrado{border-radius:24px;overflow:hidden;border:1px solid var(--linha);background:var(--papel2); box-shadow:var(--sombra);cursor:pointer;transition:.18s;display:flex;flex-direction:column} .quadrado:hover{transform:translateY(-4px);box-shadow:var(--sombra-forte);border-color:var(--ouro)} .quadrado .arte{aspect-ratio:16/10;overflow:hidden;background:var(--papel3)} .quadrado .arte img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s} .quadrado:hover .arte img{transform:scale(1.04)} .quadrado .txt{padding:24px 26px 26px} .quadrado .n{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ouro);font-weight:700} .quadrado h3{font-family:'Fraunces',Georgia,serif;font-size:23px;margin:8px 0;letter-spacing:-.3px} .quadrado p{color:var(--tinta2);font-size:14px} .quadrado .ir{margin-top:16px;font-weight:600;font-size:13.5px;display:inline-flex;gap:7px;align-items:center} .quadrado .ir b{color:var(--ouro);font-size:16px} /* ---------- envio de arquivo ---------- */ .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:6px} .drop{border:1.5px dashed var(--linha2);border-radius:16px;padding:34px 20px;text-align:center;cursor:pointer; transition:.15s;background:var(--papel)} .drop:hover{border-color:var(--ouro);background:var(--ouro-suave)} .drop.filled{border-style:solid;border-color:var(--ouro);background:var(--papel)} .drop .icon{font-size:26px} .drop .main{font-weight:600;margin:8px 0 4px;font-size:15.5px} .drop .hint{color:var(--tinta2);font-size:12.5px} .drop .filename{margin-top:10px;font-size:13px;color:var(--ouro);font-weight:600;word-break:break-all} /* ---------- linhas de ajuste ---------- */ .rows{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid var(--linha);flex-wrap:wrap} .row:last-child{border-bottom:0} .row-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .row.sub-row{padding-left:18px;border-left:2px solid var(--linha);margin-left:2px} .seg{display:inline-flex;background:var(--papel3);border-radius:11px;padding:3px;gap:2px} .seg button{border:0;background:transparent;color:var(--tinta2);padding:8px 14px;border-radius:9px;cursor:pointer; font-size:13px;font-weight:500;font-family:inherit} .seg button:hover{color:var(--tinta)} .seg button.active{background:var(--papel2);color:var(--tinta);font-weight:600;box-shadow:0 2px 8px rgba(20,18,12,.12)} html[data-tema="escuro"] .seg button.active{background:var(--ouro);color:#06101f} .seg-sm button{padding:6px 11px;font-size:12.5px} .dur{display:flex;gap:8px;flex-wrap:wrap} .dur button{background:var(--papel);border:1px solid var(--linha);color:var(--tinta);padding:8px 14px;border-radius:11px; cursor:pointer;font-size:13px;font-family:inherit} .dur button:hover{border-color:var(--ouro)} .dur button.active{border-color:var(--ouro);background:var(--ouro-suave);color:var(--aviso);font-weight:600} .dur button:disabled{opacity:.35;cursor:not-allowed} select,.sel{background:var(--papel);border:1px solid var(--linha);color:var(--tinta);border-radius:11px; padding:9px 12px;font-size:13.5px;font-family:inherit;cursor:pointer} .switch{position:relative;width:46px;height:26px;flex-shrink:0} .switch input{display:none} .slider{position:absolute;inset:0;background:var(--linha2);border-radius:999px;cursor:pointer;transition:.15s} .slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%; transition:.15s;box-shadow:0 1px 4px rgba(0,0,0,.25)} .switch input:checked + .slider{background:var(--ouro)} .switch input:checked + .slider::before{transform:translateX(20px)} .check{display:flex;align-items:center;gap:8px;color:var(--tinta2);font-size:13px;margin-top:10px} .status-ok{color:var(--ok)} .status-wait{color:var(--aviso)} .plan{color:var(--ouro)} /* ---------- botões e avisos ---------- */ .btn{width:100%;border:0;border-radius:14px;padding:16px;font-size:15.5px;font-weight:700;cursor:pointer; background:var(--tinta);color:var(--papel2);font-family:inherit;margin-top:6px} .btn:hover{background:#1c2b45} html[data-tema="escuro"] .btn{background:var(--ouro);color:#06101f} html[data-tema="escuro"] .btn:hover{background:var(--ouro-forte)} .btn:disabled{background:var(--linha2);color:var(--tinta3);cursor:not-allowed} .btn-danger{background:transparent;border:1px solid var(--linha);color:var(--erro);border-radius:10px;padding:7px 12px; cursor:pointer;font-size:12.5px;font-family:inherit} .btn-danger:hover{background:var(--erro);color:#fff;border-color:var(--erro)} .mini{background:var(--papel);border:1px solid var(--linha);color:var(--tinta);border-radius:9px;padding:5px 10px; font-size:12.5px;cursor:pointer;text-decoration:none;display:inline-block;font-family:inherit} .mini:hover{border-color:var(--ouro)} .mini.perigo{color:var(--erro)} .mini.perigo:hover{background:var(--erro);color:#fff;border-color:var(--erro)} .mini.ok{border-color:var(--ouro);color:var(--ouro);font-weight:600} .msg{border-radius:12px;padding:13px 15px;font-size:13.5px;margin:12px 0} .msg.ok{background:var(--ouro-suave);color:var(--aviso)} .msg.error{background:rgba(194,59,43,.1);color:var(--erro)} .msg-inline-erro{color:var(--erro)} .progress{height:8px;background:var(--papel3);border-radius:999px;overflow:hidden;margin-top:10px} .progress div{height:100%;background:var(--ouro);border-radius:999px;animation:corre 1.4s ease-in-out infinite;width:40%} .progress.determinate div{animation:none;transition:width .3s} @keyframes corre{0%{margin-left:-40%}100%{margin-left:100%}} .result{margin-top:16px} .result video{width:100%;border-radius:14px;background:#000;margin-bottom:12px;max-height:60vh} .resumo{background:var(--papel);border:1px solid var(--linha);border-radius:14px;padding:15px;color:var(--tinta2); font-size:14px;margin-bottom:14px} .resumo b{color:var(--ouro)} .linha-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px} .addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .addrow input[type=email],.addrow input[type=file],.input{flex:1;min-width:200px;background:var(--papel); border:1px solid var(--linha);color:var(--tinta);border-radius:12px;padding:11px 14px;font-size:14px;font-family:inherit} .addrow .btn{width:auto;margin-top:0;padding:11px 22px;font-size:14px} /* ---------- biblioteca de CTA ---------- */ .cta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:14px} .cta-item{position:relative;border-radius:16px;overflow:hidden;background:var(--papel);border:1px solid var(--linha); cursor:pointer;transition:.15s;box-shadow:0 4px 14px rgba(20,18,12,.05)} .cta-item:hover{transform:translateY(-3px);box-shadow:var(--sombra-forte)} .cta-item.sel{border-color:var(--ouro);box-shadow:0 0 0 3px rgba(47,111,237,.22)} .cta-item img{width:100%;aspect-ratio:9/16;object-fit:cover;display:block;background:#0a0a0a} .cta-nome{font-size:13.5px;font-weight:600;padding:9px 12px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cta-info{font-size:11.5px;color:var(--tinta2);padding:0 12px 12px} .cta-acoes{position:absolute;top:10px;right:10px;display:flex;gap:4px;opacity:0;transition:.15s} .cta-item:hover .cta-acoes{opacity:1} .cta-check{position:absolute;top:10px;left:10px;width:25px;height:25px;border-radius:50%;background:var(--tinta); color:var(--papel2);display:grid;place-items:center;font-size:13px;font-weight:700} html[data-tema="escuro"] .cta-check{background:var(--ouro);color:#06101f} /* ---------- prévia ---------- */ .modal{position:fixed;inset:0;background:rgba(8,14,26,.74);display:none;place-items:center;padding:20px;z-index:60} .modal.aberto{display:grid} .modal-box{background:var(--papel2);border:1px solid var(--linha);border-radius:18px;padding:16px;max-width:400px;width:100%} .modal-box video{width:100%;border-radius:12px;margin-top:10px;max-height:70vh;background:#000} /* ---------- login ---------- */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px} .auth-card{background:var(--papel2);border:1px solid var(--linha);border-radius:24px;padding:38px 34px;max-width:410px; width:100%;text-align:center;box-shadow:var(--sombra-forte)} .auth-card .logo{margin:0 auto 16px;width:54px;height:54px;border-radius:15px} .auth-card .logo img{width:34px;height:34px} .auth-card h1{font-family:'Fraunces',Georgia,serif;font-size:26px;margin-bottom:4px} .auth-card h1 span{color:var(--ouro)} .auth-card .sub{color:var(--tinta2);font-size:13.5px;margin-bottom:22px} .tabs{display:flex;background:var(--papel3);border-radius:12px;padding:3px;margin-bottom:22px} .tabs button{flex:1;border:0;background:transparent;color:var(--tinta2);padding:10px;border-radius:10px;cursor:pointer; font-size:14px;font-family:inherit;font-weight:500} .tabs button.active{background:var(--papel2);color:var(--tinta);font-weight:600;box-shadow:0 2px 8px rgba(20,18,12,.1)} html[data-tema="escuro"] .tabs button.active{background:var(--ouro);color:#06101f} .field{text-align:left;margin-bottom:14px} .field label{display:block;font-size:12.5px;color:var(--tinta2);margin-bottom:6px;font-weight:500} .field input{width:100%;background:var(--papel);border:1px solid var(--linha);color:var(--tinta);border-radius:12px; padding:12px 14px;font-size:14.5px;font-family:inherit} .field input:focus{outline:0;border-color:var(--ouro)} /* ---------- painel do admin ---------- */ .pass{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px} .pass code{background:var(--papel);border:1px solid var(--linha);border-radius:8px;padding:4px 10px;font-size:14px; letter-spacing:1px;color:var(--ouro);font-family:ui-monospace,Consolas,monospace} .share{width:100%;margin-top:10px;background:var(--papel);border:1px solid var(--linha);border-radius:12px; color:var(--tinta);padding:11px;font-size:13px;line-height:1.55;resize:vertical;font-family:inherit} .row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end} @media(max-width:820px){ .destaque{grid-template-columns:1fr} .destaque .arte{min-height:160px;order:-1} .quadrados{grid-template-columns:1fr} .hero > img{height:260px} .hero .sobre{padding:26px} .hero h2{font-size:28px} nav.abas a{padding:8px 10px;font-size:13px} .brand p{display:none} } /* No tema escuro as artes (fundo claro) ficam suaves, sem estourar a tela */ html[data-tema="escuro"] .quadrado .arte img, html[data-tema="escuro"] .destaque .arte img{filter:brightness(.78) saturate(1.05) contrast(1.02)} /* Marca discreta assinando cada arte dos cards da tela inicial */ .destaque .arte, .quadrado .arte{position:relative} .marca-arte{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:7px; background:rgba(8,8,10,.55);border:1px solid rgba(245,197,66,.35);border-radius:999px;padding:5px 11px 5px 7px; backdrop-filter:blur(3px)} .destaque .arte .marca-arte img,.quadrado .arte .marca-arte img{width:18px;height:18px;object-fit:contain;display:block} .marca-arte span{font-size:11px;font-weight:700;letter-spacing:.6px;color:#f5d98a;text-transform:uppercase} /* as artes novas ja sao escuras: no tema escuro nao precisa escurecer mais */ html[data-tema="escuro"] .quadrado .arte img, html[data-tema="escuro"] .destaque .arte img{filter:none}