/* ===================================================================== SOS MILITAR · style.css Conceito: posto de guarda na madrugada. Calmo, reservado, sem alarde. Identidade é mostrada como tarja preta (redação) — segurança visível. ===================================================================== */ :root{ --breu: #080D0A; /* fundo: quase preto, leve verde de caserna */ --carvao: #121A14; /* superfície dos cards */ --carvao-2: #1A241C; /* superfície elevada / campos */ --linha: #2A382B; /* divisórias */ --neblina: #E4E6E2; /* texto principal (branco quente da arte) */ --tropa: #93A091; /* texto secundário */ --tropa-2: #62715F; /* texto terciário */ --latao: #6B8054; /* oliva da marca (insígnia) */ --latao-cl: #8FA873; /* oliva claro */ --barro: #C07A57; /* calor discreto (curtida ativa) */ --tarja: #05080A; /* tarja de redação */ --foco: #8FA873; /* anel de foco acessível */ --r: 14px; --r-s: 9px; --sombra: 0 1px 0 rgba(255,255,255,.02), 0 12px 30px -18px rgba(0,0,0,.7); } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; background-color:var(--breu); background-image:radial-gradient(1100px 560px at 50% -8%, #16211A 0%, rgba(22,33,26,0) 62%); background-repeat:no-repeat; } /* arte de fundo: só nas telas públicas (recebem a classe .com-arte no ) */ html.com-arte{ background-image: linear-gradient(180deg, rgba(8,13,10,.62) 0%, rgba(8,13,10,.72) 50%, rgba(8,13,10,.84) 100%), url("hero.jpg"); background-position:center center; background-size:cover; background-attachment:fixed; } /* Para a arte aparecer MAIS, baixe os valores .62/.72/.84; para escurecer (texto mais legível), aumente-os até ~.95. */ body{ margin:0; background:transparent; color:var(--neblina); font-family:'Inter', system-ui, sans-serif; font-size:16px; line-height:1.62; min-height:100vh; display:flex; flex-direction:column; } a{ color:var(--latao-cl); text-decoration:none; } a:hover{ text-decoration:underline; } :focus-visible{ outline:2px solid var(--foco); outline-offset:2px; border-radius:4px; } .pular{ position:absolute; left:-999px; top:0; background:var(--latao); color:#0e150d; padding:.6rem 1rem; border-radius:0 0 var(--r-s) 0; z-index:50; font-weight:600; } .pular:focus{ left:0; } /* ---- topo ----------------------------------------------------------- */ .topo{ position:sticky; top:0; z-index:30; background:rgba(8,13,10,.90); backdrop-filter:saturate(120%) blur(10px); border-bottom:1px solid var(--linha); } .topo-int{ max-width:680px; margin:0 auto; padding:.85rem 1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .marca{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; } .marca:hover{ text-decoration:none; } .marca-tag{ font-family:'Oswald', sans-serif; font-weight:600; font-size:.84rem; letter-spacing:.12em; color:#0e150d; background:var(--latao); padding:.16rem .42rem; border-radius:4px; } .marca-nome{ font-family:'Oswald', sans-serif; font-weight:500; letter-spacing:.34em; font-size:1.02rem; color:var(--neblina); } /* ---- menu horizontal ----------------------------------------------- */ .menu{ display:flex; align-items:center; gap:.4rem; } .menu-l{ font-family:'Oswald', sans-serif; letter-spacing:.06em; font-size:.86rem; color:var(--tropa); padding:.4rem .7rem; border-radius:var(--r-s); text-transform:uppercase; } .menu-l:hover{ color:var(--neblina); background:rgba(255,255,255,.04); text-decoration:none; } .menu-b{ font-family:'Oswald', sans-serif; letter-spacing:.06em; font-size:.86rem; text-transform:uppercase; color:var(--latao-cl); background:transparent; border:1px solid rgba(143,168,115,.5); padding:.38rem .85rem; border-radius:999px; } .menu-b:hover{ background:rgba(143,168,115,.14); border-color:var(--latao); text-decoration:none; } /* ---- palco ---------------------------------------------------------- */ .palco{ flex:1; width:100%; max-width:680px; margin:0 auto; padding:1.4rem 1.1rem 2rem; } /* eyebrow / rótulo de seção */ .olho{ font-family:'Oswald', sans-serif; letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; color:var(--tropa-2); } /* ---- faixa de garantia (você está protegido) ----------------------- */ .garantia{ display:flex; gap:.7rem; align-items:flex-start; background:linear-gradient(180deg, #18241b, #121a14); border:1px solid var(--linha); border-left:3px solid var(--latao); border-radius:var(--r); padding:.85rem 1rem; margin-bottom:1.3rem; } .garantia svg{ flex:none; margin-top:.15rem; } .garantia p{ margin:0; font-size:.9rem; color:var(--tropa); } .garantia strong{ color:var(--neblina); } /* ---- composer (novo relato) ---------------------------------------- */ .compor{ background:var(--carvao); border:1px solid var(--linha); border-radius:var(--r); padding:1rem 1rem .85rem; margin-bottom:1.6rem; box-shadow:var(--sombra); } .compor textarea{ width:100%; resize:vertical; min-height:96px; background:var(--carvao-2); border:1px solid var(--linha); border-radius:var(--r-s); color:var(--neblina); font:inherit; padding:.75rem .85rem; } .compor textarea::placeholder{ color:var(--tropa-2); } .compor-pe{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.7rem; } .toggle{ display:inline-flex; align-items:center; gap:.5rem; color:var(--tropa); font-size:.86rem; cursor:pointer; user-select:none; } .toggle input{ accent-color:var(--latao); width:1.05rem; height:1.05rem; } /* botões */ .btn{ font-family:'Oswald', sans-serif; letter-spacing:.05em; font-size:.95rem; color:#0e150d; background:var(--latao); border:0; border-radius:var(--r-s); padding:.62rem 1.15rem; cursor:pointer; transition:background .15s; } .btn:hover{ background:var(--latao-cl); } .btn:disabled{ opacity:.5; cursor:not-allowed; } .btn-fan{ width:100%; } /* ---- feed ----------------------------------------------------------- */ .feed{ display:flex; flex-direction:column; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; } .relato{ background:var(--carvao); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra); overflow:hidden; } .relato-faixa{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; padding:.7rem .95rem; border-bottom:1px solid var(--linha); background:linear-gradient(180deg, rgba(255,255,255,.015), transparent); } .autor{ font-weight:600; font-size:.95rem; color:var(--neblina); } .autor.anon{ font-family:'JetBrains Mono', monospace; font-weight:500; font-size:.82rem; color:#cfd6e0; background:var(--tarja); padding:.12rem .5rem; border-radius:4px; letter-spacing:.04em; } /* chips de identificação — estética de ficha carimbada */ .chip{ font-family:'JetBrains Mono', monospace; font-size:.7rem; letter-spacing:.04em; color:var(--latao-cl); border:1px solid #3a4456; border-radius:5px; padding:.1rem .45rem; white-space:nowrap; } .chip-tipo{ color:var(--tropa); } .faixa-tempo{ margin-left:auto; color:var(--tropa-2); font-size:.78rem; white-space:nowrap; } .relato-texto{ padding:.95rem .95rem 1.05rem; white-space:pre-wrap; word-wrap:break-word; color:#dfe4ec; } .relato-acoes{ display:flex; align-items:center; gap:.3rem; padding:.35rem .55rem .55rem; } .acao{ display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:0; cursor:pointer; color:var(--tropa); font:inherit; font-size:.86rem; padding:.45rem .7rem; border-radius:var(--r-s); transition:background .15s, color .15s; } .acao:hover{ background:var(--carvao-2); color:var(--neblina); } .acao svg{ display:block; } .acao.ativa{ color:var(--barro); } .acao.ativa svg path{ fill:var(--barro); stroke:var(--barro); } .acao-cont{ font-variant-numeric:tabular-nums; } .acao-den{ margin-left:auto; color:var(--tropa-2); font-size:.8rem; } /* ---- vazio ---------------------------------------------------------- */ .vazio{ text-align:center; color:var(--tropa); padding:2.6rem 1rem; border:1px dashed var(--linha); border-radius:var(--r); } .vazio strong{ display:block; color:var(--neblina); font-family:'Oswald',sans-serif; letter-spacing:.04em; margin-bottom:.3rem; font-size:1.05rem; } /* ---- formularios (cadastro/login) ---------------------------------- */ .cartao{ background:var(--carvao); border:1px solid rgba(143,168,115,.14); border-radius:16px; padding:1.9rem 1.7rem 1.7rem; box-shadow:0 24px 60px -34px rgba(0,0,0,.85); } .cartao-marca{ display:flex; flex-direction:column; align-items:center; gap:.55rem; margin-bottom:1.3rem; } .cartao-marca svg{ width:34px; height:40px; display:block; } .cartao-marca b{ font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.28em; font-size:.78rem; color:var(--neblina); } .cartao .olho{ display:block; text-align:center; } .cartao h1{ font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.04em; margin:.15rem 0 .25rem; font-size:1.42rem; text-align:center; } .cartao .sub{ color:var(--tropa); margin:0 auto 1.5rem; font-size:.9rem; text-align:center; max-width:32ch; } .campo{ margin-bottom:1.05rem; } .campo label{ display:block; font-size:.82rem; color:var(--tropa); margin-bottom:.4rem; font-weight:500; } .campo .dica{ color:var(--tropa-2); font-weight:400; } .campo input, .campo select{ width:100%; background:var(--carvao-2); border:1px solid var(--linha); border-radius:var(--r-s); color:var(--neblina); font:inherit; padding:.68rem .8rem; transition:border-color .15s, box-shadow .15s; } .campo input:focus, .campo select:focus{ outline:none; border-color:var(--latao); box-shadow:0 0 0 3px rgba(143,168,115,.16); } .campo input::placeholder{ color:var(--tropa-2); } .dupla{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; } .cartao .btn-fan{ margin-top:.4rem; } .troca{ margin-top:1.15rem; color:var(--tropa); font-size:.9rem; text-align:center; } .aviso{ border-radius:var(--r-s); padding:.7rem .85rem; margin-bottom:1.1rem; font-size:.9rem; } .aviso-erro{ background:#3a1f1f; border:1px solid #5e2f2f; color:#f0c9c9; } .aviso-ok{ background:#1f3a2a; border:1px solid #2f5e42; color:#c9f0d6; } /* ---- rodape --------------------------------------------------------- */ .rodape{ border-top:1px solid var(--linha); background:rgba(8,13,10,.94); } .rodape-int{ max-width:680px; margin:0 auto; padding:1.3rem 1.1rem 2rem; } .apoio{ margin:0 0 .6rem; font-size:.9rem; color:var(--neblina); } .apoio a{ color:var(--latao-cl); } .rodape-nota{ margin:0; font-size:.78rem; color:var(--tropa-2); line-height:1.55; } .rodape-credito{ margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--linha); font-family:'Oswald',sans-serif; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; color:var(--tropa-2); text-align:center; } .rodape-credito strong{ color:var(--latao-cl); font-weight:500; } /* ---- moderação ------------------------------------------------------ */ .mod-relato{ border-left:3px solid var(--barro); } .mod-acoes{ display:flex; gap:.5rem; padding:.55rem .95rem .85rem; flex-wrap:wrap; } .btn-min{ font-family:'Oswald',sans-serif; font-size:.82rem; letter-spacing:.04em; background:var(--carvao-2); color:var(--neblina); border:1px solid var(--linha); border-radius:var(--r-s); padding:.4rem .8rem; cursor:pointer; } .btn-min:hover{ border-color:var(--latao); } .den-mark{ color:var(--barro); font-size:.8rem; font-family:'JetBrains Mono',monospace; } /* ---- escudo na marca do topo --------------------------------------- */ .marca-escudo{ width:22px; height:26px; display:block; flex:none; } /* ---- hero: a arte limpa, como imagem (nada sobreposto) ------------- */ .hero{ border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); line-height:0; margin-bottom:1rem; } .hero-img{ display:block; width:100%; height:auto; } /* faixa "por trás da farda" */ .frase{ text-align:center; font-family:'Oswald',sans-serif; font-weight:400; letter-spacing:.03em; color:var(--tropa); font-size:1rem; margin:0 0 .5rem; } .frase strong{ color:var(--neblina); } .privacidade{ text-align:center; max-width:46ch; margin:0 auto 1.6rem; font-size:.84rem; color:var(--tropa); line-height:1.5; } .privacidade strong{ color:var(--latao-cl); } .frase, .privacidade, .palco > .olho{ text-shadow:0 1px 10px rgba(0,0,0,.85); } /* ---- pilares (5 da arte) ------------------------------------------- */ .pilares{ display:grid; grid-template-columns:repeat(5,1fr); gap:.3rem; background:var(--carvao); border:1px solid var(--linha); border-radius:var(--r); padding:1rem .6rem; margin-bottom:1.6rem; } .pilar{ text-align:center; padding:.3rem .2rem; } .pilar svg{ display:block; margin:0 auto .45rem; color:var(--latao-cl); } .pilar b{ display:block; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.04em; font-size:.78rem; color:var(--neblina); text-transform:uppercase; } .pilar span{ display:block; font-size:.68rem; color:var(--tropa-2); line-height:1.3; margin-top:.15rem; } /* ---- categorias: seletor, chips e filtro --------------------------- */ .cat-sel{ background:var(--carvao-2); border:1px solid var(--linha); border-radius:var(--r-s); color:var(--neblina); font:inherit; padding:.5rem .65rem; } .chip-cat{ font-family:'Oswald',sans-serif; letter-spacing:.05em; text-transform:uppercase; font-size:.66rem; padding:.16rem .5rem; border-radius:5px; white-space:nowrap; border:1px solid transparent; } .cat-desabafo { color:#bcd0a6; background:#212e1b; border-color:#33461f; } .cat-denuncia { color:#e0b48f; background:#2e231a; border-color:#4a3522; } .cat-dano_moral{ color:#d99a9a; background:#2e1d1d; border-color:#4a2a2a; } /* ---- barra de opções (clicável, no espírito da arte) --------------- */ .barra-opcoes{ display:flex; align-items:stretch; background:linear-gradient(180deg, #141d15, #0e150f); border:1px solid var(--linha); border-radius:var(--r); overflow:hidden; margin:.4rem 0 1.1rem; } .op{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.85rem .25rem; color:var(--tropa); text-decoration:none; border-right:1px solid rgba(255,255,255,.05); transition:background .15s, color .15s; } .op:last-child{ border-right:0; } .op svg{ width:26px; height:26px; color:var(--latao-cl); transition:color .15s; } .op b{ font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:.04em; font-size:.69rem; text-transform:uppercase; color:var(--tropa); text-align:center; } .op:hover{ background:rgba(143,168,115,.08); text-decoration:none; } .op:hover b, .op:hover svg{ color:var(--neblina); } .op.on{ background:rgba(143,168,115,.16); } .op.on b{ color:var(--neblina); } .feed-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin:.2rem 0; } .ver-todos{ font-size:.82rem; color:var(--latao-cl); } .filtro{ display:flex; gap:.45rem; flex-wrap:wrap; margin:.7rem 0 .2rem; } .filtro a{ font-family:'Oswald',sans-serif; letter-spacing:.04em; font-size:.78rem; text-decoration:none; color:var(--tropa); background:var(--carvao); border:1px solid var(--linha); border-radius:999px; padding:.3rem .8rem; } .filtro a:hover{ color:var(--neblina); text-decoration:none; } .filtro a.on{ color:#0e150d; background:var(--latao); border-color:var(--latao); } /* ---- responsivo ----------------------------------------------------- */ @media (max-width:560px){ .pilares{ grid-template-columns:repeat(3,1fr); row-gap:1rem; } .hero-lema{ font-size:1.02rem; } } @media (max-width:560px){ .nav-quem{ display:none; } .dupla{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* =================================================================== Termômetro emocional =================================================================== */ .term{ max-width:560px; margin:1.2rem auto 0; } .term .sub{ max-width:46ch; } /* escolha de perfil */ .term-perfis{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:.4rem 0 1.2rem; } .term-perfil{ display:flex; flex-direction:column; gap:.25rem; text-align:left; background:var(--carvao-2); border:1px solid var(--linha); border-radius:var(--r); padding:1rem; text-decoration:none; transition:border-color .15s, background .15s; } .term-perfil:hover{ border-color:var(--latao); background:rgba(143,168,115,.08); text-decoration:none; } .term-perfil b{ font-family:'Oswald',sans-serif; letter-spacing:.03em; color:var(--neblina); font-size:1.02rem; } .term-perfil span{ font-size:.82rem; color:var(--tropa); } /* questionário */ .term-form{ margin-top:.4rem; } .term-q{ border:0; border-top:1px solid var(--linha); margin:0; padding:1.1rem 0 .3rem; } .term-q:first-of-type{ border-top:0; } .term-q legend{ font-size:.95rem; color:var(--neblina); padding:0; margin-bottom:.7rem; line-height:1.45; } .term-escala{ display:flex; gap:.4rem; } .term-opt{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:.4rem; cursor:pointer; text-align:center; } .term-opt input{ position:absolute; opacity:0; pointer-events:none; } .term-bola{ width:22px; height:22px; border-radius:50%; border:2px solid var(--tropa-2); transition:border-color .15s, background .15s, box-shadow .15s; } .term-opt:hover .term-bola{ border-color:var(--latao-cl); } .term-opt input:checked + .term-bola{ border-color:var(--latao); background:var(--latao); box-shadow:0 0 0 4px rgba(143,168,115,.18); } .term-opt input:focus-visible + .term-bola{ box-shadow:0 0 0 4px rgba(143,168,115,.35); } .term-rot{ font-size:.68rem; color:var(--tropa); line-height:1.2; } /* medidor de resultado */ .term-medidor{ margin:1rem 0 1.2rem; } .term-barra{ height:14px; border-radius:999px; background:var(--carvao-2); border:1px solid var(--linha); overflow:hidden; } .term-barra span{ display:block; height:100%; border-radius:999px; transition:width .6s ease; } .term-nivel{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:.6rem; } .term-nivel b{ font-family:'Oswald',sans-serif; letter-spacing:.03em; font-size:1.4rem; } .term-nivel span{ font-size:.82rem; color:var(--tropa); font-variant-numeric:tabular-nums; } .n-baixo .term-barra span{ background:#6FAA6B; } .n-baixo .term-nivel b{ color:#8Fc28a; } .n-moderado .term-barra span{ background:#8FA873; } .n-moderado .term-nivel b{ color:#a9c08c; } .n-elevado .term-barra span{ background:#D39A52; } .n-elevado .term-nivel b{ color:#e3b070; } .n-alerta .term-barra span{ background:#C0594E; } .n-alerta .term-nivel b{ color:#dd8076; } .term-interp{ color:#dfe4ec; line-height:1.6; margin:0 0 1.1rem; } .term-apoio{ background:#22301f; border:1px solid #3a5230; border-left:3px solid var(--latao); border-radius:var(--r-s); padding:.85rem 1rem; margin:0 0 1.1rem; font-size:.92rem; color:#e3ead9; line-height:1.55; } .term-apoio a{ color:var(--latao-cl); } .term-aviso{ font-size:.78rem; color:var(--tropa-2); line-height:1.5; margin:1rem 0 0; } .term-acoes{ display:flex; align-items:center; gap:1.1rem; margin-top:1.2rem; } @media (max-width:560px){ .term-perfis{ grid-template-columns:1fr; } .term-rot{ font-size:.62rem; } .term-escala{ gap:.2rem; } } /* medidores de subescala (DASS-21) */ .medidor{ margin:0 0 .9rem; } .medidor-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.35rem; } .medidor-cab b{ font-family:'Oswald',sans-serif; letter-spacing:.03em; font-size:1.08rem; color:var(--neblina); } .medidor-cab span{ font-size:.8rem; color:var(--tropa); font-variant-numeric:tabular-nums; } .medidor:first-of-type{ margin-top:0; } /* termômetro em destaque (estresse) */ .term-topo{ display:flex; align-items:center; gap:1.1rem; margin:.8rem 0 1.3rem; } .term-svg{ flex:none; } .termo{ width:74px; height:auto; display:block; } .term-leitura{ display:flex; flex-direction:column; gap:.15rem; } .term-leitura .olho{ color:var(--tropa-2); } .term-grande{ font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.02em; font-size:1.9rem; line-height:1.05; } .term-pts{ font-size:.85rem; color:var(--tropa); font-variant-numeric:tabular-nums; } .nivel-0 .term-grande{ color:#8fc28a; } .nivel-1 .term-grande{ color:#a9c08c; } .nivel-2 .term-grande{ color:#e3b070; } .nivel-3 .term-grande{ color:#e0925a; } .nivel-4 .term-grande{ color:#dd8076; } .term-secund{ margin-bottom:1.1rem; } .term-secund .medidor:last-child{ margin-bottom:0; } .nivel-0 .term-barra span{ background:#6FAA6B; } .nivel-0 .medidor-cab span{ color:#8fc28a; } .nivel-1 .term-barra span{ background:#8FA873; } .nivel-1 .medidor-cab span{ color:#a9c08c; } .nivel-2 .term-barra span{ background:#D39A52; } .nivel-2 .medidor-cab span{ color:#e3b070; } .nivel-3 .term-barra span{ background:#C77B45; } .nivel-3 .medidor-cab span{ color:#e0925a; } .nivel-4 .term-barra span{ background:#C0594E; } .nivel-4 .medidor-cab span{ color:#dd8076; }