/* ============================================================ Fan Cartoleiro — estilos (TEMA CLARO) Base clara + verde de gramado + âmbar de refletor ============================================================ */ :root{ --bg: #f3f6f3; --bg-2: #e9efea; --surface: #ffffff; --surface-2: #f1f6f2; --line: rgba(20,50,30,.10); --line-2: rgba(20,50,30,.16); --verde: #fd7400; /* acento (gráficos, ícones, foco) */ --verde-2: #fd7400; /* acento em textos pequenos */ --ambar: #fd7400; /* CTA */ --ambar-2: #fd7400; --txt: #14261a; --txt-2: #3a4a40; /* texto secundário */ --muted: #55695c; --preto: #0a1710; /* texto sobre botões claros/âmbar */ --topbar-bg: rgba(255,255,255,.82); --sombra: 0 1px 2px rgba(20,40,25,.04), 0 6px 20px rgba(20,40,25,.06); --sombra-2: 0 10px 30px rgba(20,40,25,.10); --raio: 16px; --raio-2: 12px; --wrap: 760px; } /* ---------- Tema escuro (data-tema="escuro" no ) ---------- */ /* Paleta alinhada ao app Clube Cartoleiro (GitHub dark + laranja) */ :root[data-tema="escuro"]{ --bg: #0d1117; --bg-2: #161b22; --surface: #161b22; --surface-2: #21262d; --line: #35373b; --line-2: #30363d; --verde: #fd7400; --verde-2: #fd7400; --ambar: #fd7400; --ambar-2: #fd7400; --txt: #e6edf3; --txt-2: #b1bac4; --muted: #8b949e; --preto: #0d1117; --topbar-bg: rgba(13,17,23,.82); --sombra: 0 2px 8px rgba(0,0,0,.3); --sombra-2: 0 12px 34px rgba(0,0,0,.5); } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background: radial-gradient(1200px 600px at 50% -10%, rgba(253,116,0,.08), transparent 60%), var(--bg); color:var(--txt); font-family:"Arimo", system-ui, -apple-system, sans-serif; letter-spacing:-0.5px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; } /* ---------- Botões ---------- */ .btn{ display:inline-flex; align-items:center; gap:.45em; font-family:"Arimo", sans-serif; font-weight:700; font-size:.95rem; padding:.72em 1.25em; border-radius:999px; border:1px solid var(--line-2); cursor:pointer; transition:transform .12s ease, filter .12s ease, background .12s ease, box-shadow .12s ease; background:var(--surface); color:var(--txt); } .btn:hover{ transform:translateY(-1px); } .btn:focus-visible{ outline:2px solid var(--ambar); outline-offset:2px; } .btn--accent{ background:var(--ambar); color:var(--surface); border-color:transparent; box-shadow:0 4px 14px rgba(253,116,0,.28); } .btn--accent:hover{ filter:brightness(1.05); } .btn--ghost{ background:transparent; border-color:var(--line-2); color:var(--txt); } .btn--ghost:hover{ border-color:var(--verde); } .btn--perigo{ background:transparent; border-color:rgba(192,57,43,.35); color:#c0392b; } .btn--perigo:hover{ background:rgba(192,57,43,.08); } .btn--sm{ padding:.5em .9em; font-size:.85rem; } .btn--bloco{ width:100%; justify-content:center; } /* ---------- Topbar ---------- */ .topbar{ position:sticky; top:0; z-index:20; background:var(--topbar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; } .marca{ display:flex; align-items:center; gap:10px; } .marca-logo{ height:45px; width:auto; display:block; } .marca-logo--escuro{ display:none; } :root[data-tema="escuro"] .marca-logo--claro{ display:none; } :root[data-tema="escuro"] .marca-logo--escuro{ display:block; } @media (max-width:440px){ .marca-logo{ height:40px; } } .marca-nome{ font-family:"Arimo", sans-serif; font-weight:700; font-size:1.5rem; letter-spacing:-0.5px; } .marca-nome strong{ color:var(--verde-2); font-weight:700; } .topbar-acao{ display:flex; align-items:center; gap:14px; } /* Botões redondos do topo */ .btn-redondo{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; flex-shrink:0; border-radius:999px; background:transparent; text-decoration:none; border:1px solid var(--line-2); color:var(--txt); cursor:pointer; transition:border-color .12s ease, transform .12s ease, filter .12s ease; } .btn-redondo:hover{ border-color:var(--verde); transform:translateY(-1px); } .btn-redondo:focus-visible{ outline:2px solid var(--ambar); outline-offset:2px; } .btn-redondo--accent{ background:var(--ambar); border-color:var(--ambar); color:var(--preto); } .btn-redondo--accent:hover{ filter:brightness(1.05); border-color:var(--ambar); } .btn-redondo.girando svg{ animation:girar .6s linear infinite; } @keyframes girar{ to{ transform:rotate(360deg); } } .ic-sol{ display:none; } .ic-lua{ display:block; } :root[data-tema="escuro"] .ic-sol{ display:block; } :root[data-tema="escuro"] .ic-lua{ display:none; } @media (max-width:440px){ .btn-redondo{ width:36px; height:36px; } .topbar-acao{ gap:8px; } } .ao-vivo{ display:inline-flex; align-items:center; gap:7px; font-family:"Arimo", sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:-0.5px; color:var(--muted); } .ponto{ width:8px; height:8px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 0 rgba(253,116,0,.5); animation:pulso 1.8s infinite; } @keyframes pulso{ 70%{ box-shadow:0 0 0 7px rgba(253,116,0,0);} 100%{ box-shadow:0 0 0 0 rgba(253,116,0,0);} } /* ---------- Hero ---------- */ .hero{ padding:22px 0; } .hero-band{ display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); box-shadow:var(--sombra); padding:14px 16px 14px 18px; } .hero-icone{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; border-radius:10px; background:rgba(253,116,0,.12); color:var(--ambar); } .hero-frase{ margin:0; min-width:0; font-size:1.12rem; font-weight:800; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hero-band .btn{ margin-left:auto; flex-shrink:0; white-space:nowrap; } @media (max-width:520px){ .hero-band{ gap:10px; padding:12px 14px; } .hero-frase{ font-size:1rem; } .hero-band .btn{ padding: 0.3em 0.8em; font-size: 14px;} } /* ---------- Feed ---------- */ .feed{ display:flex; flex-direction:column; gap:22px; padding-bottom:20px; } .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); transition:box-shadow .15s ease, transform .15s ease; } .card:hover{ box-shadow:var(--sombra-2); transform:translateY(-2px); } .card-media{ background:var(--bg-2); } .card-media img{ width:100%; height:auto; } .card-body{ padding:20px 22px 24px; } .card-meta{ display:flex; align-items:center; gap:10px; font-family:"Arimo", sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:-0.5px; color:var(--muted); margin-bottom:10px; } .tick{ width:14px; height:3px; border-radius:2px; background:var(--verde); } .tag{ color:var(--verde-2); font-weight:700; } .card-meta time{ margin-left:auto; } .card-titulo{ font-family:"Arimo", sans-serif; font-weight:700; font-size:1.4rem; line-height:1.25; margin:0 0 .45em; color:var(--txt); } .card-texto{ color:var(--txt-2); font-size:1.02rem; } .card-texto--truncado{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } .btn-continuar{ margin-top:12px; margin-left:auto; width:fit-content; padding:0; display:flex; align-items:center; gap:.35em; background:none; border:none; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:700; color:var(--verde-2); } .btn-continuar:hover{ text-decoration:underline; } .btn-continuar[hidden]{ display:none; } /* Card compacto (imagem à esquerda, texto à direita) */ .card--compacto{ display:flex; align-items:stretch; } .card--compacto .card-thumb{ flex:0 0 120px; background:var(--bg-2); overflow:hidden; } .card--compacto .card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .card--compacto .card-body{ flex:1 1 auto; min-width:0; padding:16px 18px; } .card--compacto .card-titulo{ font-size:1.15rem; } @media (max-width:440px){ .card--compacto .card-thumb{ flex-basis:100px; } } /* Admin: tipo, ações e edição */ .item-titulo{ display:block; font-size:.98rem; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .item-sub{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-top:4px; font-size:.76rem; color:var(--muted); white-space:nowrap; } .item-tipo{ font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ambar); border:1px solid var(--line-2); border-radius:5px; padding:1px 5px; } .item-acoes{ display:flex; gap:6px; flex-shrink:0; } .btn-icone{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; padding:0; border-radius:9px; background:transparent; text-decoration:none; cursor:pointer; border:1px solid var(--line-2); color:var(--txt); transition:border-color .12s ease, background .12s ease; } .btn-icone:hover{ border-color:var(--verde); } .btn-icone:focus-visible{ outline:2px solid var(--ambar); outline-offset:2px; } .btn-icone--perigo{ color:#c0392b; border-color:rgba(192,57,43,.35); } .btn-icone--perigo:hover{ background:rgba(192,57,43,.10); border-color:rgba(192,57,43,.5); } .item-admin--editando{ border-color:var(--ambar); } .form label.check{ display:flex; align-items:center; gap:8px; margin-top:10px; text-transform:none; letter-spacing:normal; font-weight:500; color:var(--txt); } .form label.check input{ width:auto; } .edit-img-atual{ margin:6px 0; } .edit-img-atual img{ max-height:90px; border-radius:8px; border:1px solid var(--line-2); } .edit-acoes{ display:flex; gap:10px; align-items:center; margin-top:20px; } /* Estado vazio */ .vazio{ text-align:center; padding:48px 24px; color:var(--muted); background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--raio); } .vazio h2{ font-family:"Arimo", sans-serif; font-weight:700; font-size:2rem; color:var(--txt); margin:0 0 .3em; } /* ---------- Promo (dentro do feed) ---------- */ .promo{ border-radius:var(--raio); padding:26px 24px; border:1px solid var(--line-2); background: linear-gradient(135deg, rgba(253,116,0,.09), transparent 70%), var(--surface); position:relative; overflow:hidden; box-shadow:var(--sombra); } .promo::before{ content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--verde); } .promo--amber{ background:linear-gradient(135deg, rgba(253,116,0,.14), transparent 70%), var(--surface); } .promo--amber::before{ background:var(--ambar); } .promo-eyebrow{ font-family:"Arimo", sans-serif; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:-0.5px; color:var(--muted); } .promo--amber .promo-eyebrow{ color:var(--ambar-2); } .promo--verde .promo-eyebrow{ color:var(--verde-2); } .promo-titulo{ font-family:"Arimo", sans-serif; font-weight:700; font-size:2rem; letter-spacing:-0.5px; margin:.25em 0 .2em; color:var(--txt); } .promo-sub{ color:var(--txt-2); margin:0 0 1.1em; } /* ---------- CTA band ---------- */ .cta-band{ margin-top:36px; padding:56px 0; text-align:center; background: radial-gradient(700px 300px at 50% 0%, rgba(253,116,0,.10), transparent 70%), var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .cta-eyebrow{ font-family:"Arimo", sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:-0.5px; color:var(--ambar-2); } .cta-titulo{ font-family:"Arimo", sans-serif; font-weight:700; font-size:clamp(2.4rem,8vw,3.6rem); line-height:1.05; letter-spacing:-0.9px; margin:.2em 0 .18em; color:var(--txt); } .cta-sub{ color:var(--muted); max-width:480px; margin:0 auto 1.5em; } .cta-botoes{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } /* ---------- Rodapé ---------- */ .rodape{ background:var(--bg-2); padding:44px 0 28px; border-top:1px solid var(--line); } .rodape-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; } .rodape-marca p{ color:var(--muted); font-size:.92rem; margin:.8em 0 0; max-width:240px; } .rodape-links h4{ font-family:"Arimo", sans-serif; font-size:.8rem; text-transform:uppercase; letter-spacing:-0.5px; color:var(--txt); margin:0 0 .9em; } .rodape-links a{ display:block; color:var(--muted); font-size:.92rem; padding:.28em 0; transition:color .12s ease; } .rodape-links a:hover{ color:var(--verde-2); } .rodape-base{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.82rem; } /* ============================================================ ADMIN ============================================================ */ .admin-wrap{ padding:34px 20px 60px; display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; } .admin-col{ min-width:0; } .painel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); padding:24px; box-shadow:var(--sombra); } .painel-titulo{ font-family:"Arimo", sans-serif; font-weight:700; font-size:1.7rem; letter-spacing:-0.5px; margin:0 0 1em; color:var(--txt); } .form label, .login-box label{ display:block; font-family:"Arimo", sans-serif; font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:-0.5px; color:var(--muted); margin:14px 0 6px; } .form input[type=text], .form textarea, .form input[type=file], .form select, .login-box input{ width:100%; background:var(--surface); border:1px solid var(--line-2); color:var(--txt); border-radius:var(--raio-2); padding:12px 14px; font-family:inherit; font-size:1rem; } .form textarea{ resize:vertical; } .form input:focus, .form textarea:focus, .login-box input:focus{ outline:none; border-color:var(--verde); box-shadow:0 0 0 3px rgba(253,116,0,.15); } .form .btn{ margin-top:20px; } .dica{ display:block; color:var(--muted); font-size:.8rem; margin-top:6px; } .login-box{ max-width:380px; margin:60px auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--raio); padding:32px; box-shadow:var(--sombra); } .login-box h1{ font-family:"Arimo", sans-serif; font-weight:700; font-size:2rem; margin:0 0 .5em; color:var(--txt); } .login-box .btn{ margin-top:22px; } .alerta{ border-radius:var(--raio-2); padding:12px 16px; margin-bottom:18px; font-size:.95rem; grid-column:1 / -1; } .alerta--erro{ background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.28); color:#b42318; } .alerta--ok{ background:rgba(253,116,0,.10); border:1px solid rgba(253,116,0,.30); color:var(--verde-2); } .lista-admin{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .item-admin{ display:flex; align-items:center; gap:12px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--raio-2); padding:10px; } .thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--surface-2); } .thumb--vazia{ display:flex; align-items:center; justify-content:center; text-align:center; font-family:"Arimo",sans-serif; font-size:.62rem; color:var(--muted); text-transform:uppercase; line-height:1.1; } .item-info{ flex:1; min-width:0; } .item-info strong{ display:block; font-size:.98rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt); } /* ============================================================ Páginas de texto (termos / privacidade) ============================================================ */ .doc{ padding:40px 0 20px; } .doc h1{ font-family:"Arimo", sans-serif; font-weight:700; font-size:clamp(2.4rem,7vw,3.4rem); letter-spacing:-0.5px; margin:0 0 .1em; color:var(--txt); } .doc .doc-data{ color:var(--muted); font-family:"Arimo",sans-serif; font-size:.85rem; margin-bottom:1.8em; } .doc h2{ font-family:"Arimo",sans-serif; font-weight:700; font-size:1.25rem; margin:1.8em 0 .5em; color:var(--txt); } .doc p, .doc li{ color:var(--txt-2); } .doc a{ color:var(--verde-2); } /* ============================================================ Responsivo ============================================================ */ @media (max-width:720px){ .rodape-grid{ grid-template-columns:1fr 1fr; } .admin-wrap{ grid-template-columns:1fr; } .marca-nome{ font-size:1.25rem; } } @media (max-width:440px){ .rodape-grid{ grid-template-columns:1fr; } .ao-vivo{ display:none; } .hero-frase{ font-size:.95rem; } } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }