/* ============================================ */ /* FAIXA — COPA DO MUNDO 2026 (TEMPORÁRIA) */ /* ============================================ */ /* Banner de topo editorial celebrando a Copa do Mundo 2026 e a torcida pela Seleção. Direção: editorial/refinado — superfície verde em gradiente com atmosfera (brilho dourado + sheen), escudo original (escudo + 5 estrelas dos 5 títulos + bola), tipografia mista (Inter caixa-alta espaçada + Fraunces itálico no "Vai, Brasil!") e entrada coreografada com stagger. Harmônica com a paleta sage do site. 100% removível após 19/07/2026: apagar este arquivo + o no , o markup .faixa após e js/faixa.js (+script). */ :root { /* Tokens Copa do Mundo 2026 — temporários e escopados a esta feature (vivem aqui, não em variables.css, para deleção trivial). Verde, amarelo e azul da bandeira servem ao escudo e ao acento tricolor; a SUPERFÍCIE reaproveita o verde do site para manter a harmonia. */ --faixa-verde: #009739; /* tricolor / detalhe do escudo */ --faixa-amarelo: #fedd00; /* estrelas do escudo, ano, acento */ --faixa-azul: #012169; /* tricolor */ --faixa-bg: var(--sage-deep); /* verde do site */ --faixa-bg-deep: #45604f; /* sage escurecido p/ profundidade */ --faixa-text: var(--white-warm); /* Altura: 0 por padrão (sem JS / dispensada) → página idêntica ao normal. O js/faixa.js adiciona .faixa-active em :root para revelar. */ --faixa-h: 0px; } :root.faixa-active { --faixa-h: 3rem; } /* Nav desce a altura da faixa. components.css define `nav { top: 0 }`; este arquivo carrega depois, então o override vence. O nav já tem `transition: all 0.4s`, então o `top` desliza de graça. */ nav { top: var(--faixa-h); } /* Hero ganha o mesmo offset no topo para não ser coberto pelo nav. */ .hero { padding-top: calc(10rem + var(--faixa-h)); transition: padding-top 0.5s var(--ease-out); } @media (max-width: 968px) { /* Sem isto, o nav mobile (mais alto) + faixa sobreporiam o hero. */ .hero { padding-top: calc(8rem + var(--faixa-h)); } } /* === Faixa === */ .faixa { position: fixed; inset: 0 0 auto 0; z-index: 150; /* acima do nav (100); abaixo de cursor (9998+) e skip-link */ display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.4rem 3.25rem; /* Superfície em gradiente diagonal: profundidade em vez de cor chapada. */ background: linear-gradient(105deg, var(--faixa-bg-deep) 0%, var(--faixa-bg) 46%, var(--faixa-bg-deep) 100%); color: var(--faixa-text); text-align: center; /* Estado inicial: fora da tela, acima. .faixa-active traz para baixo. */ transform: translateY(-100%); opacity: 0; transition: transform 0.55s var(--ease-out), opacity 0.4s var(--ease-out); } :root.faixa-active .faixa { transform: translateY(0); opacity: 1; } /* Atmosfera: brilho dourado vindo da esquerda (onde fica o escudo) + sheen suave no topo. Pintada no box da faixa, não vaza. */ .faixa::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 150% at 16% 0%, rgba(254, 221, 0, 0.13), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 42%); } /* Assinatura tricolor — gradiente blendado (não "adesivo de bandeira"). */ .faixa::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--faixa-verde) 0%, var(--faixa-amarelo) 50%, var(--faixa-azul) 100%); opacity: 0.95; } .faixa__inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.85rem; } /* === Escudo (artwork original) === */ .faixa__crest { position: relative; z-index: 0; display: inline-flex; flex-shrink: 0; filter: drop-shadow(0 2px 3px rgba(20, 32, 26, 0.35)); } .faixa__crest svg { width: 30px; height: 30px; display: block; } /* Halo dourado pulsante atrás do escudo — vida sutil, sem piscar. */ .faixa__crest::after { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(254, 221, 0, 0.4), transparent 70%); animation: faixa-glow 3.6s var(--ease-in-out) infinite; } /* === Mensagem (tipografia mista) === */ .faixa__msg { margin: 0; display: inline-flex; align-items: baseline; flex-wrap: nowrap; gap: 0.55rem; white-space: nowrap; } .faixa__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(251, 249, 244, 0.82); } .faixa__year { color: var(--faixa-amarelo); font-weight: 700; letter-spacing: 0.08em; } .faixa__dot { width: 4px; height: 4px; align-self: center; border-radius: 50%; background: var(--faixa-amarelo); opacity: 0.85; } .faixa__say { font-size: 0.92rem; font-weight: 450; color: rgba(251, 249, 244, 0.95); } /* Fraunces itálico (já self-hosted): o floreio que dá alma à faixa. */ .faixa__flourish { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.08rem; letter-spacing: 0.005em; color: var(--faixa-text); text-shadow: 0 1px 6px rgba(20, 32, 26, 0.3); } /* === Botão fechar === */ .faixa__close { position: absolute; right: 0.45rem; top: 50%; z-index: 3; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; /* alvo de toque acessível (WCAG 44px) sem aumentar a altura da faixa */ width: 44px; height: 44px; padding: 0; border: none; background: transparent; color: rgba(251, 249, 244, 0.8); cursor: pointer; border-radius: 50%; transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.4s var(--ease-bounce); } .faixa__close svg { width: 17px; height: 17px; } @media (hover: hover) { .faixa__close:hover { background: rgba(251, 249, 244, 0.16); color: var(--faixa-text); transform: translateY(-50%) rotate(90deg); } } .faixa__close:focus-visible { outline: 2px solid var(--faixa-amarelo); outline-offset: 2px; color: var(--faixa-text); } /* === Entrada coreografada (disparada por .faixa-active) === */ :root.faixa-active .faixa__crest { animation: faixa-crest-in 0.7s var(--ease-bounce) 0.05s both; } :root.faixa-active .faixa__label { animation: faixa-rise 0.55s var(--ease-out) 0.14s both; } :root.faixa-active .faixa__say { animation: faixa-rise 0.55s var(--ease-out) 0.22s both; } :root.faixa-active .faixa__flourish { animation: faixa-rise 0.55s var(--ease-out) 0.3s both; } /* Sheen single-shot que varre a mensagem uma vez após a entrada. */ .faixa__msg { position: relative; } :root.faixa-active .faixa__inner::after { content: ''; position: absolute; top: -0.4rem; bottom: -0.4rem; left: 0; width: 35%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(251, 249, 244, 0.22), transparent); animation: faixa-shine 2.4s var(--ease-out) 0.7s 1; } @keyframes faixa-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes faixa-crest-in { from { opacity: 0; transform: scale(0.55) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes faixa-glow { 0%, 100% { opacity: 0.45; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.1); } } @keyframes faixa-shine { from { transform: translateX(-120%); opacity: 0; } 18% { opacity: 1; } to { transform: translateX(420%); opacity: 0; } } /* === Mobile: enxuga a mensagem, mantém escudo + chamada === */ @media (max-width: 640px) { .faixa { padding: 0.4rem 2.75rem 0.4rem 0.85rem; } .faixa__inner { gap: 0.6rem; } .faixa__crest svg { width: 26px; height: 26px; } /* esconde a oração do meio para não quebrar em várias linhas */ .faixa__say, .faixa__dot { display: none; } .faixa__label { font-size: 0.66rem; letter-spacing: 0.13em; } .faixa__flourish { font-size: 1rem; } } /* === Movimento reduzido: a faixa apenas aparece, sem coreografia === */ @media (prefers-reduced-motion: reduce) { .faixa, .hero { transition: none; } .faixa__crest, .faixa__label, .faixa__say, .faixa__flourish { animation: none; } .faixa__crest::after { animation: none; opacity: 0.6; } :root.faixa-active .faixa__inner::after { animation: none; opacity: 0; } }