/* Telemapa — folha principal. Tema ESCURO por padrão. O claro existe como opção e é ligado por cookie (data-theme="claro" no ), então não há piscada branca ao carregar. */ :root { /* Superfícies, do fundo para a frente */ --bg: #0a0e14; --bg-soft: #0e141d; --surface: #131b26; --surface-2: #1a2431; --surface-3: #212d3d; /* Traços */ --line: #223044; --line-soft: #1a2534; /* Texto */ --text: #e7eef7; --text-dim: #90a2b8; --text-faint: #64748b; /* Acento: o azul do Telegram, que é o contexto do site */ --accent: #2aabee; --accent-2: #1b8cc9; --accent-soft: rgba(42, 171, 238, .14); --accent-ring: rgba(42, 171, 238, .35); --gold: #f0b429; --gold-soft: rgba(240, 180, 41, .12); --radius: 16px; --radius-sm: 10px; --wrap: 1200px; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 4px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35); --shadow-lg: 0 8px 16px rgba(0,0,0,.35), 0 24px 64px rgba(0,0,0,.45); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif; color-scheme: dark; } /* Tema claro — só quando a pessoa escolhe */ :root[data-theme="claro"] { --bg: #f7f9fc; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f5fa; --surface-3: #e7edf5; --line: #dde5ef; --line-soft: #e9eff6; --text: #101823; --text-dim: #5a6b80; --text-faint: #8494a8; --accent: #1580bd; --accent-2: #0f6699; --accent-soft: rgba(21, 128, 189, .09); --accent-ring: rgba(21, 128, 189, .3); --gold: #a97a06; --gold-soft: rgba(169, 122, 6, .1); --shadow-sm: 0 1px 2px rgba(16,32,52,.06); --shadow: 0 1px 2px rgba(16,32,52,.06), 0 8px 24px rgba(16,32,52,.08); --shadow-lg: 0 4px 12px rgba(16,32,52,.08), 0 24px 48px rgba(16,32,52,.10); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.agegate-open { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Fundo com um brilho discreto no topo — dá profundidade sem poluir */ body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 520px; background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--accent-soft), transparent 70%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--text); } img { max-width: 100%; height: auto; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.022em; font-weight: 700; } h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); } h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.6rem); } h3 { font-size: 1.05rem; } /* Emoji com fonte própria: sem isso o Windows troca por quadradinho */ .emoji, .cat-icon, .catbar-link > span, .catmenu-panel a > span:first-child { font-family: var(--font-emoji); font-style: normal; line-height: 1; } .wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; } .muted { color: var(--text-dim); } .small { font-size: .875rem; } .center { text-align: center; } .skip { position: absolute; left: -9999px; background: var(--accent); color: #06121c; padding: .6rem 1rem; border-radius: 0 0 8px 0; font-weight: 600; } .skip:focus { left: 0; top: 0; z-index: 100; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- topbar */ .topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line-soft); } .topbar-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; flex-wrap: wrap; padding-block: .6rem; } .brand { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 700; font-size: 1.08rem; } .brand:hover { color: var(--text); } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #041018; font-size: .95rem; box-shadow: 0 0 0 1px var(--accent-ring), 0 4px 14px rgba(42,171,238,.25); } .brand-name { letter-spacing: -.03em; } .tag-18 { background: #c0392b; color: #fff; font-size: .62rem; padding: .12rem .38rem; border-radius: 5px; vertical-align: middle; margin-left: .3rem; letter-spacing: .03em; } .searchbar { display: flex; flex: 1 1 280px; max-width: 480px; gap: .45rem; } .searchbar input, .hero-search input { flex: 1; min-width: 0; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: .6rem 1.1rem; font-size: .95rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .searchbar input::placeholder, .hero-search input::placeholder { color: var(--text-faint); } .searchbar input:focus, .hero-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .searchbar button, .hero-search button { background: var(--accent); color: #04121c; border: 0; border-radius: 999px; padding: .6rem 1.2rem; font-weight: 650; font-family: inherit; cursor: pointer; transition: background .15s, transform .15s; } .searchbar button:hover, .hero-search button:hover { background: var(--accent-2); } .searchbar button:active, .hero-search button:active { transform: translateY(1px); } .topnav { margin-left: auto; display: flex; gap: .7rem; align-items: center; } /* ------------------------------------------------------------ breadcrumb */ .crumbs { padding-top: 1.1rem; font-size: .84rem; color: var(--text-dim); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; } .crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--line); } .crumbs a { color: var(--text-dim); } .crumbs a:hover { color: var(--accent); } main { padding-block: 2rem 4rem; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--accent-soft), transparent 60%), linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: clamp(2rem, 1.5rem + 4vw, 4rem) clamp(1.25rem, 1rem + 2vw, 3rem); text-align: center; margin-bottom: 3rem; } .hero h1 { margin-bottom: .5rem; } .hero-sub { color: var(--text-dim); margin: 0 auto 1.75rem; max-width: 56ch; font-size: 1.03rem; } .hero-search { display: flex; gap: .5rem; max-width: 560px; margin-inline: auto; } /* -------------------------------------------------------------- seções */ .section { margin-bottom: 3rem; } .section > h2 { margin-bottom: 1.1rem; } .page-head { margin-bottom: 1.75rem; } .page-head h1 { margin-bottom: .25rem; } .empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; color: var(--text-dim); } /* ------------------------------------------------------------ categorias */ .cat-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .cat-tile { display: flex; flex-direction: column; gap: .3rem; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; color: var(--text); transition: border-color .18s, transform .18s, background .18s; } .cat-tile:hover { border-color: var(--accent-ring); transform: translateY(-3px); background: var(--surface-2); color: var(--text); } .cat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: .35rem; background: var(--surface-3); font-size: 1.25rem; } .cat-name { font-weight: 600; letter-spacing: -.01em; } .cat-count { color: var(--text-faint); font-size: .8rem; } .cat-inline { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; } .cat-inline a { display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .38rem .85rem; font-size: .87rem; color: var(--text-dim); } .cat-inline a:hover { color: var(--text); border-color: var(--accent-ring); background: var(--surface-2); } /* ----------------------------------------------------------------- cards */ .grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .18s, transform .18s, box-shadow .18s; } .card:hover { border-color: var(--accent-ring); transform: translateY(-3px); box-shadow: var(--shadow); } .card-link { display: flex; gap: .9rem; padding: 1rem; color: var(--text); align-items: flex-start; } .card-link:hover { color: var(--text); } .card-avatar { width: 54px; height: 54px; border-radius: 14px; flex: 0 0 54px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--line-soft); } .card-avatar--fallback { display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; color: var(--accent); background: linear-gradient(140deg, var(--surface-3), var(--surface-2)); } .card-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .card-title { font-weight: 650; line-height: 1.3; letter-spacing: -.01em; } .card-desc { color: var(--text-dim); font-size: .87rem; line-height: 1.5; } .card-meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .2rem; } .chip { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim); padding: .18rem .55rem; border-radius: 999px; } .chip--gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 38%, transparent); background: var(--gold-soft); } .chip--link { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); } .members { font-size: .8rem; color: var(--text-faint); } /* --------------------------------------------------------------- toolbar */ .toolbar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: 1.25rem; } .toolbar-label { color: var(--text-faint); font-size: .84rem; margin-right: .3rem; } .toolbar-btn { font-size: .85rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--line); color: var(--text-dim); background: var(--surface); } .toolbar-btn:hover { color: var(--text); border-color: var(--accent-ring); } .toolbar-btn.is-current { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 600; } /* ------------------------------------------------------------ paginação */ .pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; } .page-btn { min-width: 42px; text-align: center; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); font-size: .92rem; } .page-btn:hover { color: var(--text); border-color: var(--accent-ring); } .page-btn.is-current { background: var(--accent); border-color: var(--accent); color: #04121c; font-weight: 700; } .page-gap { padding: .5rem .2rem; color: var(--text-faint); } /* ------------------------------------------------------- página do grupo */ .group-head { display: flex; gap: 1.5rem; flex-wrap: wrap; background: radial-gradient(ellipse 70% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.75rem; margin-bottom: 2.5rem; box-shadow: var(--shadow-sm); } .group-avatar { width: 104px; height: 104px; border-radius: 24px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--line); } .group-avatar--fallback { display: grid; place-items: center; font-size: 2.6rem; font-weight: 700; color: var(--accent); background: linear-gradient(140deg, var(--surface-3), var(--surface-2)); } .group-head-text { flex: 1 1 300px; } .group-head-text h1 { margin-bottom: .6rem; } .group-facts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid transparent; border-radius: 999px; padding: .65rem 1.4rem; font-weight: 650; font-family: inherit; font-size: .95rem; cursor: pointer; transition: background .15s, border-color .15s, transform .12s, color .15s; } .btn--primary { background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #04121c; box-shadow: 0 4px 16px rgba(42,171,238,.22); } .btn--primary:hover { filter: brightness(1.08); color: #04121c; } .btn--primary:active { transform: translateY(1px); } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--text-dim); } .btn--ghost:hover { color: var(--text); border-color: var(--accent-ring); } .btn--big { padding: .85rem 2rem; font-size: 1.02rem; } .report-line { font-size: .85rem; color: var(--text-faint); margin-top: 2.5rem; } /* ----------------------------------------------------------------- prose */ .prose { max-width: 72ch; } .prose p, .prose li { color: var(--text); } .prose h2 { margin-top: 2.25rem; } .prose ul { padding-left: 1.2rem; } .prose li { margin-bottom: .35rem; } .page-narrow { margin-inline: auto; } .intro { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin-bottom: 1.75rem; max-width: none; } .faq dt { font-weight: 650; margin-top: 1.25rem; } .faq dd { margin: .3rem 0 0; color: var(--text-dim); } /* ------------------------------------------------------------ formulário */ .form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 520px; } .form label { display: flex; flex-direction: column; gap: .4rem; font-size: .89rem; color: var(--text-dim); font-weight: 500; } .form input, .form select, .form textarea { background: var(--bg-soft); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .9rem; font-family: inherit; font-size: .95rem; transition: border-color .15s, box-shadow .15s; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .form input:disabled { opacity: .6; } .form button { align-self: flex-start; } /* -------------------------------------------------------------- age gate */ .agegate { position: fixed; inset: 0; z-index: 90; background: rgba(4, 8, 13, .93); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 1rem; } .agegate-box { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 2.25rem; max-width: 460px; text-align: center; box-shadow: var(--shadow-lg); } .agegate-box h2 { margin-bottom: .75rem; } .agegate-box p { color: var(--text-dim); font-size: .95rem; } .agegate-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; } /* --------------------------------------------------------------- rodapé */ .footer { border-top: 1px solid var(--line-soft); background: var(--bg-soft); padding-block: 3rem 2.5rem; margin-top: 3rem; } .footer nav a { color: var(--text-dim); font-size: .9rem; } .footer nav a:hover { color: var(--accent); } .footer-inner p { font-size: .875rem; margin: .4rem 0 0; color: var(--text-faint); } /* ========================================================================== RESPONSIVO Regra geral: nada pode transbordar a largura da tela, e todo alvo de toque tem no mínimo 40px. Palavra longa (link de convite, e-mail) quebra em vez de empurrar o layout. ========================================================================== */ body { overflow-wrap: break-word; } .card-title, .card-desc, .prose, .crumbs { overflow-wrap: anywhere; } /* Tablet */ @media (max-width: 900px) { .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .hero { padding: 2rem 1.25rem; } } /* Celular */ @media (max-width: 640px) { main { padding-block: 1.25rem 2.5rem; } /* Cabeçalho em duas linhas: marca + ações em cima, busca embaixo */ .topbar-inner { min-height: 0; gap: .5rem; padding-block: .6rem; } .brand { font-size: 1rem; } .brand-mark { width: 26px; height: 26px; border-radius: 8px; font-size: .85rem; } .searchbar { order: 3; max-width: none; flex-basis: 100%; } .searchbar input { padding: .55rem .9rem; font-size: .92rem; } .topnav { gap: .4rem; } .topnav .btn--sm { padding: .45rem .75rem; font-size: .82rem; } /* Alvos de toque confortáveis */ .tema-toggle { width: 40px; height: 40px; } .topnav-link, .catbar-link, .footer nav a { display: inline-flex; align-items: center; min-height: 40px; } /* Hero mais enxuto: no celular ele rouba a tela toda antes do conteúdo */ .hero { padding: 1.75rem 1.1rem; margin-bottom: 2rem; border-radius: var(--radius); } .hero h1 { font-size: 1.55rem; } .hero-sub { font-size: .95rem; margin-bottom: 1.25rem; } .hero-search { flex-direction: column; } .hero-search input, .hero-search button { width: 100%; } /* Duas colunas de categoria cabem em 375px e evitam a lista infinita */ .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .cat-tile { padding: .85rem; } .cat-icon { width: 34px; height: 34px; font-size: 1.1rem; } .cat-name { font-size: .92rem; } .grid { grid-template-columns: 1fr; } .card-link { padding: .85rem; gap: .75rem; } .card-avatar { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; } .group-head { padding: 1.15rem; gap: 1rem; } .group-avatar { width: 72px; height: 72px; border-radius: 18px; } .group-head-text h1 { font-size: 1.4rem; } .btn--big { width: 100%; padding: .8rem 1rem; } .section { margin-bottom: 2.25rem; } .prose { max-width: none; } /* Menu de categorias: painel ocupa a largura da tela */ .catmenu-panel { width: calc(100vw - 2rem); grid-template-columns: 1fr 1fr; } .pagination { gap: .3rem; } .page-btn { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } .form { max-width: none; } .auth-box { padding: 1.5rem 1.15rem; margin: 1rem auto; } .agegate-box { padding: 1.5rem 1.25rem; } } /* Celular pequeno de verdade (abaixo de 340px). Em 375px, que e a largura do iPhone SE e dos Android menores, duas colunas ainda cabem bem. */ @media (max-width: 340px) { .cat-grid { grid-template-columns: 1fr; } .brand-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } }