/* =========================================================== Área de Membros NeuroAlquimIA — Design System (estilo.css) Paleta da logo · Cormorant + Montserrat · dark violeta/ouro Importar fontes no : =========================================================== */ :root{ --bg:#0A090E; --bg2:#0E0C14; --surface:#161220; --surface2:#1E1830; --line:rgba(232,163,61,.18); --line-v:rgba(154,133,196,.20); --violet:#9A85C4; --violet-l:#BEABE0; --violet-d:#6E5A96; --gold:#E8A33D; --gold-l:#F4BE5C; --gold-hot:#FF9E2E; --ivory:#F3ECDD; --muted:#A99FB8; --muted-d:#736A82; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Montserrat',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--sans);background:var(--bg);color:var(--ivory);-webkit-font-smoothing:antialiased} /* tipografia */ .serif{font-family:var(--serif)} .kicker{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)} h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:500;line-height:1.1} em{font-style:italic;color:var(--gold-l)} /* marca */ .brandmark{display:flex;align-items:center;gap:12px} .brandmark .logo-img{height:44px;width:auto;display:block} .brandmark .txt b{font-family:var(--serif);font-size:17px;font-weight:600;letter-spacing:.06em;display:block;line-height:1;color:var(--ivory)} .brandmark .txt span{font-size:8px;letter-spacing:.36em;color:var(--violet-l);text-transform:uppercase} /* botões */ .btn-primary{background:linear-gradient(95deg,var(--gold-hot),var(--gold-l));color:#1a1206;border:none;border-radius:10px;padding:15px;font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.06em;cursor:pointer;transition:.25s} .btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)} .btn-ghost{background:rgba(243,236,221,.06);color:var(--ivory);border:1px solid var(--line-v);border-radius:10px;padding:13px 26px;font-size:13px;font-weight:500;cursor:pointer;transition:.25s} .btn-ghost:hover{background:rgba(243,236,221,.12)} /* topbar */ .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:15px 46px;background:rgba(10,9,14,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-v)} .nav-links{display:flex;gap:28px} .nav-links a{color:var(--muted);text-decoration:none;font-size:12.5px;letter-spacing:.04em;transition:.2s;cursor:pointer} .nav-links a:hover,.nav-links a.cur{color:var(--ivory)} .avatar{width:38px;height:38px;border-radius:50%;background-size:cover;background-position:center 20%;border:1px solid var(--gold)} /* capas / thumbnails (3:4) */ .poster{position:relative;aspect-ratio:3/4;border-radius:13px;overflow:hidden;border:1px solid var(--line-v);display:flex;flex-direction:column;justify-content:space-between;padding:18px} .poster .photo{position:absolute;inset:0;background-size:cover;background-position:center 18%;z-index:0} .poster::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,14,.15) 0%,rgba(10,9,14,.55) 55%,rgba(8,7,12,.92) 100%);z-index:1} .poster .wmk{position:absolute;top:13px;left:13px;width:26px;opacity:.55;z-index:2} .poster .num{position:relative;z-index:2;font-family:var(--serif);font-size:13px;letter-spacing:.2em;color:var(--gold);text-transform:uppercase} .poster .ttl{position:relative;z-index:2} .poster .ttl h5{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.12;margin-bottom:7px} .poster .ttl small{font-size:11px;color:var(--muted)} .poster.grad-violet{background:radial-gradient(80% 70% at 70% 22%,rgba(154,133,196,.85),transparent 60%),linear-gradient(160deg,#1B1430,#0C0A12)} .poster.grad-gold{background:radial-gradient(80% 70% at 30% 28%,rgba(232,163,61,.55),transparent 60%),linear-gradient(160deg,#241A12,#0C0A12)} .locktag{position:absolute;top:13px;right:13px;z-index:3;font-size:10px;color:var(--gold-l);background:rgba(10,9,14,.72);border:1px solid var(--line);padding:4px 10px;border-radius:100px} /* materiais da aula (bloco de recursos) */ .res-head{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet-l);margin:26px 0 14px} .resources{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;max-width:660px} .res{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line-v);border-radius:11px;padding:13px 16px;cursor:pointer;transition:.2s;text-decoration:none;color:var(--ivory)} .res:hover{border-color:var(--gold);background:var(--surface2)} .res .ic{width:34px;height:34px;flex-shrink:0;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--gold);background:rgba(232,163,61,.12)} .res.feat .ic{color:#1a1206;background:linear-gradient(135deg,var(--gold-hot),var(--gold-l))} .res b{font-size:12.5px;font-weight:500;display:block;line-height:1.2} .res small{font-size:10.5px;color:var(--muted)} /* player */ .video{position:relative;aspect-ratio:16/9;border-radius:15px;overflow:hidden;border:1px solid var(--line-v);background:radial-gradient(70% 80% at 50% 40%,rgba(154,133,196,.34),transparent 60%),linear-gradient(160deg,#161029,#08070C);display:flex;align-items:center;justify-content:center} .video .wmk{position:absolute;width:150px;opacity:.10;z-index:1} /* playlist */ .playlist{background:var(--bg2);border-left:1px solid var(--line-v);padding:24px 22px} .pl-item{display:flex;gap:13px;padding:12px;border-radius:11px;cursor:pointer;transition:.2s;margin-bottom:5px;text-decoration:none;color:var(--ivory)} .pl-item:hover{background:var(--surface)} .pl-item.cur{background:var(--surface);border:1px solid var(--line-v)} .pl-item .n{width:30px;height:30px;border-radius:50%;flex-shrink:0;border:1px solid var(--line-v);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)} .pl-item.cur .n,.pl-item.done .n{border-color:var(--gold);color:var(--gold)} .pl-item b{font-size:13px;font-weight:500;display:block;line-height:1.3;margin-bottom:4px} .pl-item small{font-size:11px;color:var(--muted)} .pl-item.cur b{color:var(--gold-l)}