:root { --bg: #161c0c; --bg-2: #1f2811; --surface: #26311a; --surface-2: #2f3c20; --line: #3f4d2a; --text: #f4ecd8; --muted: #b9b69a; --gold: #c9a227; --gold-2: #e7c54d; --olive: #7d8c2f; --glow: #3a4a1a; --ink: #25300f; --dark: #3d4a1f; --on-accent: #231a00; --red: #c0392b; /* cada pote sobrescreve estas cores (includes/sides.php → style do ) */ --radius: 16px; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(1200px 600px at 75% -10%, var(--glow) 0%, transparent 60%), var(--bg); color: var(--text); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0 0 .5em; } [hidden] { display: none !important; } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; border-radius: 999px; padding: .85em 1.5em; font: 600 1rem var(--sans); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; } .btn:active { transform: scale(.97); } .btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--on-accent); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--gold) 60%, transparent); } .btn-gold:hover { box-shadow: 0 10px 28px -6px rgba(201,162,39,.8); } .btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--gold); } .btn-link { background: none; color: var(--muted); padding: .6em; } .btn-sm { padding: .55em 1.1em; font-size: .9rem; } .btn-block { width: 100%; } .tag { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-2); margin-bottom: .8em; } .muted { color: var(--muted); } .small { font-size: .85rem; } /* ---------- topo ---------- */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 12px max(16px, calc((100vw - 1180px) / 2)); background: rgba(22,28,12,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 1.25rem; } .brand svg { width: 38px; height: 28px; } .brand b { color: var(--gold-2); } .topbar nav { display: flex; gap: 20px; margin-left: auto; } .topbar nav a { text-decoration: none; color: var(--muted); font-weight: 500; font-size: .95rem; } .topbar nav a:hover { color: var(--text); } /* ---------- hero ---------- */ .hero { max-width: 1180px; margin: 0 auto; padding: 56px 16px 40px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; } .hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; } .hero h1 em { color: var(--gold-2); font-style: italic; } .hero-text > p { font-size: 1.1rem; color: var(--muted); max-width: 34em; } .hero-text > p b { color: var(--text); } .stats { display: flex; gap: 28px; margin: 28px 0; flex-wrap: wrap; } .stats strong { display: block; font: 800 2rem var(--serif); color: var(--gold-2); } .stats span { font-size: .85rem; color: var(--muted); } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hint { font-size: .85rem; color: var(--muted); margin-top: 18px; } .jar-wrap { position: relative; } .jar { width: 100%; max-width: 480px; display: block; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.5)); } .jar .label-small { font: 700 11px var(--sans); letter-spacing: .2em; } .jar .label-big { font: 800 26px var(--serif); letter-spacing: .04em; } .jar .label-long { font-size: 19px; letter-spacing: 0; } /* pote de azeitona: "CONSERVADA" encostava na borda do rótulo */ .jar-pot .label-big { font-size: 24px; letter-spacing: .03em; } /* vidro de pimenta: rótulo mais estreito */ .jar-bottle .label-small { font-size: 8.5px; letter-spacing: .14em; } .jar-bottle .label-big { font-size: 23px; } .jar-bottle .label-long { font-size: 15px; } .jar-bottle .label-cap { font-size: 7px; letter-spacing: .08em; } .jar .label-cap { font: 600 8.5px var(--sans); letter-spacing: .14em; opacity: .6; } .jar .label { pointer-events: none; } /* conteúdo boiando devagar, como na água; cada item com ritmo próprio (--fd duração, --fa atraso) */ .jar .flutua { animation: flutua var(--fd, 5s) ease-in-out var(--fa, 0s) infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes flutua { 0% { transform: translate(-1.2px, 1.4px) rotate(-5deg); } 35% { transform: translate(0.8px, -0.6px) rotate(2deg); } 70% { transform: translate(-0.4px, -1.8px) rotate(-1deg); } 100% { transform: translate(1.3px, -0.8px) rotate(5deg); } } /* segurar e arrastar chacoalha o pote (pote-agito.js) */ .jar { touch-action: pan-y; cursor: grab; transform-origin: 50% 92%; } .jar.agitando { cursor: grabbing; } .jar.agitando .olive { pointer-events: none; } .jar-wrap:has(.jar.agitando) .olive-tip { display: none; } .agito-sensor { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px auto 0; padding: 8px 16px; border-radius: 99px; border: 1px dashed color-mix(in srgb, var(--gold) 60%, var(--line)); background: transparent; color: var(--gold-2); font: 700 .85rem var(--sans); cursor: pointer; } .agito-sensor.is-on { border-style: solid; background: color-mix(in srgb, var(--gold) 14%, transparent); } .agito-dica { text-align: center; margin: 8px 0 0; font-size: .78rem; color: var(--muted); } .jar-capacity { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; font-size: .75rem; color: var(--muted); opacity: .75; } .jar-capacity b { font-weight: 600; color: var(--text); } .jar-meter { width: 90px; height: 4px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .jar-meter i { display: block; height: 100%; background: var(--gold); border-radius: 99px; } .jar .bubbles circle { fill: #fff; opacity: .25; animation: bubble 6s infinite ease-in; } .jar .bubbles circle:nth-child(2) { animation-delay: 1.5s; } .jar .bubbles circle:nth-child(3) { animation-delay: 3s; } .jar .bubbles circle:nth-child(4) { animation-delay: 4.5s; } @keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .35; } 100% { transform: translateY(-340px); opacity: 0; } } .olive { cursor: pointer; transition: filter .15s; } .olive:hover, .olive.is-active { filter: brightness(1.35) drop-shadow(0 0 4px var(--gold-2)); } .olive.is-mine .flutua > g:first-child > :first-child { stroke: var(--gold-2); stroke-width: 2; } .olive.drop { animation: drop 1.1s cubic-bezier(.3,.1,.5,1.3) both; } @keyframes drop { from { transform: translateY(-460px) rotate(-120deg); } to { transform: none; } } /* selo pequeno na azeitona (bandeira, símbolo ou imagem enviada) */ .olive-selo circle { fill: #f4ecd8; stroke: var(--gold); stroke-width: .9; } .olive-selo text { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; } /* selo sobre a foto (balão, mural, certificado) */ .avatar-wrap { position: relative; display: inline-block; flex: none; line-height: 0; } .selo-badge { position: absolute; right: -3px; bottom: -3px; width: 42%; height: 42%; min-width: 17px; min-height: 17px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #f4ecd8; box-shadow: 0 0 0 2px var(--gold), 0 2px 4px rgba(0,0,0,.35); } .selo-badge img, .selo-badge svg { width: 100%; height: 100%; object-fit: cover; display: block; } .selo-badge span { font-size: 11px; line-height: 1; } .cert-photo .selo-badge { right: auto; left: -8px; bottom: -4px; } .cert-photo .selo-badge span { font-size: 26px; } .olive-play circle { fill: var(--gold-2); stroke: var(--on-accent); stroke-width: 1; } .olive-play path { fill: var(--on-accent); } .olive-play { animation: play-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes play-pulse { 50% { opacity: .55; } } .olive-tip.has-video { width: 280px; } .olive-tip.is-playing { width: min(420px, calc(100vw - 32px)); } .olive-tip.is-playing.vertical { width: 300px; } .olive-tip.below { transform: translate(-50%, 14px); } /* "ponte" invisível cobrindo o espaço entre a azeitona e o balão */ .olive-tip::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; } .olive-tip.below::after { top: auto; bottom: 100%; } .tip-video { margin-top: 10px; } .tip-video .video-cover { border-radius: 8px; } .tip-video .play-btn { width: 46px; height: 46px; } .tip-video .play-btn::after { left: 18px; top: 13px; border-left-width: 14px; border-top-width: 10px; border-bottom-width: 10px; } .olive-tip .video-frame { border-radius: 8px; } .olive-tip .video-frame.vertical { max-width: none; max-height: min(60vh, 480px); } .tip-close { position: absolute; top: 4px; right: 8px; border: 0; background: none; cursor: pointer; font-size: 1.4rem; line-height: 1; color: #6b6a55; } .tip-close:hover { color: #1f2610; } .olive-tip { position: absolute; z-index: 5; width: 240px; background: var(--text); color: #1f2610; border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); transform: translate(-50%, calc(-100% - 14px)); font-size: .85rem; } .olive-tip b { font-family: var(--serif); font-size: 1rem; display: block; } .olive-tip q { display: block; margin-top: 10px; font-style: italic; } .olive-tip small { color: #6b6a55; line-height: 1.35; display: block; } .tip-head { display: flex; gap: 12px; align-items: center; } .tip-photo { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #1f2610; box-shadow: 0 0 0 3px var(--gold); } .avatar-photo { object-fit: cover; background: var(--surface-2); } /* ---------- seções ---------- */ .section { max-width: 1180px; margin: 0 auto; padding: 72px 16px; } .section.alt { max-width: none; background: var(--bg-2); border-block: 1px solid var(--line); } .section.alt > * { max-width: 1148px; margin-left: auto; margin-right: auto; } .section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; } .section-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0; } .tabs { display: flex; background: var(--surface); border-radius: 999px; padding: 4px; } .tab { border: 0; background: none; color: var(--muted); font: 600 .9rem var(--sans); padding: .5em 1.1em; border-radius: 999px; cursor: pointer; } .tab.active { background: var(--surface-2); color: var(--text); } /* ---------- mural ---------- */ .composer { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 24px; } .composer-avatar, .post-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #1f2610; background: var(--muted); } .composer-body { flex: 1; } .composer textarea { width: 100%; min-height: 64px; resize: vertical; border: 0; background: transparent; color: var(--text); font: 1.05rem/1.5 var(--sans); outline: none; } .composer-foot { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; } .feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 18px; align-items: start; grid-auto-flow: dense; } .post { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; animation: fadein .4s both; } /* ao tocar o vídeo, o quadro ocupa 2 colunas */ @media (min-width: 700px) { .post.is-playing { grid-column: span 2; } } .post.is-playing { border-color: var(--gold); box-shadow: 0 10px 40px -10px rgba(0,0,0,.6); } .post-video { margin: 0 0 14px; } .video-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #000; } .video-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .15s; } .video-cover:hover img { opacity: 1; } .video-cover.tiktok { background: linear-gradient(135deg, #111 0%, #1b1b1b 50%, #0d0d0d 100%); } .tiktok-cover { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.2rem; color: #fff; opacity: .15; text-shadow: -3px -2px 0 #25f4ee, 3px 2px 0 #fe2c55; } .play-btn { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(201,162,39,.95); box-shadow: 0 6px 20px rgba(0,0,0,.5); transition: transform .15s; } .play-btn::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 18px solid var(--on-accent); border-top: 12px solid transparent; border-bottom: 12px solid transparent; } .video-cover:hover .play-btn { transform: translate(-50%, -50%) scale(1.08); } .video-badge { position: absolute; left: 10px; bottom: 10px; padding: .2em .6em; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font: 600 .72rem var(--sans); } .video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; } .video-frame.vertical { aspect-ratio: 9 / 16; max-width: 340px; max-height: 80vh; margin: 0 auto; } .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-close { display: block; margin: 8px auto 0; border: 0; background: none; color: var(--muted); font: 600 .8rem var(--sans); cursor: pointer; } .video-close:hover { color: var(--text); } .composer-video { margin: 4px 0 8px; font-size: .85rem; color: var(--gold-2); } .composer-video .warn { color: #e8a37c; } #composer-count.over { color: #e8735f; font-weight: 700; } .post.is-new { border-color: var(--gold); } @keyframes fadein { from { opacity: 0; transform: translateY(8px); } } .post-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .post-head b { display: block; } .post-head small { color: var(--muted); font-size: .8rem; } .post p { font: 600 1.2rem/1.35 var(--serif); margin: 0 0 14px; } .post-actions { display: flex; gap: 6px; } .post-actions button { border: 0; background: var(--bg-2); color: var(--muted); border-radius: 999px; padding: .4em .9em; font: 600 .85rem var(--sans); cursor: pointer; } .post-actions button:hover { color: var(--text); } .post-actions .liked { background: var(--olive); color: #fff; } .btn-more { display: flex; margin: 12px auto 0; } .avatar-direita-verde { background: radial-gradient(circle at 35% 35%, #b5c25a, #4f5a18); } .avatar-direita-preta { background: radial-gradient(circle at 35% 35%, #6a5a6e, #140f15); color: #fff; } .avatar-direita-grande { background: radial-gradient(circle at 35% 35%, #d2de6e, #55661a); } .avatar-direita-recheada { background: radial-gradient(circle at 80% 50%, var(--red) 18%, transparent 20%), radial-gradient(circle at 35% 35%, #b5c25a, #4f5a18); } .avatar-esquerda-vermelha { background: radial-gradient(circle at 35% 35%, #ff6a50, #8e140c); color: #fff; } .avatar-esquerda-biquinho { background: radial-gradient(circle at 35% 35%, #ffc063, #c2410c); } .avatar-esquerda-malagueta { background: radial-gradient(circle at 35% 35%, #e0405a, #5a0610); color: #fff; } .avatar-esquerda-grande { background: radial-gradient(circle at 35% 35%, #ff8a70, #a3120a); color: #fff; } /* ---------- comentários (os dois lados) ---------- */ .post-actions { flex-wrap: wrap; } .post-actions button.active { background: var(--surface-2); color: var(--text); } .post-actions .visitors { color: var(--gold-2); } .comments { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .comment { display: flex; gap: 10px; align-items: flex-start; } .comment-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #1f2610; } .comment .selo-badge, .comment-form .selo-badge { min-width: 13px; min-height: 13px; right: -4px; bottom: -4px; } .comment .selo-badge span, .comment-form .selo-badge span { font-size: 8px; } .comment-body { flex: 1; min-width: 0; background: var(--bg-2); border-radius: 4px 12px 12px 12px; padding: 8px 12px; } .comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; } .comment-body p { margin: 2px 0 0; font: 400 .92rem/1.45 var(--sans); } /* visitante do outro pote: vem com as cores do lado dele (variáveis no style do elemento) */ .comment.is-visitor .comment-body { background: var(--surface); box-shadow: inset 3px 0 0 var(--gold); color: var(--text); } .side-tag { font-size: .68rem; font-weight: 700; padding: .15em .55em; border-radius: 99px; background: var(--gold); color: var(--on-accent); white-space: nowrap; } .comment-empty { color: var(--muted); font-size: .85rem; margin: 0; } .comment-body p { white-space: pre-line; } /* mantém as quebras de linha do comentário */ /* ações do comentário (citar / apagar) */ .comment-actions { display: flex; gap: 12px; margin-top: 4px; } .comment-actions:empty { display: none; } .comment-actions button { background: none; border: 0; padding: 2px 0; cursor: pointer; font: 600 .74rem var(--sans); color: var(--muted); } .comment-actions button:hover { color: var(--gold-2); } .comment-actions .comment-apagar:hover, .comment-actions .comment-apagar.confirmar { color: #ff7a6b; } /* comentário apagado: fica o aviso no lugar */ .comment.is-apagado .comment-body { background: transparent; border: 1px dashed var(--line); } .comment.is-apagado p { color: var(--muted); font-style: italic; font-size: .85rem; } .comment-avatar-apagado { background: var(--bg-2); font-size: .8rem; } /* citação dentro do comentário (clicável: leva ao original) */ .comment-cita { display: flex; flex-direction: column; gap: 1px; width: 100%; margin: 4px 0 2px; padding: 5px 10px; text-align: left; cursor: pointer; background: color-mix(in srgb, var(--gold) 10%, transparent); border: 0; border-left: 3px solid var(--gold); border-radius: 6px; color: var(--muted); font: .78rem/1.35 var(--sans); overflow-wrap: anywhere; } .comment-cita b { color: var(--gold-2); font-size: .74rem; } .comment-cita:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); } .comment.destaque .comment-body { animation: comentario-destaque 1.6s ease-out; } @keyframes comentario-destaque { 0%, 30% { box-shadow: 0 0 0 2px var(--gold-2); } 100% { box-shadow: 0 0 0 2px transparent; } } /* "Respondendo a Fulano" em cima da caixa */ .comment-citando { display: flex; align-items: flex-start; gap: 8px; margin: 8px 8px 0; padding: 6px 8px 6px 10px; border-left: 3px solid var(--gold); border-radius: 6px; background: color-mix(in srgb, var(--gold) 12%, transparent); font-size: .78rem; color: var(--muted); } .comment-citando span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .comment-citando b { color: var(--text); } .comment-citando button { flex: none; background: none; border: 0; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .comment-citando button:hover { color: var(--text); } /* "ver comentários anteriores" e carregando */ .comment-more { align-self: center; background: none; border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; color: var(--gold-2); font: 600 .8rem var(--sans); cursor: pointer; } .comment-more:hover { border-color: var(--gold); } .comment-loading { margin: 0; text-align: center; font-size: .82rem; color: var(--muted); } /* texto sem espaço ("kkkkkkkk…", links longos) quebra a linha em vez de estourar a caixa */ .comment-body p, .post p, .made-comment p, .comment-box textarea, .composer textarea, .olive-tip q, .profile-quote { overflow-wrap: anywhere; word-break: break-word; } .comment-body, .post, .made-comment { min-width: 0; } /* caixa de comentário: 3 linhas, rodapé com dica, contador e botão enviar redondo */ .comment-form { display: flex; gap: 10px; align-items: flex-start; } .comment-box { flex: 1; min-width: 0; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; } .comment-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); } .comment-box textarea { display: block; width: 100%; min-height: calc(3 * 1.45em + 14px); max-height: 14em; resize: vertical; background: transparent; border: 0; outline: none; color: var(--text); font: .92rem/1.45 var(--sans); padding: 10px 12px 4px; } .comment-box textarea::placeholder { color: var(--muted); opacity: .8; } .comment-box-foot { display: flex; align-items: center; gap: 10px; padding: 2px 6px 6px 12px; } .comment-box-foot .comment-hint { flex: 1; min-width: 0; padding: 0; } .comment-count { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; } .comment-count.over { color: #ff7a6b; font-weight: 700; } .comment-send { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; background: var(--gold); color: var(--on-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--gold) 35%, transparent); transition: transform .15s, opacity .15s, box-shadow .15s; } .comment-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: translateX(-1px); } .comment-send:hover:not(:disabled) { transform: scale(1.08) rotate(-8deg); } .comment-send:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; } .comment-send:disabled { opacity: .35; cursor: default; box-shadow: none; } .comment-cta { margin: 0; font-size: .85rem; color: var(--muted); line-height: 2; } .comment-cta a { color: var(--gold-2); } .section-sub { margin: 8px 0 0; color: var(--muted); font-size: .9rem; } /* ---------- topo: link para o outro pote ---------- */ .side-switch { display: flex; align-items: center; gap: 6px; text-decoration: none; padding: .35em .9em .35em .5em; border-radius: 99px; font-size: .82rem; font-weight: 600; color: var(--gold-2); background: var(--surface); border: 1px solid var(--line); } .side-switch:hover { border-color: var(--gold); } .side-switch svg { width: 30px; height: 22px; } /* ---------- página inicial: escolha do pote ---------- */ .choose-page { background: #120e0a; } .choose { max-width: 1180px; margin: 0 auto; padding: 40px 16px 24px; } .choose-head { text-align: center; margin-bottom: 28px; } .choose-head h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: .2em; } .choose-head p { color: #b9ad9c; max-width: 36em; margin: 0 auto; } .choose-page .tag { color: #e7c54d; } .choose-sides { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .side-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 28px 24px 32px; border-radius: 24px; text-decoration: none; color: var(--text); background: radial-gradient(600px 400px at 50% 0%, var(--glow), transparent 70%), var(--bg); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; } .side-card:hover, .side-card:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 24px 60px -20px var(--gold); outline: none; } .side-card .tag { color: var(--gold-2); margin: 0; } .side-info { display: flex; flex-direction: column; align-items: center; gap: 8px; } .side-jar { width: min(280px, 70%); } .side-jar .jar { max-width: none; transition: transform .35s; } .side-card:hover .side-jar .jar { transform: rotate(-3deg) scale(1.03); } .side-card h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; } .side-card h2 em { color: var(--gold-2); font-style: italic; } .side-motto { margin: 0; color: var(--muted); font: italic 600 1.1rem var(--serif); } .side-count { color: var(--muted); font-size: .9rem; } .side-count b { color: var(--text); font-size: 1.1rem; } .side-card .btn { margin-top: 6px; } .versus { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem var(--serif); color: #f4ecd8; background: #120e0a; border: 3px solid #f4ecd8; box-shadow: 0 0 0 6px #120e0a; pointer-events: none; } .scoreboard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; max-width: 640px; margin: 32px auto 0; color: #f4ecd8; } .score-side { font-size: 1.1rem; color: var(--gold-2); } .score-side b { font-family: var(--serif); font-size: 1.5rem; } .score-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; background: #2a221b; } .score-bar i { display: block; height: 100%; } .score-bar i:last-child { flex: 1; } .scoreboard small { grid-column: 1 / -1; text-align: center; color: #9d9282; } .choose-page .footer { border-color: #2a221b; color: #9d9282; } /* ---------- ranking ---------- */ .ranking-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } .ranking { list-style: none; margin: 0; padding: 0; counter-reset: r; } .ranking li { display: grid; grid-template-columns: 28px 40px 1fr 50px; align-items: center; gap: 12px; padding: 8px 0; counter-increment: r; } .ranking li::before { content: counter(r) "º"; color: var(--muted); font-size: .85rem; } .ranking .uf { font-weight: 700; } .ranking .bar { height: 12px; background: var(--surface); border-radius: 99px; overflow: hidden; } .ranking .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--olive), var(--gold)); border-radius: 99px; } .ranking .qtd { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; } .newest ul { list-style: none; margin: 0; padding: 0; } .newest li a { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); } .newest li a:hover { background: var(--surface); } .newest .when { color: var(--gold-2); font-weight: 600; } .newest .num { font: 800 1.1rem var(--serif); color: var(--gold-2); } .newest small { display: block; color: var(--muted); } /* ---------- como funciona ---------- */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .step > b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--on-accent); font-family: var(--serif); margin-bottom: 14px; } .step p { color: var(--muted); margin: 0; } .footer { text-align: center; padding: 32px 16px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); } /* ---------- modal ---------- */ .modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; } .modal-backdrop { position: absolute; inset: 0; background: rgba(8,10,4,.75); backdrop-filter: blur(4px); } .modal-card { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 28px; animation: pop .25s both; } @keyframes pop { from { opacity: 0; transform: scale(.95); } } .modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: none; color: var(--muted); font-size: 1.8rem; cursor: pointer; } .modal h2 { font-size: 1.7rem; } .field { display: block; margin-bottom: 14px; } .field span { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; } .field input, .field select, .field textarea { width: 100%; background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text); padding: .7em .85em; font: 1rem var(--sans); outline: none; resize: vertical; } .field :focus { border-color: var(--gold); } /* ---------- carrinho ---------- */ .cart { background: var(--surface); border: 1px solid var(--gold); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; } .cart-title { display: block; font-size: .8rem; color: var(--gold-2); margin-bottom: 6px; } .cart-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .cart-list li { display: flex; align-items: center; gap: 10px; font-size: .88rem; } .cart-list svg { flex: none; width: 34px; height: 24px; } .cart-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-price { font-weight: 700; font-variant-numeric: tabular-nums; } .cart-remove { border: 0; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0 2px; } .cart-remove:hover { color: var(--text); } .cart-next { margin: 10px 0 0; font-size: .78rem; color: var(--muted); } .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 16px; } .qty-row > span { font-size: .8rem; font-weight: 600; color: var(--muted); } .qty-row small { font-weight: 400; } .qty { display: flex; align-items: center; background: var(--surface); border: 1.5px solid var(--line); border-radius: 99px; overflow: hidden; } .qty button { width: 36px; height: 34px; border: 0; background: none; color: var(--text); font-size: 1.2rem; cursor: pointer; } .qty button:hover { background: var(--surface-2); color: var(--gold-2); } .qty input { width: 44px; border: 0; background: none; color: var(--text); text-align: center; font: 700 1rem var(--sans); outline: none; -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .buy-actions { display: flex; flex-direction: column; gap: 8px; } .buy-actions small { font-weight: 400; opacity: .7; } .bought-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; } .bought-list button { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; padding: 6px 10px; font: .85rem var(--sans); } .bought-list svg { flex: none; width: 30px; height: 21px; } .bought-list li.active button { border-color: var(--gold); background: var(--surface-2); } .selo-field { margin-bottom: 16px; } .selo-field > b { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; } .selo-field > b small { font-weight: 400; } .selo-picker { display: flex; flex-wrap: wrap; gap: 6px; } .selo-picker label { position: relative; cursor: pointer; } .selo-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; } .selo-opt { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 1.1rem; line-height: 1; background: var(--surface); border: 1.5px solid var(--line); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", var(--sans); } .selo-opt svg, .selo-opt img { width: 100%; height: 100%; object-fit: cover; display: block; } .selo-none { color: var(--muted); font-family: var(--sans); } .selo-picker label:hover .selo-opt { border-color: var(--gold); } .selo-picker input:checked + .selo-opt, .selo-opt.is-checked { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); } .selo-picker input:focus-visible + .selo-opt { outline: 2px solid var(--gold-2); outline-offset: 2px; } .selo-upload .selo-opt { border-style: dashed; color: var(--gold-2); font: 600 1.3rem var(--sans); } .selo-upload .selo-opt.is-checked, .selo-upload .selo-opt:has(img) { border-style: solid; } .selo-hint { display: block; margin-top: 6px; font-size: .75rem; color: var(--muted); } .photo-row { display: flex; gap: 14px; align-items: flex-start; } .photo-row .field { flex: 1; } .photo-pick { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; } .photo-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; } .photo-pick small { font-size: .72rem; color: var(--muted); } .photo-preview { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--surface); border: 1.5px dashed var(--line); color: var(--muted); } .photo-preview svg { width: 28px; height: 28px; } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-pick:hover .photo-preview, .photo-pick input:focus-visible + .photo-preview { border-color: var(--gold); color: var(--gold-2); } .newest .avatar-photo, .newest .post-avatar { width: 40px; height: 40px; } .row.two { display: grid; grid-template-columns: 1fr 90px; gap: 12px; } .olive-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; } .olive-picker input { position: absolute; opacity: 0; } .olive-picker span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .9rem; } .olive-picker svg { width: 60px; height: 42px; } .pick-price { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--gold-2); white-space: nowrap; } .pick-price small { display: block; text-align: center; font-weight: 500; color: var(--muted); } .price small { font-size: .45em; font-family: var(--sans); font-weight: 500; color: var(--muted); } .olive-picker input:checked + span { border-color: var(--gold); background: var(--surface); } .olive-picker input:focus-visible + span { outline: 2px solid var(--gold-2); } .suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 18px; } .chip { border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: .3em .8em; font: .78rem var(--sans); cursor: pointer; } .chip:hover { color: var(--text); border-color: var(--gold); } .pix { display: flex; gap: 20px; align-items: center; margin: 18px 0 22px; } .qr { flex: none; width: 140px; height: 140px; background: #fff; padding: 8px; border-radius: 10px; display: grid; grid-template-columns: repeat(21, 1fr); } .qr i { background: #111; } .qr i.o { background: transparent; } /* Pix de verdade: QR em SVG (gerado no servidor), copia e cola, avisos */ .qr.qr-real { display: block; width: 184px; height: 184px; padding: 6px; } .qr-real svg { display: block; width: 100%; height: 100%; } .qr-real svg path { fill: #111; } .pix-dados .price { margin: 4px 0 14px; } .pix-dados .muted { margin: -6px 0 16px; } .pix-code textarea { width: 100%; resize: none; font: 500 .78rem/1.4 ui-monospace, Consolas, monospace; word-break: break-all; } .pix-aviso { margin: 12px 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: .88rem; } .pedidos-pendentes { padding-top: 0; padding-bottom: 0; } .pend-box { margin-top: 18px; padding: 16px 18px; border: 1.5px dashed var(--gold); border-radius: 16px; background: var(--surface); } .pend-box h3 { margin: 0 0 10px; font-size: 1.05rem; } .pend-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .pend-box li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); } .pend-box li small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; } .pend-box .muted { margin: 10px 0 0; } .profile-badges .badge-pendente { border-style: dashed; } .pend-box h3 + ul li > span:first-child svg { width: 22px; height: 22px; vertical-align: -5px; } .pend-acoes { display: flex; gap: 6px; flex: none; } .pend-espera { flex: none; font-size: 1.2rem; } /* presente na compra */ .presente-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; cursor: pointer; } .presente-check input { margin-top: 4px; accent-color: var(--gold); } .presente-check small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; } .presente-check:has(input:checked) { border-color: var(--gold); background: var(--bg-2); } /* página do presente (/presente) */ .presente-card { text-align: center; } .presente-item { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 14px 0 6px; } .presente-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; } .presente-meta { color: var(--muted); font-size: .9rem; margin-top: -6px; } .presente-frase { font-style: italic; margin: 10px 0 16px; } /* perfil: as azeitonas da pessoa */ .profile-itens { grid-column: 1 / -1; margin-top: 18px; } /* linha inteira (senão alarga a coluna da foto) */ .profile-itens h3 { font-size: 1.05rem; margin: 0 0 8px; } .profile-itens ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .profile-itens [data-mais-itens] { margin-top: 10px; } .profile-itens li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); } .profile-itens li > svg { width: 30px; height: 30px; flex: none; } .profile-itens li.is-soon { border-color: var(--gold); } .profile-itens li.is-expired { opacity: .75; } .pi-info { flex: 1; min-width: 180px; } .pi-info b { display: block; font-size: .95rem; } .pi-info small { color: var(--muted); font-size: .8rem; } .pi-acoes { display: flex; flex-wrap: wrap; gap: 6px; } .profile-itens .validity-rule { margin: 8px 0 0; font-size: .8rem; color: var(--muted); } .perfil-foto-ini { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 700; border-radius: 50%; } /* cadastro na compra: quem já comprou só escolhe o tipo */ .cadastro-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 16px 0; padding: 14px 16px; border: 1.5px solid var(--gold); border-radius: 16px; background: var(--bg-2); } .cadastro-card .avatar-wrap { flex: none; } .cadastro-foto { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 700; } .cadastro-dados { flex: 1; min-width: 160px; } .cadastro-dados > * { display: block; } .cadastro-dados small { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .cadastro-dados b { font-size: 1.1rem; } .cadastro-dados span { color: var(--muted); font-size: .88rem; } .cadastro-dados q { margin-top: 4px; font-style: italic; font-size: .9rem; } .cadastro-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .cadastro-acoes .btn-link { padding: 2px 0; font-size: .85rem; } .price { font: 800 2rem var(--serif); color: var(--gold-2); margin: 0; } /* ---------- certificado ---------- */ .cert { position: relative; background: #f4ecd8; color: var(--ink); border-radius: 14px; padding: 26px 22px 22px; text-align: center; box-shadow: inset 0 0 0 6px #f4ecd8, inset 0 0 0 8px var(--gold), inset 0 0 0 12px #f4ecd8, inset 0 0 0 13px var(--dark); margin: 12px 0 18px; } .cert small { display: block; letter-spacing: .2em; font-weight: 700; font-size: .7rem; color: var(--dark); } .cert-photo { position: relative; width: 112px; height: 112px; margin: 14px auto 6px; } .cert-avatar { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font: 800 2.2rem var(--serif); color: #1f2610; box-shadow: 0 0 0 4px var(--gold); } .cert-photo > svg { position: absolute; right: -18px; bottom: -6px; width: 52px; height: 38px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); } .cert .cert-name { font: 800 1.7rem var(--serif); margin: 4px 0; } .cert .cert-since { font: 600 1rem var(--sans); } .cert .cert-since b { font-family: var(--serif); font-size: 1.35rem; display: block; color: var(--dark); } .cert q { display: block; font: italic 600 1.05rem var(--serif); margin: 14px 0 10px; } .cert .cert-foot { display: flex; justify-content: space-between; font-size: .75rem; color: #6b6a55; border-top: 1px dashed #b9b69a; padding-top: 10px; } .share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .share .btn { font-size: .9rem; padding: .7em 1em; } .share .wide { grid-column: 1 / -1; } /* ---------- toast ---------- */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--text); color: #1f2610; padding: .8em 1.3em; border-radius: 22px; font-weight: 600; width: max-content; max-width: min(92vw, 520px); text-align: center; /* avisos longos quebram em linhas, sem virar bola */ box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: pop .2s both; } /* ---------- links de nome (vão para o perfil) ---------- */ .name-link { font-weight: 700; color: var(--text); text-decoration: none; display: block; } .comment-head .name-link { display: inline; } .name-link:hover { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; } .tip-profile { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .8rem; color: var(--dark); } /* ---------- perfil ---------- */ .profile-hero { max-width: 1180px; margin: 0 auto; padding: 40px 16px 8px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px; align-items: start; } .profile-card { position: relative; overflow: hidden; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } .profile-cover { position: relative; height: 170px; overflow: hidden; background: radial-gradient(500px 220px at 20% 0%, color-mix(in srgb, var(--gold-2) 55%, transparent), transparent 70%), linear-gradient(135deg, var(--olive), var(--glow) 55%, var(--bg)); } .profile-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; } .profile-number { position: absolute; right: 22px; top: 16px; font: 800 3.4rem/1 var(--serif); color: #fff; opacity: .22; letter-spacing: -.02em; } .profile-main { padding: 0 32px 30px; display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; align-items: end; } .profile-avatar { position: relative; margin-top: -72px; grid-row: span 1; } .profile-photo { width: 144px; height: 144px; border-radius: 50%; display: grid; place-items: center; font: 800 3rem var(--serif); color: #1f2610; box-shadow: 0 0 0 6px var(--surface), 0 0 0 9px var(--gold), 0 18px 30px rgba(0,0,0,.45); } .profile-avatar .selo-badge { right: auto; left: 2px; bottom: 6px; width: 40px; height: 40px; } .profile-avatar .selo-badge span { font-size: 20px; } .profile-item { position: absolute; right: -14px; bottom: -2px; width: 64px; height: 46px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); } .profile-item svg { width: 100%; height: 100%; } .profile-id { min-width: 0; padding-bottom: 6px; } .profile-id h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin: 0; line-height: 1.1; } .profile-meta { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .9rem; } .profile-meta span { padding: .3em .8em; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); white-space: nowrap; } .profile-since { grid-column: 1 / -1; justify-self: start; margin-top: 18px; display: flex; align-items: baseline; gap: 12px; padding: 10px 18px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--gold); } .profile-since small { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); } .profile-since b { font: 800 1.6rem var(--serif); } .profile-quote { grid-column: 1 / -1; margin: 22px 0 0; padding: 18px 22px; font: italic 600 clamp(1.2rem, 2.4vw, 1.6rem)/1.35 var(--serif); background: var(--bg-2); border-left: 4px solid var(--gold); border-radius: 4px 16px 16px 4px; } .profile-badges { grid-column: 1 / -1; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .profile-badges li { padding: .35em .85em; border-radius: 99px; font-size: .82rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); } .profile-badges .badge-voce { background: var(--gold); color: var(--on-accent); border-color: var(--gold); } .profile-badges .badge-fundador { border-color: var(--gold-2); color: var(--gold-2); } .profile-validity { grid-column: 1 / -1; margin-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: .88rem; color: var(--muted); } .profile-validity b { color: var(--text); } .validity-bar { height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .validity-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); } .profile-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .profile-missing { padding: 60px 32px; text-align: center; } .profile-side { position: sticky; top: 84px; } .profile-jar { background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 20px 20px 16px; text-align: center; } .profile-jar h3 { margin: 0 0 6px; font-size: 1.1rem; } .profile-jar .jar { max-width: 300px; } .profile-jar-caption { margin: 8px 0 0; font-size: .82rem; color: var(--muted); } .olive.is-profile { filter: brightness(1.25) drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--gold-2)); animation: profile-pulse 1.6s ease-in-out infinite; } @keyframes profile-pulse { 50% { filter: brightness(1.45) drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--gold-2)); } } .profile-stats-wrap { padding-top: 24px; padding-bottom: 0; } .profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; } .stat-card span { grid-row: span 2; font-size: 1.6rem; } .stat-card b { font: 800 1.7rem/1 var(--serif); color: var(--gold-2); } .stat-card small { color: var(--muted); font-size: .8rem; } .made-comments { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .made-comment { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--text); } .made-comment.is-away { box-shadow: inset 4px 0 0 var(--gold); } .made-where { font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .made-where .name-link { display: inline; } .made-where q { font-style: italic; } .made-here { font-size: .68rem; font-weight: 700; padding: .15em .55em; border-radius: 99px; background: var(--surface-2); } .made-comment p { margin: 8px 0 0; font: 600 1.05rem/1.4 var(--serif); } .my-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .my-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; } .my-item:hover, .my-item.current { border-color: var(--gold); } .my-item svg { flex: none; width: 48px; height: 34px; } .my-item small { display: block; color: var(--muted); font-size: .78rem; } @media (max-width: 900px) { .profile-hero { grid-template-columns: 1fr; } .profile-side { position: static; } .profile-main { padding: 0 20px 24px; } } @media (max-width: 520px) { .profile-main { grid-template-columns: 1fr; justify-items: center; text-align: center; } .profile-photo { width: 120px; height: 120px; } .profile-since { justify-self: center; } .profile-meta { justify-content: center; } .profile-itens { text-align: left; justify-self: stretch; } .profile-actions, .profile-badges { justify-content: center; } } /* ---------- enquete no pote ---------- */ /* logo abaixo do mural (que já deixa espaço embaixo) e antes da faixa do placar */ .poll-section { padding-top: 0; } .poll { position: relative; max-width: 760px; margin: 0 auto; padding: 28px 30px; background: radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 70%), var(--surface); border: 1px solid var(--gold); border-radius: 24px; box-shadow: 0 24px 50px -30px rgba(0,0,0,.7); } .poll-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 6px; } /* compartilhar a enquete (baixa a imagem: Stories ou paisagem) */ .poll-head { position: relative; padding-right: 52px; } .poll-share { position: absolute; top: 0; right: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); cursor: pointer; } .poll-share:hover { border-color: var(--gold); color: var(--gold-2); } .poll-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .poll-share-menu { position: absolute; top: 50px; right: 0; z-index: 5; display: flex; flex-direction: column; gap: 8px; min-width: 230px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.45); } .poll-share-menu[hidden] { display: none; } .poll-share-menu b { font-size: .85rem; } .mapa-head { position: relative; padding-right: 52px; } /* mesmo ícone/menu de compartilhar da enquete */ .poll-desc { margin: 0 0 6px; color: var(--muted); } .poll-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 18px 0 6px; } .poll-option { border: 1.5px solid var(--line); background: var(--bg-2); color: var(--text); cursor: pointer; border-radius: 14px; padding: 14px 16px; text-align: left; font: 600 1rem var(--sans); transition: border-color .15s, transform .15s; } .poll-option:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-2px); } .poll-option:disabled { opacity: .6; cursor: wait; } .poll-results { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .poll-row { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 5px; } .poll-row b { font-family: var(--serif); color: var(--gold-2); } .poll-results li.mine .poll-row span { color: var(--gold-2); } .poll-bar { display: flex; height: 12px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .poll-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width .6s; } .poll-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 14px 0 0; font-size: .85rem; color: var(--muted); } .poll-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .poll-legend b { color: var(--text); } .poll-note { margin: 18px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--bg-2); color: var(--gold-2); font-weight: 600; } .poll-foot { margin: 16px 0 0; font-size: .82rem; color: var(--muted); } .poll-login { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--gold); font-size: .92rem; } .poll-login a { color: var(--gold-2); font-weight: 700; } /* ---------- tempo de assinatura (2º ano prata, 3º+ ouro): foto, certificado e perfil ---------- */ .tempo-prata { box-shadow: 0 0 0 2px #c3cad2; } .tempo-ouro { box-shadow: 0 0 0 2px #f2c94c, 0 0 10px rgba(242, 201, 76, .55); } .profile-photo.tempo-prata { box-shadow: 0 0 0 6px var(--surface), 0 0 0 10px #c3cad2, 0 18px 30px rgba(0,0,0,.45); } .profile-photo.tempo-ouro { box-shadow: 0 0 0 6px var(--surface), 0 0 0 10px #f2c94c, 0 0 28px rgba(242, 201, 76, .6), 0 18px 30px rgba(0,0,0,.45); } .cert-tempo { display: inline-block; margin-top: 6px; font-size: .78rem; font-weight: 700; padding: .2em .8em; border-radius: 99px; background: #e8dfc7; color: var(--dark); } .cert-tempo-prata { background: linear-gradient(135deg, #f4f6f8, #c3cad2); color: #3a4048; } .cert-tempo-ouro { background: linear-gradient(135deg, #fff4b8, #f2c94c); color: #5a4203; } .profile-badges .badge-tempo-prata { border-color: #c3cad2; color: #e3e7eb; } .profile-badges .badge-tempo-ouro { border-color: #f2c94c; color: #f7d977; box-shadow: 0 0 10px rgba(242, 201, 76, .25); } .profile-badges .badge-provoc { border-color: #ff6a3d; color: #ffb08a; } .profile-badges .badge-vencido { border-color: #7a2f26; color: #f3c6bd; } /* ---------- renovação ---------- */ .profile-validity .validity-rule { font-size: .82rem; } .profile-validity .btn { align-self: flex-start; margin-top: 4px; } .profile-validity.is-soon { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid var(--gold); color: var(--text); } .profile-validity.is-expired { padding: 12px 14px; border-radius: 14px; background: #3a1a17; border: 1px solid #7a2f26; color: #f3c6bd; } .renew-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); margin-bottom: 12px; } .renew-item svg { width: 56px; height: 40px; flex: none; } .renew-item small { display: block; color: var(--muted); } .renew-ok, .renew-warn { margin: 0 0 6px; padding: 10px 14px; border-radius: 12px; font-size: .92rem; line-height: 1.5; } .renew-ok { background: #1f3320; border: 1px solid #3f6b40; } .renew-warn { background: #3a2f12; border: 1px solid #6b5720; } /* ---------- provocadores do mês ---------- */ .provoc-tag { display: inline-block; margin: 2px 0; font-size: .68rem; font-weight: 700; white-space: nowrap; padding: .15em .6em; border-radius: 99px; color: #2a0a04; background: linear-gradient(90deg, #ffb347, #ff6a3d); box-shadow: 0 0 10px rgba(255, 106, 61, .35); } .olive-tip .provoc-tag { margin-top: 4px; } .provocadores h3 { margin-bottom: 4px; } .prov-sub { margin: 0 0 12px; font-size: .8rem; color: var(--muted); } .prov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .prov-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; } .prov-list li.first { background: color-mix(in srgb, #ff6a3d 14%, transparent); border: 1px solid rgba(255, 106, 61, .5); } .prov-pos { width: 26px; text-align: center; font-weight: 800; color: var(--muted); } .prov-list li.first .prov-pos { font-size: 1.2rem; } .prov-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #1f2610; } .prov-name { min-width: 0; flex: 1; } /* recém-chegados e provocadores: nome e nível na mesma linha; o nome encolhe com "…", o nível sempre aparece */ .nome-linha { display: flex !important; align-items: center; min-width: 0; } .nome-corte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nome-linha .nivel { flex: none; } .lista-texto { min-width: 0; flex: 1; } .prov-name small { display: block; color: var(--muted); font-size: .76rem; } .prov-empty { color: var(--muted); font-size: .88rem; } /* ---------- resposta em vídeo nos comentários ---------- */ .comment-hint { font-size: .72rem; color: var(--muted); } .comment-hint.on { color: var(--gold-2); font-weight: 700; } .comment-video { margin-top: 8px; max-width: 360px; } .comment-video.is-playing { max-width: none; } .comment-video .play-btn { width: 46px; height: 46px; } .comment-video .play-btn::after { left: 18px; top: 13px; border-left-width: 14px; border-top-width: 10px; border-bottom-width: 10px; } .made-video { display: inline-block; margin-top: 8px; font-size: .8rem; font-weight: 700; color: var(--gold-2); } @media (max-width: 1000px) { .ranking-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .ranking-grid { grid-template-columns: 1fr; } } /* ---------- login ---------- */ .login-link { color: var(--text); text-decoration: none; font-weight: 600; font-size: .9rem; padding: .45em .9em; border-radius: 99px; border: 1px solid var(--line); } .login-link:hover { border-color: var(--gold); color: var(--gold-2); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* menus do topo (conta e sanduíche) */ .topo-menu { position: relative; } .topo-menu summary { list-style: none; cursor: pointer; } .topo-menu summary::-webkit-details-marker { display: none; } /* "Meu perfil": só a foto (ou a inicial), com anel dourado ao passar/abrir */ .user-menu summary { display: grid; place-items: center; padding: 2px; border-radius: 50%; border: 2px solid var(--line); transition: border-color .15s; } .user-menu[open] summary, .user-menu summary:hover { border-color: var(--gold); } .user-initial { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; object-fit: cover; } /* sanduíche: só no celular */ .menu-sanduiche { display: none; } .menu-sanduiche summary { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); } .menu-sanduiche summary span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; } .menu-sanduiche[open] summary { border-color: var(--gold); } .menu-sanduiche[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-sanduiche[open] summary span:nth-child(2) { opacity: 0; } .menu-sanduiche[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .topo-menu-box { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px; padding: 8px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); } .topo-menu-box a { padding: 12px 14px; border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 600; } .topo-menu-box a:hover { background: var(--surface-2); color: var(--gold-2); } .user-menu-box { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 240px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5); } .user-menu-box p { margin: 0 0 10px; } .user-menu-box #my-profile-menu { margin-bottom: 8px; } .profile-logout { margin: 0 0 0 auto; display: flex; } .user-menu-box small { display: block; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; } .auth-page { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 40px 16px; } .auth-card { width: 100%; max-width: 440px; text-align: center; padding: 34px 30px; background: radial-gradient(400px 160px at 50% 0%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); } .auth-card h1 { font-size: 2rem; margin: 6px 0 8px; } .auth-card p { color: var(--muted); margin: 0 0 16px; } .auth-card p b { color: var(--text); } .auth-emoji svg { width: 96px; height: 68px; } .auth-form { text-align: left; margin-top: 8px; } .auth-form .field small { font-weight: 400; } .auth-small { font-size: .82rem; } .auth-error { background: #3a1a17; border: 1px solid #7a2f26; color: #f3c6bd !important; padding: 10px 14px; border-radius: 12px; } /* ---------- painel do administrador ---------- */ .admin-page { --bg: #121212; --bg-2: #1a1a1a; --surface: #1f1f1f; --surface-2: #2a2a2a; --line: #333; --text: #f1ede6; --muted: #a8a29a; --gold: #c9a227; --gold-2: #e7c54d; --on-accent: #231a00; --glow: #2b2615; background: var(--bg); } .adm-topbar nav { margin-left: auto; } .adm-main { max-width: 960px; margin: 0 auto; padding: 32px 16px 64px; } .adm-inline { display: inline; margin: 0; } .adm-login { max-width: 380px; margin: 60px auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; } .adm-login h1 { font-size: 1.6rem; } .adm-flash { padding: 12px 16px; border-radius: 12px; margin: 0 0 20px; background: #1f3320; border: 1px solid #3f6b40; list-style: none; } .adm-flash-erro { background: #3a1a17; border-color: #7a2f26; } .adm-flash li + li { margin-top: 4px; } .adm-section { margin-bottom: 36px; } .adm-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .adm-head h2 { font-size: 1.5rem; margin: 0; } .adm-rule { font-size: .78rem; color: var(--muted); padding: .2em .7em; border: 1px solid var(--line); border-radius: 99px; } .adm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px; } .adm-card h3 { font-size: 1.3rem; margin: 10px 0 4px; } .adm-live { border-color: var(--gold); } .adm-empty { color: var(--muted); text-align: center; padding: 28px; } .adm-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .adm-badge { font-size: .72rem; font-weight: 700; padding: .25em .7em; border-radius: 99px; background: var(--surface-2); } .adm-badge-ativa { background: #1f4d2a; color: #9be3a9; } .adm-badge-rascunho { background: #4a3d12; color: #f0d58a; } .adm-badge-encerrada { background: #333; color: #bbb; } .adm-where { font-size: .85rem; color: var(--muted); } .adm-desc { margin: 0 0 6px; color: var(--muted); } .adm-bars { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .adm-bar-top { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; margin-bottom: 4px; } .adm-bar-top small { color: var(--muted); font-weight: 400; } .adm-bar { display: flex; height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .adm-bar i { display: block; height: 100%; } .adm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; font-size: .82rem; color: var(--muted); } .adm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; } .adm-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: .82rem; color: var(--muted); } .adm-meta b { color: var(--text); } .adm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } /* painel de frases */ .adm-frase { margin-bottom: 10px; padding: 14px 16px; } .adm-frase.is-off { opacity: .55; } .adm-frase textarea, .adm-frase select, .adm-filtros select { background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text); padding: .55em .75em; font: .95rem var(--sans); outline: none; } .adm-frase textarea { width: 100%; resize: vertical; } .adm-frase textarea:focus, .adm-frase select:focus { border-color: var(--gold); } .adm-frase-opcoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .adm-frase .adm-actions { margin-top: 8px; } .adm-check { display: flex; align-items: center; gap: 6px; font-size: .88rem; } .adm-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px; } .adm-filtros a { color: var(--muted); font-size: .88rem; } .adm-grupo { margin: 24px 0 10px; font-size: 1.15rem; } .adm-grupo small { color: var(--muted); font: 600 .85rem var(--sans); } .adm-form .field small { font-weight: 400; } .adm-options { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: op; } .adm-options li { display: flex; gap: 8px; align-items: center; } .adm-options input { flex: 1; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 10px; color: var(--text); padding: .65em .85em; font: 1rem var(--sans); outline: none; } .adm-options input:focus { border-color: var(--gold); } .adm-remove { border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; width: 32px; } .adm-remove:hover { color: #e8735f; } .adm-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .adm-choices label { cursor: pointer; } .adm-choices input { position: absolute; opacity: 0; } .adm-choices span { display: block; height: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-2); } .adm-choices .field span, .adm-choices span b { display: block; margin: 0; color: var(--text); font-size: .95rem; } .adm-choices span small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; } .adm-choices input:checked + span { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); } .adm-choices input:focus-visible + span { outline: 2px solid var(--gold-2); } .adm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .adm-warn { margin: 6px 0 0; padding: 10px 14px; border-radius: 12px; background: #3a2f12; border: 1px solid #6b5720; font-size: .9rem; } .adm-history { display: grid; gap: 14px; } /* pagamentos (admin/pedidos) */ .adm-badge-pendente { background: #4a3d12; color: #f0d58a; } .adm-badge-expirado { background: #333; color: #bbb; } .adm-badge-pago { background: #1f4d2a; color: #9be3a9; } .adm-badge-cancelado { background: #4d1f1f; color: #f0a39a; } .adm-pedido.is-late { border-color: #e8735f; box-shadow: 0 0 0 1px #e8735f; } .adm-quando { margin-left: auto; font-size: .85rem; color: var(--muted); } .adm-quando.is-late { color: #f0a39a; font-weight: 700; } .adm-pedido-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 12px; } .adm-pedido-valor { font: 800 1.9rem var(--serif, serif); color: var(--gold); } .adm-pedido-quem small { display: block; color: var(--muted); font-size: .78rem; } .adm-pedido-quem b { font-size: 1.15rem; } .adm-pedido-itens { margin: 12px 0 0; padding-left: 18px; font-size: .88rem; color: var(--muted); } .adm-pedido-itens b { color: var(--text); } .adm-pedido-itens q { display: block; font-style: italic; } @media (max-width: 640px) { .adm-row { grid-template-columns: 1fr; } .adm-topbar nav { display: none; } } /* ---------- responsivo ---------- */ @media (max-width: 1100px) { .side-switch span { display: none; } } @media (max-width: 760px) { .choose-sides { grid-template-columns: 1fr; } .versus { top: 50%; } .side-jar { width: min(220px, 60%); } } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding-top: 32px; } .jar-wrap { order: -1; } .jar { max-width: 340px; } .ranking-grid { grid-template-columns: minmax(0, 1fr); } .topbar nav { display: none; } .menu-sanduiche { display: block; } .side-switch { margin-left: auto; } /* sem o nav, o link do outro pote e o Entrar vão para a direita */ } @media (max-width: 520px) { .stats { gap: 18px; } .stats strong { font-size: 1.6rem; } .modal-card { padding: 22px 18px; } .olive-picker { grid-template-columns: repeat(2, 1fr); } .pix { flex-direction: column; text-align: center; } .brand span { font-size: 1.05rem; } /* topo no celular: tudo numa linha, com o Entrar / Meu perfil sempre no canto direito */ .topbar { gap: 10px; } .topbar .btn-sm { white-space: nowrap; padding: .55em .9em; font-size: .85rem; } .user-initial { width: 30px; height: 30px; } .login-link { padding: .4em .75em; font-size: .85rem; } } @media (max-width: 420px) { .topbar { gap: 8px; } .topbar .btn-sm { padding: .5em .75em; font-size: .8rem; } .side-switch { padding: .3em .5em; } .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; } .tab { flex: none; padding: .5em .8em; font-size: .82rem; } } @media (max-width: 360px) { /* celulares bem estreitos (320px): topo mais compacto para o Entrar não sair da tela */ .topbar { gap: 6px; padding-left: 10px; padding-right: 10px; } .brand { gap: 6px; } .brand span { font-size: .92rem; } .brand svg { width: 30px; height: 22px; } .login-link { padding: .35em .6em; font-size: .8rem; } .tab { padding: .45em .65em; font-size: .78rem; } } /* ---------- nível ao lado do nome (tempero) ---------- */ .nivel { display: inline-block; margin-left: .35em; padding-right: .2em; font-size: .78em; line-height: 1; letter-spacing: -.2em; white-space: nowrap; vertical-align: .06em; cursor: help; } .nivel-topo { filter: drop-shadow(0 0 3px #ffb347) drop-shadow(0 0 6px #ff6a3d); animation: nivel-brilho 2.4s ease-in-out infinite; } @keyframes nivel-brilho { 50% { filter: drop-shadow(0 0 5px #ffd27a) drop-shadow(0 0 12px #ff6a3d); } } .olive-tip .nivel { font-size: .82em; } .profile-id h1 .nivel { font-size: .5em; vertical-align: .3em; } .profile-nivel { grid-column: 1 / -1; margin-top: 16px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; } .profile-nivel.is-topo { border-color: #ff8a3d; box-shadow: 0 0 18px rgba(255, 106, 61, .25); } .profile-nivel-head { display: flex; align-items: center; gap: 12px; } .nivel-icone { font-size: 1.5rem; letter-spacing: -.2em; padding-right: .2em; white-space: nowrap; } .nivel-nome { flex: 1; min-width: 0; } .nivel-nome small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); } .nivel-nome b { font: 800 1.35rem var(--serif); } .nivel-pontos { font-weight: 800; color: var(--gold-2); white-space: nowrap; } .nivel-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .nivel-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); } .nivel-prox { margin: 0; font-size: .88rem; color: var(--muted); } .nivel-prox b { color: var(--text); } .nivel-partes { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .78rem; color: var(--muted); } .nivel-partes b { color: var(--text); } .nivel-perda { color: #ffb08a; font-weight: 600; } .nivel-nudge { margin: 14px 0 0; font-size: .85rem; color: var(--muted); text-align: center; } .nivel-nudge:empty { display: none; } .nivel-nudge b { color: var(--gold-2); } .nivel-up { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid var(--gold); } .nivel-up-icone { font-size: 1.6rem; letter-spacing: -.2em; padding-right: .2em; white-space: nowrap; } .nivel-up small { display: block; font-size: .78rem; color: var(--muted); } .niveis { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .nivel-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .nivel-card.is-topo { border-color: #ff8a3d; box-shadow: 0 0 18px rgba(255, 106, 61, .25); } .nivel-card-icone { font-size: 1.3rem; letter-spacing: -.2em; padding-right: .2em; white-space: nowrap; min-height: 1.6rem; } .nivel-card b { font: 800 1rem var(--serif); } .nivel-card small { font-size: .75rem; color: var(--muted); } .niveis-regras { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 24px; } .niveis-regras li { display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--muted); } .niveis-regras li > span { font-size: 1.2rem; letter-spacing: -.2em; padding-right: .2em; white-space: nowrap; } .niveis-regras p { margin: 0; } .niveis-regras b { color: var(--text); } @media (max-width: 900px) { .niveis { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 520px) { .niveis { grid-template-columns: repeat(2, 1fr); } .profile-nivel { text-align: left; } } /* ---------- frases engraçadas (tabela frases) ---------- */ .piada { margin: 10px 0 0; font: italic 600 .95rem/1.4 var(--serif); color: var(--gold-2); } .compra-piada { margin: -6px 0 16px; } .rodape-piada { font-style: italic; color: var(--gold-2); margin-bottom: 6px; } .entrada-piada { font-size: 1.1rem; margin-top: 14px; color: #e7c54d; } /* ---------- apoio partidário (logo abaixo do hero) ---------- */ .partidos-faixa { padding: 0 16px 40px; } .partidos-inner { max-width: 1148px; margin: 0 auto; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; padding: 26px 28px; border-radius: 26px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: radial-gradient(600px 220px at 0% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%), linear-gradient(135deg, var(--surface), var(--bg-2)); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); } .partidos-escolha h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 6px 0 4px; } .partidos-sub { margin: 0 0 16px; color: var(--muted); font-size: .92rem; } .partidos-grid { display: flex; flex-direction: column; gap: 14px; } /* 1ª linha: os principais (PT, PL, Missão, PSOL, REDE), maiores; depois os demais */ .partidos-destaque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .partidos-destaque .partido { aspect-ratio: 1.7; } /* retangulares: cabe MISSÃO numa linha */ .partidos-destaque .partido-sigla { font-size: 1.45rem; } .partidos-destaque .partido-sigla.is-media { font-size: 1.05rem; } .partidos-destaque .partido-sigla.is-longa { font-size: 1rem; line-height: 1.05; } .partidos-demais { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(78px, 100%), 1fr)); gap: 10px; } .partidos-demais .partido { aspect-ratio: 1.15; border-radius: 14px; } .partidos-demais .partido-sigla { font-size: 1rem; } .partidos-demais .partido-sigla.is-media { font-size: .78rem; } .partidos-demais .partido-sigla.is-longa { font-size: .74rem; line-height: 1.05; } /* "Exibir mais": quadrado tracejado no fim da lista */ .partido.partido-mais { background: transparent; border: 2px dashed color-mix(in srgb, var(--gold) 60%, var(--line)); box-shadow: none; color: var(--gold-2); font: 800 1.1rem/1.1 var(--sans); } .partido-mais span { display: flex; flex-direction: column; align-items: center; gap: 2px; } .partido-mais small { font: 700 .62rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .partido-mais:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); transform: translateY(-3px); } .partido { position: relative; aspect-ratio: 1; border: 0; border-radius: 16px; cursor: pointer; padding: 6px; display: grid; place-items: center; color: var(--p-texto); background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 55%), linear-gradient(150deg, var(--p-cor), color-mix(in srgb, var(--p-cor) 70%, #000)); box-shadow: 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(0, 0, 0, .18); transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s, filter .2s; } .partido-sigla { font: 900 1.2rem/1 var(--sans); letter-spacing: -.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); overflow-wrap: anywhere; text-align: center; } .partido-sigla.is-media { font-size: .95rem; white-space: nowrap; } /* 6 a 8 letras (MISSÃO, PODEMOS): menor, numa linha só */ .partido-sigla.is-longa { font-size: .8rem; line-height: 1.05; white-space: nowrap; } /* siglas compridas: duas linhas (REPUBLI / CANOS), cada uma inteira */ .partido:hover { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 12px 22px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3); } .partido:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; } .partido.is-on { transform: scale(1.06); outline: 3px solid var(--gold-2); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-2) 18%, transparent), 0 0 26px color-mix(in srgb, var(--gold-2) 55%, transparent); } .partido.is-cheio { filter: grayscale(.75) brightness(.65); } .partido.is-cheio:hover { transform: none; } .partido-check { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-2); color: var(--on-accent); font: 900 .85rem var(--sans); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); } .partido.pop { animation: partido-pop .5s cubic-bezier(.3, 1.6, .5, 1); } @keyframes partido-pop { 0% { transform: scale(.8); } 55% { transform: scale(1.18) rotate(4deg); } 100% { transform: scale(1.06); } } .partido.treme { animation: partido-treme .4s; } @keyframes partido-treme { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .partidos-status { margin: 16px 0 0; font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .partidos-status b { color: var(--gold-2); } .partidos-cadeado { font-size: .82rem; } .partidos-ranking { background: color-mix(in srgb, var(--bg) 55%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: 18px; align-self: start; } .partidos-ranking h3 { margin: 0 0 12px; font-size: 1.15rem; } .partidos-ranking ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .partidos-ranking li { display: grid; grid-template-columns: 28px 76px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; transition: background .2s; } .partidos-ranking li.is-meu { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: inset 3px 0 0 var(--gold-2); } .rank-pos { text-align: center; font-weight: 800; color: var(--muted); font-size: .9rem; } .rank-sigla { padding: 5px 4px; border-radius: 8px; text-align: center; color: var(--p-texto); background: var(--p-cor); font: 800 .72rem var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-barra { height: 12px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .rank-barra i { display: block; height: 100%; border-radius: 99px; transition: width .7s cubic-bezier(.2, .8, .2, 1); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); } .rank-n { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; font-size: .9rem; } .rank-n small { display: block; font-weight: 600; font-size: .7rem; color: var(--muted); } .partidos-todos { margin-top: 10px; } .partidos-escolha, .partidos-ranking, .partido { min-width: 0; } .partidos-escolha h2, .partidos-ranking h3 { overflow-wrap: break-word; } @media (max-width: 900px) { .partidos-inner { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; } } @media (max-width: 520px) { .partidos-destaque { gap: 8px; } .partidos-destaque .partido-sigla { font-size: 1rem; } .partidos-destaque .partido-sigla.is-media { font-size: .74rem; } .partidos-destaque .partido-sigla.is-longa { font-size: .62rem; } .partidos-demais { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; } .partidos-demais .partido-sigla { font-size: .9rem; } .partidos-demais .partido-sigla.is-media { font-size: .7rem; } .partidos-demais .partido-sigla.is-longa { font-size: .6rem; } .partidos-ranking li { grid-template-columns: 24px 64px minmax(0, 1fr) auto; gap: 8px; } .partidos-faixa { padding: 0 12px 32px; } .partidos-inner { padding: 18px 14px; border-radius: 20px; gap: 20px; } .partidos-ranking { padding: 14px 12px; } } @media (max-width: 380px) { .partidos-destaque { gap: 6px; } .partidos-destaque .partido { aspect-ratio: 1.35; border-radius: 12px; padding: 4px; } .partidos-destaque .partido-sigla { font-size: .88rem; } .partidos-destaque .partido-sigla.is-media { font-size: .6rem; } .partidos-destaque .partido-sigla.is-longa { font-size: .54rem; } .partidos-demais { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .partidos-demais .partido { border-radius: 11px; } .partidos-ranking li { grid-template-columns: 20px 54px minmax(0, 1fr) auto; gap: 6px; padding: 5px 4px; } .partido-check { width: 22px; height: 22px; top: -7px; right: -7px; font-size: .75rem; } } /* ---------- mapa da guerra dos potes ---------- */ .mapa-section { padding-top: 24px; } .mapa-manchete { font: italic 600 1.1rem/1.4 var(--serif); color: var(--text); max-width: 760px; } .mapa-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; align-items: start; } .mapa-wrap { background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 18px; } .mapa { display: block; width: 100%; height: auto; overflow: visible; } .mapa .uf { stroke: #15130e; stroke-width: 1.3; stroke-linejoin: round; cursor: pointer; transition: fill .5s, filter .15s; } .mapa .uf:hover, .mapa .uf:focus-visible, .mapa .uf.is-ativo { stroke: #fff; stroke-width: 2.4; filter: brightness(1.15); outline: none; } .mapa-rotulos text { font: 700 21px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 4.5px; } .mapa-rotulos line { stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; } .mapa-coroas text { font-size: 22px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); } .mapa-coroas .is-minha { font-size: 28px; animation: coroa-minha 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes coroa-minha { 50% { transform: translateY(-4px); filter: drop-shadow(0 0 6px #ffd27a); } } .mapa-rei { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 10px 12px; position: relative; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--gold); } .rei-coroa { position: absolute; left: 30px; top: -12px; font-size: 1.1rem; transform: rotate(-12deg); } .rei-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #1f2610; object-fit: cover; } .rei-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rei-info small { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-2); } .rei-itens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .78rem; color: var(--muted); } .rei-item { display: inline-flex; align-items: center; gap: 3px; } .rei-item svg { width: 22px; height: 16px; } .rei-itens b { color: var(--text); } .mapa-estado .rei-recado { margin: 0 0 10px; font-style: italic; color: var(--text); } .mapa-legenda { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .78rem; color: var(--muted); } .mapa-legenda li { display: flex; align-items: center; gap: 6px; } .mapa-legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; } .mapa-legenda .leg-empate { background: repeating-linear-gradient(45deg, #e0402a 0 4px, #8fa532 4px 8px); } .mapa-painel { display: flex; flex-direction: column; gap: 18px; } .mapa-placar { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; } .mapa-placar-nums { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mapa-placar-nums > div { display: flex; flex-direction: column; text-align: center; flex: 1; } .mapa-placar-nums b { font: 800 2.6rem/1 var(--serif); color: var(--cor); } .mapa-placar-nums small { font-weight: 700; font-size: .85rem; } .mapa-placar-nums span { font-size: .75rem; color: var(--muted); } .mapa-placar-nums .is-meu small::after { content: " (você)"; color: var(--muted); font-weight: 500; } .mapa-placar-nums em { font: italic 800 1.4rem var(--serif); color: var(--muted); } .mapa-placar-barra { display: flex; height: 10px; margin-top: 12px; border-radius: 99px; overflow: hidden; background: #3b3a31; } .mapa-placar-barra i { display: block; height: 100%; transition: width .6s; } .mapa-estado { min-height: 92px; padding: 14px 16px; border-radius: 16px; background: var(--bg-2); border: 1px dashed var(--line); } .mapa-estado-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; } .mapa-estado-head > b { font: 800 1.2rem var(--serif); } .mapa-estado p { margin: 6px 0 10px; font-size: .9rem; color: var(--muted); } .mapa-estado .mapa-dica { margin: 0; } .mapa-fio h3 { margin-bottom: 4px; } .mapa-fio ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .mapa-fio li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface); } .fio-uf { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: var(--bg-2); color: var(--gold-2); flex: none; } .fio-nome { flex: 1; min-width: 0; } .fio-nome small { display: block; color: var(--muted); font-size: .76rem; } .mapa-ctas { display: flex; flex-wrap: wrap; gap: 10px; } .mapa-ctas .btn { flex: 1; } @media (max-width: 900px) { .mapa-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .mapa-wrap { padding: 10px; border-radius: 18px; } .mapa-placar-nums b { font-size: 2.1rem; } .mapa-rotulos text { font-size: 30px; stroke-width: 6px; } /* o mapa encolhe: siglas maiores para continuarem legíveis */ .mapa-coroas text { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- painel: logs ---------- */ .adm-main.adm-logs { max-width: 1280px; } .adm-atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; } .adm-atalhos a { padding: .35em .85em; border-radius: 99px; border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .85rem; } .adm-atalhos a.is-on, .adm-atalhos a:hover { border-color: var(--gold); color: var(--gold-2); } .adm-filtros input { padding: .45em .7em; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); } .adm-tabela-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; } .adm-tabela { width: 100%; border-collapse: collapse; font-size: .82rem; } .adm-tabela th { text-align: left; padding: 10px; background: var(--surface); color: var(--muted); font-weight: 600; white-space: nowrap; position: sticky; top: 0; } .adm-tabela td { padding: 8px 10px; border-top: 1px solid var(--line); vertical-align: top; } .adm-tabela a { color: var(--text); text-decoration: none; } .adm-tabela a:hover { color: var(--gold-2); text-decoration: underline; } .log-data { white-space: nowrap; color: var(--muted); } .log-nivel { display: inline-block; padding: .15em .6em; border-radius: 99px; font-weight: 700; font-size: .75rem; background: var(--surface-2); } .log-info .log-nivel { background: #1f3d4d; color: #9fd3ea; } .log-debug .log-nivel { color: var(--muted); } .log-aviso .log-nivel { background: #4a3d12; color: #f0d58a; } .log-erro .log-nivel { background: #4d1f1f; color: #f0a39a; } .log-seguranca .log-nivel { background: #3b1f4d; color: #d6a8f0; } .log-erro td, .log-seguranca td { background: rgba(255,255,255,.02); } .log-evento { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--muted) !important; } .log-msg { min-width: 240px; max-width: 460px; word-break: break-word; } .log-msg pre { margin: 6px 0 0; padding: 8px; max-height: 260px; overflow: auto; background: var(--bg-2); border-radius: 8px; font-size: .75rem; white-space: pre-wrap; } .log-msg summary { cursor: pointer; color: var(--muted); font-size: .75rem; margin-top: 4px; } .log-req { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; } .log-req small { display: block; color: var(--muted); font-family: var(--sans, sans-serif); } .log-status { padding: 0 .4em; border-radius: 4px; background: var(--surface-2); } .adm-paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0; color: var(--muted); font-size: .9rem; } .th-ordem { color: var(--muted) !important; white-space: nowrap; } .th-ordem span { font-size: .75em; opacity: .5; } .th-ordem:hover, .th-ordem.is-on { color: var(--gold-2) !important; text-decoration: none !important; } .th-ordem.is-on span { opacity: 1; } /* ---------- painel: atualizar o sistema ---------- */ .deploy-versoes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .deploy-versoes > div { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); } .deploy-versoes small { display: block; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; } .deploy-versoes b { display: block; font: 800 1.4rem ui-monospace, Consolas, monospace; color: var(--gold-2); margin: 2px 0 4px; } .deploy-versoes span { font-size: .85rem; color: var(--muted); } .deploy-erro { color: #f0a39a !important; } .deploy-nota { margin-top: 12px; font-size: .85rem; } .deploy-resultado { margin-top: 16px; } .deploy-resultado.is-ok { border-color: #3f6b40; } .deploy-resultado.is-erro { border-color: #7a2f26; } .deploy-resultado ol { margin: 8px 0 0; padding-left: 20px; font-size: .9rem; } @media (max-width: 640px) { .deploy-versoes { grid-template-columns: 1fr; } } /* ---------- app (PWA): botão "Instalar o app" e convite animado do celular ---------- */ .pwa-instalar { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 14px; padding: .6em 1.3em; border-radius: 99px; cursor: pointer; font: 700 .9rem var(--sans, sans-serif); color: var(--on-accent, #231a00); background: var(--gold-2, #e7c54d); border: 0; box-shadow: 0 8px 20px rgba(0,0,0,.35); } .pwa-instalar[hidden], [data-instalar-app][hidden], [data-sem-instalar][hidden] { display: none; } html.pwa-travado { overflow: hidden; } .pwa-convite { position: fixed; inset: 0; z-index: 95; display: grid; place-items: end center; padding: 12px; background: rgba(8,6,4,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; } .pwa-convite.is-aberto { opacity: 1; } .pwa-convite.is-saindo { opacity: 0; } .pwa-convite-card { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; padding: 26px 20px 14px; border-radius: 28px; text-align: center; outline: none; color: var(--text, #f4ecd8); background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%), linear-gradient(180deg, var(--surface-2, #2f3c20), var(--surface, #26311a) 45%, var(--bg, #161c0c)); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); box-shadow: 0 -20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(110%); transition: transform .55s cubic-bezier(.2, 1.25, .35, 1); } .pwa-convite.is-aberto .pwa-convite-card { transform: none; } .pwa-convite.is-saindo .pwa-convite-card { transform: translateY(110%); transition-duration: .3s; transition-timing-function: ease-in; } .pwa-convite-x { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--muted); background: rgba(255,255,255,.06); } .pwa-convite-topo { position: relative; width: 96px; height: 96px; margin: 0 auto 12px; display: grid; place-items: center; } .pwa-convite-brilho { position: absolute; inset: -10px; border-radius: 50%; filter: blur(10px); opacity: .75; background: conic-gradient(from 0deg, var(--gold-2), #c0392b, var(--gold), #3f6b40, var(--gold-2)); animation: pwa-gira 6s linear infinite; } .pwa-convite-icone { position: relative; width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 12px 28px rgba(0,0,0,.5); animation: pwa-entra .7s .25s cubic-bezier(.2, 1.5, .4, 1) both, pwa-flutua 3.2s 1s ease-in-out infinite; } .pwa-convite h2 { margin: 0 0 6px; font: 800 1.55rem/1.15 var(--serif); animation: pwa-sobe .5s .35s both; } .pwa-convite-sub { margin: 0 auto 16px; max-width: 330px; color: var(--muted); font-size: .95rem; line-height: 1.45; animation: pwa-sobe .5s .45s both; } .pwa-convite-sub b { color: var(--gold-2); } .pwa-convite-rapido { display: none; margin-bottom: 8px; } .pwa-convite.tem-instalador .pwa-convite-rapido { display: block; animation: pwa-sobe .5s .5s both; } .pwa-convite.tem-instalador .pwa-convite-guia, .pwa-convite.tem-instalador .pwa-convite-nota { display: none; } .pwa-convite-instalar { font-size: 1.05rem; padding: .9em 1em; animation: pwa-chama 2.4s 1.2s ease-in-out infinite; } .pwa-convite-rapido small { display: block; margin-top: 8px; color: var(--muted); font-size: .8rem; } .pwa-convite-guia { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px; border-radius: 20px; background: rgba(0,0,0,.22); border: 1px solid var(--line); animation: pwa-sobe .5s .55s both; } .pwa-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; line-height: 1.35; } .pwa-passos li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 9px; border-radius: 12px; animation: pwa-passo 9s linear infinite; } .pwa-passos li.p2 { animation-delay: -6s; } .pwa-passos li.p3 { animation-delay: -3s; } .pwa-passos li > span { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 .75rem var(--sans); color: var(--on-accent); background: var(--gold-2); } .pwa-passos b { color: var(--gold-2); } .pwa-ic { display: inline-grid; vertical-align: -4px; width: 18px; height: 18px; color: #4ea3ff; } .pwa-ic svg { width: 100%; height: 100%; } .pwa-convite-nota { margin: 10px 0 0; font-size: .78rem; color: var(--muted); } .pwa-convite-depois { margin-top: 8px; padding: .7em 1.2em; border: 0; background: none; cursor: pointer; font: 600 .9rem var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } /* celularzinho que mostra o passo a passo: 3 cenas de 3s cada, em loop */ .pwa-celular { width: 118px; height: 212px; padding: 6px; border-radius: 24px; background: #0b0906; box-shadow: 0 0 0 1.5px #3a3226, 0 14px 30px rgba(0,0,0,.5); } .pwa-tela { position: relative; height: 100%; overflow: hidden; border-radius: 18px; background: linear-gradient(170deg, #f6f1e4, #e8dfc8); } .pwa-cena { position: absolute; inset: 0; opacity: 0; animation: pwa-cena 9s linear infinite; } .pwa-cena::before { /* "conteúdo" do site no fundo */ content: ""; position: absolute; left: 10px; right: 10px; top: 36px; height: 110px; border-radius: 8px; background: linear-gradient(#c9a227 0 0) 0 0 / 60% 9px no-repeat, linear-gradient(#d8ccb0 0 0) 0 18px / 100% 6px no-repeat, linear-gradient(#d8ccb0 0 0) 0 30px / 80% 6px no-repeat, linear-gradient(#556b2f 0 0) 0 48px / 100% 56px no-repeat; } .pwa-cena.c3::before { display: none; } .pwa-tela-barra { position: absolute; left: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: space-around; background: rgba(255,255,255,.92); color: #2b7de9; font-size: 0; } .pwa-tela-barra.is-baixo { bottom: 0; border-top: 1px solid #ddd; } .pwa-tela-barra.is-cima { top: 0; justify-content: space-between; padding: 0 6px 0 8px; border-bottom: 1px solid #ddd; color: #444; } .pwa-tela-barra span:not(.pwa-url) { width: 16px; height: 16px; display: grid; } .pwa-tela-barra.is-baixo span:not(.pwa-alvo)::before { content: ""; margin: auto; width: 10px; height: 2px; border-radius: 2px; background: #b8c4d6; } .pwa-tela-barra svg { width: 100%; height: 100%; } .pwa-url { flex: 1; margin-right: 6px; padding: 3px 6px; border-radius: 99px; background: #eee; color: #666; font: 600 7px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pwa-tela-barra .pwa-alvo { border-radius: 50%; animation: pwa-pulso 1.2s ease-out infinite; } .pwa-tela-menu { position: absolute; background: #fff; color: #222; font: 600 7.5px/1 var(--sans); box-shadow: 0 6px 18px rgba(0,0,0,.25); animation: pwa-menu 9s cubic-bezier(.2, 1.1, .4, 1) infinite; } .pwa-tela-menu.is-baixo { left: 4px; right: 4px; bottom: 32px; border-radius: 10px; --de: translateY(140%); } .pwa-tela-menu.is-cima { top: 24px; right: 4px; width: 84px; border-radius: 8px; transform-origin: top right; --de: scale(.3); } .pwa-tela-menu div { display: flex; align-items: center; gap: 4px; padding: 7px; border-bottom: 1px solid #eee; } .pwa-tela-menu div:last-child { border: 0; } .pwa-tela-menu svg { width: 10px; height: 10px; flex: none; } .pwa-tela-menu .pwa-alvo { color: #1a5fd0; animation: pwa-marca 9s linear infinite; } .pwa-dedo { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(231,197,77,.95) 35%, rgba(231,197,77,.35) 60%, transparent 70%); animation: pwa-dedo 9s ease-in-out infinite; } .is-ios .c1 .pwa-dedo { left: 50%; top: calc(100% - 14px); } .is-ios .c2 .pwa-dedo { left: 50%; top: calc(100% - 44px); } .is-android .c1 .pwa-dedo { left: calc(100% - 14px); top: 14px; } .is-android .c2 .pwa-dedo { left: calc(100% - 45px); top: 83px; } .pwa-home { position: absolute; inset: 0; padding: 22px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 9px; align-content: start; background: linear-gradient(160deg, #3b5a8c, #1b2a44 60%, #402a4a); } .pwa-home i { aspect-ratio: 1; border-radius: 9px; background: rgba(255,255,255,.22); } .pwa-home b { display: grid; justify-items: center; gap: 3px; animation: pwa-novo 9s cubic-bezier(.2, 1.6, .4, 1) infinite; } .pwa-home b img { width: 100%; aspect-ratio: 1; border-radius: 9px; box-shadow: 0 0 0 2px var(--gold-2), 0 0 14px var(--gold-2); } .pwa-home b small { font: 600 7px var(--sans); color: #fff; } /* a cena 2 começa aos 3s e a 3 aos 6s (atrasos negativos: todas usam o mesmo relógio de 9s) */ .pwa-tela .c2, .pwa-tela .c2 * { animation-delay: -6s; } .pwa-tela .c3, .pwa-tela .c3 * { animation-delay: -3s; } @keyframes pwa-gira { to { transform: rotate(1turn); } } @keyframes pwa-entra { from { opacity: 0; transform: scale(.3) rotate(-20deg); } } @keyframes pwa-flutua { 50% { transform: translateY(-6px) rotate(2deg); } } @keyframes pwa-sobe { from { opacity: 0; transform: translateY(14px); } } @keyframes pwa-chama { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.04) rotate(-1deg); } 86% { transform: scale(1.04) rotate(1deg); } } @keyframes pwa-cena { 0%, 30% { opacity: 1; } 33%, 97% { opacity: 0; } 100% { opacity: 1; } } @keyframes pwa-passo { 0%, 30% { opacity: 1; background: color-mix(in srgb, var(--gold) 16%, transparent); transform: translateX(3px); } 33%, 97% { opacity: .5; background: transparent; transform: none; } 100% { opacity: 1; background: color-mix(in srgb, var(--gold) 16%, transparent); transform: translateX(3px); } } @keyframes pwa-pulso { from { box-shadow: 0 0 0 0 rgba(43,125,233,.55); } to { box-shadow: 0 0 0 10px rgba(43,125,233,0); } } @keyframes pwa-menu { 0% { transform: var(--de); opacity: 0; } 6%, 100% { transform: none; opacity: 1; } } @keyframes pwa-marca { 0%, 16% { background: transparent; } 18%, 30% { background: #dbe8ff; } 31%, 100% { background: transparent; } } @keyframes pwa-dedo { 0% { opacity: 0; transform: translate(26px, 34px) scale(1.2); } 9% { opacity: 1; transform: translate(26px, 34px) scale(1.2); } 15% { opacity: 1; transform: none; } 17% { transform: scale(.7); } 20% { transform: scale(1); } 26% { opacity: 1; } 30%, 100% { opacity: 0; } } @keyframes pwa-novo { 0%, 5% { transform: scale(0); } 12% { transform: scale(1.25); } 16%, 100% { transform: scale(1); } } @media (max-width: 350px) { .pwa-convite-guia { grid-template-columns: 1fr; justify-items: center; } } @media (prefers-reduced-motion: reduce) { .pwa-convite-card { transition-duration: .01s; } .pwa-convite-brilho, .pwa-convite-icone, .pwa-convite-instalar, .pwa-dedo, .pwa-tela-barra .pwa-alvo { animation: none; } }