/* ============================================================ Skills do Davi Damasceno — estilo (Design System: Operação AutonomIA) Tema padrão: ESCURO. Toggle adiciona/remove .light no . ============================================================ */ /* ---------- Tokens: ESCURO (padrão) ---------- */ :root { --bg:#0F0E0C; --bga:#1A1815; --cd:#26221C; --t1:#F5F2ED; --t2:rgba(245,242,237,.75); --t3:rgba(245,242,237,.55); --tg:rgba(245,242,237,.35); --a:#FF4D00; --ae:#E64500; --aw:rgba(255,77,0,.12); --ok:#00B464; --wn:#F5A623; --err:#FF4D00; --bd:rgba(255,255,255,.08); --bds:rgba(255,255,255,.18); --r-sm:4px; --r:12px; --r-lg:16px; --rp:100px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace; --ease:cubic-bezier(.22,1,.36,1); --pop:cubic-bezier(.34,1.56,.64,1); --maxw:1180px; } /* ---------- Tokens: CLARO ---------- */ :root.light { --bg:#E8E4DC; --bga:#F5F2ED; --cd:#D8D4CC; --t1:#1A1A1A; --t2:rgba(0,0,0,.65); --t3:rgba(0,0,0,.5); --tg:rgba(0,0,0,.3); --aw:rgba(255,77,0,.07); --bd:rgba(0,0,0,.1); --bds:rgba(0,0,0,.2); } * { box-sizing:border-box; min-width:0; } html { scroll-behavior:smooth; } /* Blindagem: nunca permitir rolagem lateral da pagina */ html, body { max-width:100%; overflow-x:hidden; } body { margin:0; background:var(--bg); color:var(--t1); font-family:var(--font); font-size:15px; line-height:1.6; font-feature-settings:"cv11","ss01"; -webkit-font-smoothing:antialiased; overflow-wrap:break-word; word-break:break-word; transition:background .3s var(--ease), color .3s var(--ease); } a { color:inherit; text-decoration:none; } ::selection { background:var(--a); color:#fff; } /* ---------- Utilitários ---------- */ .wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--sp-5); } .kicker { font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--a); } .label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t3); } .muted { color:var(--t2); } .hidden { display:none !important; } /* ---------- Header ---------- */ .hd { position:sticky; top:0; z-index:50; background:var(--bga); border-bottom:1px solid var(--bd); } /* padding-top/bottom apenas — o lateral vem do .wrap e nao pode ser zerado */ .hd-in { display:flex; align-items:center; gap:var(--sp-4); padding-top:var(--sp-4); padding-bottom:var(--sp-4); } .brand { display:flex; flex-direction:column; gap:2px; cursor:pointer; flex-shrink:0; } .brand .nm { font-size:19px; font-weight:900; letter-spacing:-.6px; line-height:1; } .brand .nm span { color:var(--a); } .brand .sb { font-size:9px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--t3); } .hd-spacer { flex:1; } .search { position:relative; flex:1; max-width:420px; } .search input { width:100%; background:var(--bg); border:1px solid var(--bd); color:var(--t1); border-radius:var(--rp); padding:9px 14px 9px 38px; font-family:inherit; font-size:13px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); } .search input:focus { outline:none; border-color:var(--a); box-shadow:0 0 0 3px var(--aw); } .search svg { position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; opacity:.5; } /* Identidade no cabeçalho (nome, painel, sair) */ .eu { display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:12px; } .eu-nome { font-weight:800; color:var(--t2); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .eu-link { background:transparent; border:1px solid var(--bd); color:var(--t2); font-family:inherit; font-size:11px; font-weight:700; padding:5px 11px; border-radius:var(--rp); cursor:pointer; text-decoration:none; transition:all .2s var(--ease); } .eu-link:hover { color:var(--a); border-color:var(--a); } .icon-btn { width:38px; height:38px; flex-shrink:0; border-radius:var(--rp); background:var(--cd); border:1px solid var(--bds); color:var(--t1); display:grid; place-items:center; cursor:pointer; font-size:16px; transition:transform .25s var(--pop), background .2s var(--ease); } .icon-btn:hover { transform:scale(1.08); } .icon-btn:active { transform:scale(.94); } /* ---------- Barra de categorias ---------- */ .catbar { border-bottom:1px solid var(--bd); background:var(--bg); position:sticky; top:71px; z-index:40; } /* wrap em vez de overflow-x: sem rolagem lateral */ .catbar-in { display:flex; flex-wrap:wrap; gap:var(--sp-2); padding-top:var(--sp-3); padding-bottom:var(--sp-3); align-items:center; } .cat-pill { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:8px 15px; border-radius:var(--rp); border:1px solid var(--bd); background:var(--bga); color:var(--t2); font-size:13px; font-weight:700; cursor:pointer; transition:all .2s var(--ease); } .cat-pill:hover { color:var(--t1); border-color:var(--bds); } .cat-pill.on { background:var(--a); border-color:var(--a); color:#fff; } .cat-pill.soon { opacity:.55; cursor:default; } .cat-pill .cnt { font-size:11px; opacity:.7; font-weight:600; } .catbar-sep { width:1px; height:22px; background:var(--bd); flex-shrink:0; margin:0 4px; } .cat-link { background:transparent; border:1px dashed var(--bd); color:var(--t2); } .cat-link.on { background:var(--cd); border-style:solid; border-color:var(--bds); color:var(--t1); } /* ---------- Main / views ---------- */ main { padding:var(--sp-8) 0 var(--sp-12); min-height:60vh; } .view { animation:fade .35s var(--ease); } @keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} } /* Hero */ .hero { margin-bottom:var(--sp-8); } .hero h1 { font-size:clamp(30px,5vw,50px); font-weight:900; letter-spacing:-1.5px; line-height:1; margin:8px 0 12px; } .hero h1 span { color:var(--a); } .hero p { font-size:16px; color:var(--t2); max-width:640px; margin:0; } .hero-stats { display:flex; gap:var(--sp-6); margin-top:var(--sp-6); flex-wrap:wrap; } .hstat { display:flex; flex-direction:column; } .hstat b { font-size:26px; font-weight:900; letter-spacing:-1px; line-height:1; } .hstat small { font-size:11px; color:var(--t3); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-top:4px; } /* Category section header */ .cat-head { display:flex; align-items:baseline; gap:12px; margin:var(--sp-8) 0 var(--sp-5); flex-wrap:wrap; } .cat-head:first-child { margin-top:0; } .cat-head h2 { font-size:22px; font-weight:800; letter-spacing:-.3px; margin:0; } .cat-head .emoji { font-size:20px; } .cat-head p { flex-basis:100%; font-size:13px; color:var(--t2); margin:2px 0 0; } /* Grid de cards */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--sp-4); } /* Tiles de categoria (home) */ .cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:var(--sp-4); } .cat-tile { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r-lg); padding:var(--sp-6); cursor:pointer; display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden; transition:transform .28s var(--ease), border-color .2s var(--ease), box-shadow .28s var(--ease); } .cat-tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--a); opacity:0; transition:opacity .2s var(--ease); } .cat-tile:hover { transform:translateY(-3px); border-color:var(--bds); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .cat-tile:hover::before { opacity:1; } .cat-tile.soon { opacity:.45; cursor:default; } .cat-tile.soon:hover { transform:none; box-shadow:none; border-color:var(--bd); } .cat-tile.soon:hover::before { opacity:0; } .ct-emoji { font-size:26px; line-height:1; } .cat-tile h3 { font-size:18px; font-weight:800; letter-spacing:-.3px; margin:0; } .cat-tile p { font-size:13px; color:var(--t2); margin:0; flex:1; line-height:1.5; } .ct-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; padding-top:12px; border-top:1px solid var(--bd); font-size:12px; color:var(--t3); } .ct-foot b { color:var(--a); font-weight:800; } .ct-pron { display:inline-flex; align-items:center; gap:6px; font-weight:700; } /* Card de skill */ .card { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r-lg); padding:var(--sp-5); cursor:pointer; position:relative; overflow:hidden; transition:transform .28s var(--ease), border-color .2s var(--ease), box-shadow .28s var(--ease); display:flex; flex-direction:column; gap:10px; } .card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--a); opacity:0; transition:opacity .2s var(--ease); } .card:hover { transform:translateY(-3px); border-color:var(--bds); box-shadow:0 12px 30px -12px rgba(0,0,0,.5); } .card:hover::before { opacity:1; } .card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; } .card h3 { font-size:16px; font-weight:800; letter-spacing:-.2px; margin:0; } .card .desc { font-size:13px; color:var(--t2); line-height:1.5; flex:1; } .card-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; } .card .kit-tag { font-size:10px; font-weight:700; color:var(--a); letter-spacing:.5px; } /* Badges */ .badge { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 9px; border-radius:var(--rp); background:var(--cd); color:var(--t2); white-space:nowrap; } .badge.nivel-facil { color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); } .badge.nivel-medio { color:var(--wn); background:color-mix(in srgb,var(--wn) 14%,transparent); } .badge.nivel-avancado { color:var(--a); background:var(--aw); } .dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; } .dot.verde { background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent); } .dot.amarelo { background:var(--wn); box-shadow:0 0 0 3px color-mix(in srgb,var(--wn) 22%,transparent); } .dot.vermelho { background:var(--a); box-shadow:0 0 0 3px var(--aw); } .prontidao { display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; color:var(--t2); } /* Empty state */ .empty { text-align:center; padding:var(--sp-12) 0; color:var(--t3); } .empty b { display:block; font-size:18px; color:var(--t2); margin-bottom:6px; } /* ---------- Detalhe da skill ---------- */ .detail { max-width:820px; } .back { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--t2); cursor:pointer; margin-bottom:var(--sp-5); padding:7px 14px; border-radius:var(--rp); border:1px solid var(--bd); background:var(--bga); transition:all .2s var(--ease); } .back:hover { color:var(--t1); border-color:var(--bds); transform:translateX(-2px); } .d-head { border-bottom:1px solid var(--bd); padding-bottom:var(--sp-5); margin-bottom:var(--sp-6); } .d-head .meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } .d-head h1 { font-size:clamp(26px,4vw,38px); font-weight:900; letter-spacing:-1px; line-height:1.05; margin:0 0 10px; } .d-head .resumo { font-size:17px; color:var(--t2); margin:0; } .d-pront { margin-top:var(--sp-4); padding:12px 16px; border-radius:var(--r); border:1px solid var(--bd); border-left:3px solid; display:flex; align-items:center; gap:12px; font-size:13px; } .d-pront.verde { border-left-color:var(--ok); background:color-mix(in srgb,var(--ok) 7%,transparent); } .d-pront.amarelo { border-left-color:var(--wn); background:color-mix(in srgb,var(--wn) 7%,transparent); } .d-pront.vermelho { border-left-color:var(--a); background:var(--aw); } .d-pront b { color:var(--t1); } .sec { margin-bottom:var(--sp-8); } .sec > .kicker { display:block; margin-bottom:var(--sp-4); } .sec p { margin:0 0 12px; color:var(--t2); } .sec p:last-child { margin-bottom:0; } .sec strong { color:var(--t1); } ul.list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } ul.list li { position:relative; padding-left:24px; color:var(--t2); font-size:14px; } ul.list li::before { content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--a); } ol.steps { list-style:none; counter-reset:s; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; } ol.steps li { counter-increment:s; position:relative; padding-left:42px; color:var(--t2); font-size:14px; min-height:28px; display:flex; align-items:center; } ol.steps li::before { content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; background:var(--cd); border:1px solid var(--bds); color:var(--a); font-weight:800; font-size:13px; display:grid; place-items:center; font-family:var(--mono); } .invoke { display:flex; flex-direction:column; gap:8px; } .invoke code { display:block; font-family:var(--mono); font-size:13px; background:var(--cd); border:1px solid var(--bd); border-left:3px solid var(--a); border-radius:var(--r-sm); padding:10px 14px; color:var(--t1); white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; } .io { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); } .io .box { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r); padding:var(--sp-4); } .io .box .label { display:block; margin-bottom:8px; } .io .box p { font-size:13.5px; } .prereq-list li.tem-sim::before { background:var(--ok); } .prereq-list li.tem-nao::before { background:var(--a); } .prereq-list li.tem-talvez::before { background:var(--wn); } .prereq-flag { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; margin-left:6px; } .prereq-flag.sim { color:var(--ok); } .prereq-flag.nao { color:var(--a); } .prereq-flag.talvez { color:var(--wn); } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--rp); background:var(--cd); border:1px solid var(--bd); font-size:12.5px; font-weight:700; color:var(--t2); cursor:pointer; transition:all .18s var(--ease); } .chip:hover { color:var(--a); border-color:var(--a); background:var(--aw); } .chip .arrow { opacity:.5; } .combina-item { padding:12px 0; border-bottom:1px solid var(--bd); font-size:13.5px; color:var(--t2); } .combina-item:last-child { border-bottom:none; } .combina-item b { color:var(--t1); } .warn-list li::before { background:var(--wn) !important; } .kit-sub { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; } .kit-sub .mini { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r); padding:14px; cursor:pointer; transition:all .2s var(--ease); } .kit-sub .mini:hover { border-color:var(--a); transform:translateY(-2px); } .kit-sub .mini b { font-size:14px; display:block; margin-bottom:4px; } .kit-sub .mini span { font-size:12px; color:var(--t3); } /* ---------- Playbooks ---------- */ .pb-intro { margin-bottom:var(--sp-6); } .pb { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r-lg); padding:var(--sp-6); margin-bottom:var(--sp-5); } .pb h3 { font-size:19px; font-weight:800; letter-spacing:-.3px; margin:0 0 6px; } .pb .obj { font-size:14px; color:var(--t2); margin:0 0 4px; } .pb .quando { font-size:12.5px; color:var(--t3); margin:0 0 var(--sp-5); font-style:italic; } .flow { display:flex; flex-direction:column; gap:2px; } .flow-step { display:flex; gap:14px; padding:14px 0; position:relative; } .flow-step:not(:last-child)::after { content:""; position:absolute; left:15px; top:38px; bottom:-2px; width:2px; background:var(--bd); } .flow-num { width:32px; height:32px; flex-shrink:0; border-radius:50%; background:var(--a); color:#fff; font-weight:800; font-size:14px; display:grid; place-items:center; font-family:var(--mono); z-index:1; } .flow-body { flex:1; } .flow-body .acao { font-size:14px; font-weight:700; color:var(--t1); margin-bottom:4px; } .flow-skill { display:inline-block; font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--a); background:var(--aw); border:1px solid color-mix(in srgb,var(--a) 30%,transparent); border-radius:var(--r-sm); padding:2px 8px; margin-bottom:6px; } .flow-io { font-size:12.5px; color:var(--t2); } .flow-io b { color:var(--t3); font-weight:700; } .pb .result { margin-top:var(--sp-5); padding:14px 16px; border-radius:var(--r); background:color-mix(in srgb,var(--ok) 8%,transparent); border:1px solid color-mix(in srgb,var(--ok) 25%,transparent); font-size:13.5px; color:var(--t2); } .pb .result b { color:var(--ok); } .pb .pb-req { margin-top:var(--sp-4); } .pb .pb-req summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--t3); letter-spacing:.5px; text-transform:uppercase; } .pb .pb-req ul { margin-top:10px; } /* ---------- Setup / Pré-requisitos ---------- */ .setup-intro { padding:16px 18px; border-radius:var(--r); background:var(--aw); border:1px solid color-mix(in srgb,var(--a) 30%,transparent); border-left:3px solid var(--a); margin-bottom:var(--sp-6); font-size:14px; color:var(--t2); } .setup-intro b { color:var(--t1); } .tier-table { display:flex; flex-direction:column; gap:10px; margin-bottom:var(--sp-8); } .tier { background:var(--bga); border:1px solid var(--bd); border-radius:var(--r); padding:14px 16px; display:grid; grid-template-columns:24px 1fr auto; gap:12px; align-items:start; } .tier .t-dot { margin-top:3px; } .tier .t-main b { font-size:14.5px; } .tier .t-tipo { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin-left:8px; } .tier .t-como { font-size:12.5px; color:var(--t2); margin-top:5px; } .tier .t-skills { font-size:11px; color:var(--t3); font-family:var(--mono); margin-top:6px; overflow-wrap:anywhere; } .tier .t-como { overflow-wrap:anywhere; } .tier .t-tem { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:4px 9px; border-radius:var(--rp); white-space:nowrap; } .t-tem.sim { color:var(--ok); background:color-mix(in srgb,var(--ok) 14%,transparent); } .t-tem.nao { color:var(--a); background:var(--aw); } .t-tem.talvez { color:var(--wn); background:color-mix(in srgb,var(--wn) 14%,transparent); } .atrito { display:flex; flex-direction:column; gap:0; } .atrito-step { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--bd); } .atrito-step:last-child { border-bottom:none; } .atrito-n { flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--cd); border:1px solid var(--bds); color:var(--a); font-weight:800; display:grid; place-items:center; font-family:var(--mono); font-size:13px; } .atrito-body b { font-size:14.5px; } .atrito-body .nota { font-size:13px; color:var(--t2); margin-top:3px; } .atrito-body .sk { margin-top:8px; } /* ---------- Footer ---------- */ footer { border-top:1px solid var(--bd); margin-top:var(--sp-12); padding:var(--sp-8) 0 var(--sp-10); } footer .wrap { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; } .f-made { font-size:14px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:center; } .f-made .ig { display:inline-flex; align-items:center; gap:6px; color:var(--a); font-weight:700; transition:opacity .2s var(--ease); } .f-made .ig:hover { opacity:.72; } .f-made .ig svg { width:16px; height:16px; flex-shrink:0; } .f-copy { font-size:12px; color:var(--t3); } /* ---------- Responsivo ---------- */ @media (max-width:760px) { .wrap { padding-left:var(--sp-4); padding-right:var(--sp-4); } .hd-in { flex-wrap:wrap; gap:var(--sp-3); } .search { order:3; max-width:none; flex-basis:100%; } /* catbar deixa de ser sticky no mobile: com wrap ela ocuparia meia tela */ .catbar { position:static; } .catbar-in { gap:6px; } .cat-pill { font-size:12px; padding:7px 12px; } main { padding-top:var(--sp-6); padding-bottom:var(--sp-10); } .hero { margin-bottom:var(--sp-6); } .hero-stats { gap:var(--sp-5); } .io { grid-template-columns:1fr; } .grid, .cat-grid { grid-template-columns:1fr; } .card, .cat-tile { padding:var(--sp-5); } /* tiers do setup empilham no mobile */ .tier { grid-template-columns:20px 1fr; row-gap:8px; } .tier .t-tem { grid-column:2; justify-self:start; } .pb { padding:var(--sp-5); } .flow-step { gap:12px; } .detail { max-width:100%; } }