/* ═══════════════════════════════════════════════════════════════ DraxMU — cinematic.css Clone estrutural do site GTA VI. Paleta: fogo (vermelho->laranja) sobre azul-escuro quase preto. Fonte unica: Josefin Sans. Aplica-se SO a landing (escopo .cine-*). Paginas funcionais herdam so a fonte via body. ═══════════════════════════════════════════════════════════════ */ :root { --cine-bg: #0a0807; --cine-bg-2: #0a0807; --cine-bg-3: #0a0807; --cine-panel: #15131f; --cine-ink: #F3F1FA; /* titulos */ --cine-lav: #C9C6DC; /* corpo lavanda LEGIVEL */ --cine-lav-dim: #9D9AB4; /* notas / secundario */ --cine-cream: #f1e6d2; /* botoes creme */ --cine-cream-ink: #14121c; /* texto sobre creme/gradiente */ --cine-accent: #ff8a3d; /* acento p/ eyebrow */ --cine-radius: 24px; --cine-radius-sm: 16px; --cine-fire-1: #e8431a; --cine-fire-2: #ff5a1f; --cine-fire-3: #f5a623; --cine-nav-h: 68px; --cine-ease: cubic-bezier(.16,.84,.44,1); --cine-grad: linear-gradient(90deg,#b01e10,#e8431a,#ff5a1f,#f5a623,#ffb22e,#f5a623,#ff5a1f,#e8431a,#b01e10); } /* ── Fonte global da landing (e herdada nas paginas funcionais) ── */ body { font-family: 'Josefin Sans', system-ui, -apple-system, sans-serif; } /* O da HOME recebe .cine-home (setado pelo index) */ body.cine-home { /* FUNDO UNICO CONTINUO (cine15): um so canvas escuro de topo a base, gradiente vertical MUITO sutil. Sem mais 3 tons alternados por secao. */ background: #0a0807; background-image: linear-gradient(180deg, #0a0807 0%, #0b0a1a 38%, #0a0807 72%, #0a0917 100%); background-attachment: fixed; color: var(--cine-lav); margin: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* esconde a nav antiga do template (mantida no DOM p/ app.js nao quebrar) */ body.cine-home #main-nav, body.cine-home .nav, body.cine-home #legacy-nav-keep { position: absolute !important; left: -99999px !important; top: -99999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; pointer-events: none !important; } .cine-home a { text-decoration: none; color: inherit; } .cine-home img { display: block; max-width: 100%; } *, *::before, *::after { box-sizing: border-box; } /* ── Gradiente fogo animado ─────────────────────────────────── */ @keyframes cineFire { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .grad-anim { background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; } .grad-text { background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ── Barra de progresso de scroll (topo) ────────────────────── */ .cine-progress { display: none !important; position: fixed; top: 0; left: 0; height: 0; width: 0%; z-index: -1; pointer-events: none; opacity: 0; visibility: hidden; } /* ═══════════════════════════════════════════════════════════════ SISTEMA DE BOTOES (unico, consistente, com contraste legivel) ═══════════════════════════════════════════════════════════════ */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .5px; border: none; cursor: pointer; line-height: 1; transition: transform .2s var(--cine-ease), box-shadow .2s var(--cine-ease), filter .2s; } .btn-primary .ic, .btn-secondary .ic { font-size: 1em; line-height: 1; } /* Primario: gradiente fogo animado + texto ESCURO (alto contraste sobre laranja) */ .btn-primary { background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; color: var(--cine-cream-ink); box-shadow: 0 10px 30px rgba(232,67,26,.35); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(232,67,26,.5); filter: brightness(1.06); } /* Secundario: creme SOLIDO + texto ESCURO. FIX: `.cine-home a` (0,1,1) com color:inherit vencia `.btn-secondary` (0,1,0) e fazia o texto herdar --cine-lav (claro). Forcamos com !important + a propria tag (sobe a especificidade) p/ garantir texto legivel SEMPRE. */ .btn-secondary, a.btn-secondary, .cine-home a.btn-secondary { background: var(--cine-cream) !important; color: var(--cine-cream-ink) !important; -webkit-text-fill-color: var(--cine-cream-ink) !important; font-weight: 700 !important; } .btn-secondary span, .btn-secondary .ic, a.btn-secondary span, a.btn-secondary .ic { color: var(--cine-cream-ink) !important; -webkit-text-fill-color: var(--cine-cream-ink) !important; } .btn-secondary:hover, a.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.4); filter: brightness(1.04); } /* Badge de plataforma: escuro + texto claro (NUNCA cinza sobre branco) */ .badge-plat { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #ECE9F5; padding: 11px 20px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: .85rem; letter-spacing: 1px; text-transform: uppercase; } .badge-plat .ic { font-size: 1em; } /* Botao Discord: blurple #5865F2 + texto BRANCO (legivel + on-brand) */ .btn-discord { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: #5865F2; color: #ffffff !important; font-family: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .5px; line-height: 1; border: none; cursor: pointer; box-shadow: 0 10px 30px rgba(88,101,242,.4); transition: transform .2s var(--cine-ease), box-shadow .2s var(--cine-ease), filter .2s, background .2s; } .btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(88,101,242,.55); filter: brightness(1.04); } .btn-discord__ic { width: 22px; height: 22px; color: #ffffff; flex: 0 0 auto; } /* ── BARRA / NAV fechada (clone gta1) ───────────────────────── */ .cine-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--cine-nav-h); z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 48px); background: transparent; border-bottom: 0 !important; box-shadow: none; transition: background .4s var(--cine-ease), backdrop-filter .4s var(--cine-ease); } .cine-nav.solid { background: rgba(10,10,24,.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 0 !important; } /* TOPO = SO O ICONE (sem texto de marca) */ .cine-nav__logo { display: flex; align-items: center; gap: 11px; } .cine-nav__icon { height: clamp(44px, 4.4vw, 52px); width: clamp(44px, 4.4vw, 52px); object-fit: contain; filter: drop-shadow(0 4px 12px rgba(232,67,26,.45)); transition: transform .3s var(--cine-ease); } .cine-nav__logo:hover .cine-nav__icon { transform: scale(1.06); } .cine-nav__brand { display: none !important; } /* Hamburguer: 3 RISCOS de tamanhos diferentes, GRANDE, SEM borda/fundo */ .cine-burger { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; width: clamp(40px, 5vw, 52px); height: clamp(40px, 5vw, 52px); background: none; border: 0; padding: 0; cursor: pointer; } .cine-burger span { display: block; height: 3px; border-radius: 3px; background: var(--cine-ink); transition: width .35s var(--cine-ease), background .3s, transform .35s var(--cine-ease); } .cine-burger span:nth-child(1) { width: 100%; } .cine-burger span:nth-child(2) { width: 62%; } .cine-burger span:nth-child(3) { width: 84%; } .cine-burger:hover span:nth-child(1) { width: 84%; } .cine-burger:hover span:nth-child(2) { width: 100%; } .cine-burger:hover span:nth-child(3) { width: 62%; } .cine-burger:hover span { background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; background-clip: padding-box; } /* ── MENU SPLIT overlay (clone gta6) ────────────────────────── */ .cine-menu { position: fixed; inset: 0; z-index: 1500; display: grid; grid-template-columns: 55% 45%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--cine-ease), visibility .5s; } .cine-menu.open { opacity: 1; visibility: visible; pointer-events: auto; } .cine-menu__left { position: relative; background: var(--cine-bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px; overflow: hidden; transform: translateX(-40px); opacity: 0; transition: transform .6s var(--cine-ease) .08s, opacity .6s ease .08s; } .cine-menu.open .cine-menu__left { transform: translateX(0); opacity: 1; } .cine-menu__left::before { content: ''; position: absolute; inset: 0; background: url('/assets/cinematic/hero.png?v=cine13') center/cover no-repeat; opacity: .10; filter: grayscale(.3) brightness(.5); } .cine-menu__bigimg { position: relative; z-index: 1; width: clamp(180px, 34vh, 360px); height: clamp(180px, 34vh, 360px); border-radius: 28px; object-fit: cover; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); } .cine-menu__leftfoot { position: absolute; bottom: 36px; left: 0; right: 0; z-index: 1; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; color: var(--cine-lav); font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; } .cine-menu__right { background: var(--cine-panel); height: 100%; display: flex; flex-direction: column; padding: clamp(20px,3vw,40px) clamp(22px,3.5vw,52px); transform: translateX(40px); opacity: 0; transition: transform .6s var(--cine-ease) .14s, opacity .6s ease .14s; } .cine-menu.open .cine-menu__right { transform: translateX(0); opacity: 1; } .cine-menu__rhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(24px,4vh,52px); } .cine-menu__rbrand { display: flex; align-items: center; gap: 12px; } .cine-menu__rbrand .cine-menu__ricon { height: 38px; width: 38px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(232,67,26,.45)); } .cine-menu__rbrand span { font-weight: 700; letter-spacing: 1px; color: var(--cine-ink); font-size: 1.1rem; text-transform: uppercase; } .cine-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--cine-ink); cursor: pointer; transition: all .2s var(--cine-ease); } .cine-close:hover { background: rgba(255,255,255,.13); transform: rotate(90deg); } .cine-close svg { width: 18px; height: 18px; } .cine-menu__links { list-style: none; margin: 0; padding: 0; flex: 1; } .cine-menu__links li { border-bottom: 0; } .cine-menu__links a { display: flex; align-items: center; justify-content: space-between; padding: clamp(10px,1.6vh,18px) 4px; font-size: clamp(1.4rem, 3.4vh, 2.3rem); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cine-ink); text-decoration: none; transition: color .2s, padding-left .25s var(--cine-ease); } .cine-menu__links a .chev { color: var(--cine-lav); font-weight: 300; transition: color .2s, transform .25s; } .cine-menu__links a:hover { padding-left: 16px; } .cine-menu__links a:hover, .cine-menu__links a:hover .chev { background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cine-menu__rfoot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); } .cine-pickbtn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); color: var(--cine-lav); padding: 8px 14px; border-radius: 999px; font-family: inherit; font-size: .85rem; letter-spacing: .5px; transition: all .2s; position: relative; } .cine-pickbtn:hover { background: rgba(255,255,255,.1); color: var(--cine-ink); } .cine-pickbtn .opts { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 100%; background: #1c1a28; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; display: none; flex-direction: column; gap: 2px; z-index: 5; } .cine-pickbtn.open .opts { display: flex; } .cine-pickbtn .opts button { background: none; border: none; color: var(--cine-lav); font-family: inherit; font-size: .85rem; text-align: left; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; } .cine-pickbtn .opts button:hover { background: rgba(255,255,255,.08); color: var(--cine-ink); } /* ═══════════════════════════════════════════════════════════════ HERO FULL-BLEED (imagem cobre a viewport inteira) ═══════════════════════════════════════════════════════════════ */ /* ART-FIRST: a arte do dragao manda. Conteudo ancorado embaixo-esquerda, deixando a cabeca/olho do dragao livres. Texto minimo, cinematografico. */ .cine-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right; padding: calc(var(--cine-nav-h) + 24px) clamp(28px,7vw,110px) clamp(64px,11vh,110px); overflow: hidden; isolation: isolate; } /* desktop: afasta o bloco de conteudo da borda direita (~200px) p/ respirar */ @media (min-width: 900px) { .cine-hero { padding-right: clamp(200px, 28vw, 560px); } } .cine-hero__bg { position: absolute; inset: -32% 0 -32% 0; z-index: -2; background-size: cover; background-position: 26% 30%; will-change: transform; } /* overlay LEVE: dragao bem visivel. Escurece SO a base (onde o texto vive) e um lado, suaviza o topo pra nav. Sem veu uniforme. */ .cine-hero__overlay { position: absolute; inset: 0; z-index: -1; background: /* base p/ leitura + leve no topo (nav). Esquerda (face do dragao) fica BRILHANTE; canto inferior-direito (onde mora o conteudo) recebe um reforco sutil. */ linear-gradient(180deg, rgba(8,7,16,.32) 0%, rgba(8,7,16,0) 18%, rgba(8,7,16,0) 52%, rgba(8,7,16,.64) 84%, rgba(8,7,16,.96) 100%), radial-gradient(80% 70% at 86% 92%, rgba(8,7,16,.5) 0%, rgba(8,7,16,0) 70%); } /* feather/vinheta nas bordas pra arte blendar com o escuro (parece que continua) */ .cine-hero__feather { position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 170px 64px rgba(6,5,12,.92), inset 0 0 60px 8px rgba(6,5,12,.5); } .cine-hero__inner { position: relative; max-width: 560px; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; } .cine-hero__logo { width: clamp(240px, 33vw, 440px); height: auto; margin-bottom: 2px; /* logo SOLTA com fundo recortado (PNG transparente) — flutua sobre o dragao */ filter: drop-shadow(0 14px 42px rgba(255,90,31,.5)) drop-shadow(0 2px 10px rgba(0,0,0,.65)); } .cine-hero__line { margin: 0 0 0 auto; color: var(--cine-lav); font-weight: 300; font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.55; max-width: 440px; text-shadow: 0 2px 18px rgba(0,0,0,.75); } .cine-hero__season { font-size: clamp(.78rem, 1.5vw, .95rem); letter-spacing: 4px; text-transform: uppercase; font-weight: 700; } /* countdown INLINE no eyebrow — herda font-size/family/peso/cor/letter-spacing do .cine-hero__season */ .cine-hero__cd { font: inherit; letter-spacing: inherit; } .cine-hero__cd:not(:empty)::before { content: ' · '; } .cine-hero__row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: flex-end; margin-top: 6px; } .cine-scrolldown { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); background: none; border: none; color: var(--cine-lav); cursor: pointer; z-index: 2; font-size: 2rem; line-height: 1; animation: cineBob 1.8s ease-in-out infinite; } @keyframes cineBob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} } /* ── Container generico ─────────────────────────────────────── */ .cine-wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(18px,4vw,48px); } .cine-eyebrow { display: inline-block; font-size: .82rem; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; color: var(--cine-accent); } .cine-h2 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.02; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 22px; color: var(--cine-ink); } .cine-h2 .grad-text { display: inline; } .cine-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.75; color: var(--cine-lav); max-width: 720px; font-weight: 300; } /* ── SECAO DE CONTEUDO (clone gta2) ─────────────────────────── */ .cine-lore { padding: clamp(80px,14vh,160px) 0; background: transparent; } .cine-lore__bigimg { margin-top: 52px; border-radius: var(--cine-radius); overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.5); position: relative; height: clamp(280px, 52vh, 600px); } .cine-lore__bgimg { position: absolute; inset: -32% 0 -32% 0; background-size: cover; background-position: center; will-change: transform; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* ═══════════════════════════════════════════════════════════════ CARDS full-width MAIORES (clone gta3/gta4) ═══════════════════════════════════════════════════════════════ */ .cine-cards { padding: clamp(70px,12vh,150px) 0; background: transparent; } .cine-cards--last { padding-top: 0; } .cine-cards__stack { display: flex; flex-direction: column; gap: clamp(28px,5vh,56px); } .cine-card { position: relative; border-radius: var(--cine-radius); overflow: hidden; min-height: clamp(460px, 62vh, 680px); display: flex; align-items: flex-end; box-shadow: 0 28px 80px rgba(0,0,0,.5); isolation: isolate; } .cine-card__bg { position: absolute; inset: -32% 0 -32% 0; z-index: -2; background-size: cover; background-position: center; will-change: transform; /* feather: a imagem some nas laterais (parece que continua, nao retangulo seco) */ -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .cine-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,20,.94) 0%, rgba(8,8,20,.7) 44%, rgba(8,8,20,.16) 100%); } .cine-card__body { padding: clamp(32px,4vw,64px); max-width: 640px; } .cine-card__num-row { display: flex; gap: clamp(24px,4vw,56px); flex-wrap: wrap; margin: 10px 0 28px; } .cine-card__num { line-height: 1; } .cine-card__num b { display: block; font-size: clamp(2.4rem,6vw,4rem); font-weight: 700; letter-spacing: .5px; } .cine-card__num span { display: block; font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cine-lav); margin-top: 8px; } .cine-card__list { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cine-card__list li { display: flex; align-items: center; gap: 12px; color: var(--cine-ink); font-size: 1.08rem; font-weight: 300; } .cine-card__list li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background-image: linear-gradient(90deg,#e8431a,#f5a623); } .cine-card__title { font-size: clamp(1.9rem,4.5vw,3.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cine-ink); margin: 0 0 16px; line-height: 1.03; } .cine-card__txt { color: var(--cine-lav); font-weight: 300; font-size: 1.05rem; line-height: 1.7; margin: 0 0 30px; max-width: 480px; } /* ═══════════════════════════════════════════════════════════════ RATES & ESTILO — redesign premium (EXP em destaque + stats limpos) ═══════════════════════════════════════════════════════════════ */ /* RATES: a arte de lava/brasas VOLTA a aparecer (overlay mais leve + posicao), conteudo centralizado e equilibrado no desktop (nao colado a esquerda) */ #events-rates { align-items: center; text-align: center; min-height: clamp(520px, 66vh, 700px); } #events-rates .cine-card__bg { background-position: center; opacity: 1; /* lava na esquerda fica visivel; clareia o centro inferior pro texto respirar */ } /* overlay do rates: radial central escuro p/ leitura, deixa as brasas das bordas vivas */ #events-rates.cine-card::before { background: radial-gradient(120% 90% at 50% 60%, rgba(8,8,20,.88) 0%, rgba(8,8,20,.62) 42%, rgba(8,8,20,.30) 72%, rgba(8,8,20,.12) 100%), linear-gradient(0deg, rgba(8,8,20,.55) 0%, rgba(8,8,20,0) 40%); } .cine-rates__body { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .cine-rates__body .cine-eyebrow { margin-bottom: 12px; } .cine-rates__hero { display: block; margin-left: auto; margin-right: auto; text-align: center; } .cine-rates__stats { margin-left: auto; margin-right: auto; } .cine-rates__stat { align-items: center; text-align: center; } .cine-rates__txt { text-align: center; max-width: 560px; } .cine-rates__hero { margin: 4px 0 26px; padding: 22px 26px; border-radius: var(--cine-radius-sm); background: linear-gradient(150deg, rgba(232,67,26,.12), rgba(255,138,61,.03) 60%, transparent); border: 1px solid rgba(255,138,61,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); display: inline-block; min-width: 280px; } .cine-rates__hero-lbl { display: block; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--cine-accent); font-weight: 700; } .cine-rates__hero-num { display: block; font-size: clamp(2.6rem,7vw,4.6rem); font-weight: 700; letter-spacing: .5px; line-height: 1; margin: 8px 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } .cine-rates__hero-note { display: block; font-size: .82rem; color: var(--cine-lav-dim); font-weight: 300; letter-spacing: .4px; } .cine-rates__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 26px; max-width: 460px; } .cine-rates__stat { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 16px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.07); transition: border-color .25s var(--cine-ease), transform .25s var(--cine-ease); } .cine-rates__stat:hover { border-color: rgba(255,138,61,.32); transform: translateY(-3px); } .cine-rates__ic { font-size: 1.3rem; line-height: 1; margin-bottom: 4px; opacity: .92; } .cine-rates__val { font-size: clamp(1.15rem,2.4vw,1.5rem); font-weight: 700; letter-spacing: .3px; line-height: 1; } .cine-rates__cap { font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cine-lav-dim); font-weight: 600; } .cine-rates__txt { margin-bottom: 26px; } @media (max-width: 560px) { .cine-rates__stats { grid-template-columns: 1fr; max-width: 320px; } .cine-rates__hero { min-width: 0; width: 100%; } } /* ═══════════════════════════════════════════════════════════════ NOTICIAS AO VIVO (substitui "Mundo de Vermillion") ═══════════════════════════════════════════════════════════════ */ .cine-news { padding: clamp(70px,12vh,150px) 0; background: transparent; } /* ART-FIRST: 1 destaque grande (capa dominante) + coluna de 3 secundarios */ .cine-news__grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(16px,2vw,26px); margin-top: 44px; align-items: stretch; } .cine-news__cat { display: inline-block; align-self: flex-start; font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--cine-cream-ink); padding: 4px 11px; border-radius: 999px; } .cine-news__date { font-size: .76rem; color: var(--cine-lav-dim); letter-spacing: .5px; } /* ── DESTAQUE: capa full-bleed, texto sobreposto ── */ .cine-news__feat { position: relative; border-radius: var(--cine-radius); overflow: hidden; isolation: isolate; min-height: clamp(360px, 48vh, 520px); display: flex; align-items: flex-end; box-shadow: 0 24px 70px rgba(0,0,0,.5); transition: transform .3s var(--cine-ease), box-shadow .3s; } .cine-news__feat.is-clickable { cursor: pointer; } .cine-news__featbg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform .6s var(--cine-ease); /* cine15: feather topo+base+lados pra capa derreter no fundo unico */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .cine-news__feat:hover .cine-news__featbg { transform: scale(1.05); } .cine-news__feat::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,8,20,.97) 4%, rgba(8,8,20,.62) 46%, rgba(8,8,20,.06) 100%); } .cine-news__feat:hover { box-shadow: 0 30px 80px rgba(0,0,0,.6); } .cine-news__featbody { padding: clamp(22px,3vw,40px); display: flex; flex-direction: column; gap: 12px; width: 100%; } .cine-news__htitle { font-size: clamp(1.5rem,2.8vw,2.3rem); font-weight: 700; color: var(--cine-ink); line-height: 1.08; letter-spacing: .4px; text-transform: uppercase; margin: 0; text-shadow: 0 2px 22px rgba(0,0,0,.7); } .cine-news__hexc { font-size: .96rem; color: var(--cine-lav); font-weight: 300; line-height: 1.55; margin: 0; max-width: 90%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cine-news__featfoot { display: flex; align-items: center; gap: 18px; margin-top: 4px; } .cine-news__read { font-size: .82rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--cine-accent); display: inline-flex; align-items: center; gap: 6px; transition: gap .25s var(--cine-ease); } .cine-news__feat:hover .cine-news__read { gap: 11px; } /* ── COLUNA de secundarios: capa lateral grande + titulo curto ── */ .cine-news__col { display: grid; grid-template-rows: repeat(3, 1fr); gap: clamp(14px,1.6vw,20px); } .cine-news__side { position: relative; display: grid; grid-template-columns: 42% 1fr; gap: 14px; align-items: stretch; border-radius: var(--cine-radius-sm); overflow: hidden; background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.08); transition: transform .25s var(--cine-ease), border-color .25s, box-shadow .25s; min-height: 116px; } .cine-news__side.is-clickable { cursor: pointer; } .cine-news__side.is-clickable:hover { transform: translateY(-4px); border-color: rgba(255,138,61,.42); box-shadow: 0 16px 40px rgba(0,0,0,.45); } .cine-news__sidebg { position: relative; background-size: cover; background-position: center; background-color: #16142a; padding: 10px; display: flex; align-items: flex-start; } .cine-news__sidebg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,20,0) 50%, rgba(20,18,38,.9) 100%); } .cine-news__side .cine-news__cat { position: relative; z-index: 1; font-size: .58rem; padding: 3px 9px; } .cine-news__sidemeta { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 16px 14px 0; min-width: 0; } .cine-news__stitle { font-size: 1.02rem; font-weight: 700; color: var(--cine-ink); line-height: 1.22; letter-spacing: .2px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cine-news__loading, .cine-news__empty { grid-column: 1 / -1; text-align: center; color: var(--cine-lav); padding: 50px 20px; font-weight: 300; font-size: 1.05rem; } .cine-news__empty .ttl { display: block; font-size: 1.4rem; font-weight: 700; color: var(--cine-ink); margin-bottom: 8px; letter-spacing: .5px; } .cine-news__more { margin-top: 38px; text-align: center; } /* ═══════════════════════════════════════════════════════════════ GUERRAS & EVENTOS — REDESENHO (destaque + grid) ═══════════════════════════════════════════════════════════════ */ .cine-events { padding: clamp(70px,12vh,150px) 0; background: transparent; } .cine-events__layout { display: grid; grid-template-columns: 1.05fr 1.25fr; gap: clamp(18px,2.4vw,30px); margin-top: 46px; align-items: stretch; } .cine-event-hero { position: relative; border-radius: var(--cine-radius); overflow: hidden; isolation: isolate; min-height: 380px; display: flex; align-items: flex-end; box-shadow: 0 24px 70px rgba(0,0,0,.5); } .cine-event-hero__bg { position: absolute; inset: -32% 0 -32% 0; z-index: -2; background-size: cover; background-position: center; will-change: transform; /* cine15: feather topo+base+lados */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 84%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .cine-event-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,8,20,.96) 6%, rgba(8,8,20,.55) 55%, rgba(8,8,20,.2) 100%); } .cine-event-hero__body { padding: clamp(26px,3vw,40px); } .cine-event__tag { display: inline-block; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--cine-cream-ink); padding: 5px 13px; border-radius: 999px; margin-bottom: 14px; } .cine-event-hero__title { font-size: clamp(1.7rem,3.4vw,2.6rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--cine-ink); margin: 0 0 10px; line-height: 1.05; } .cine-event-hero__txt { color: var(--cine-lav); font-weight: 300; font-size: 1rem; line-height: 1.6; margin: 0 0 16px; max-width: 420px; } .cine-events__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.5vw,18px); } .cine-event { background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--cine-radius-sm); padding: clamp(16px,1.8vw,22px); display: flex; flex-direction: column; gap: 7px; transition: transform .25s var(--cine-ease), border-color .25s, box-shadow .25s; } .cine-event:hover { transform: translateY(-4px); border-color: rgba(255,138,61,.45); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .cine-event__ico { font-size: 1.7rem; line-height: 1; } .cine-event__name { font-size: 1.12rem; font-weight: 700; color: var(--cine-ink); margin: 2px 0 0; letter-spacing: .4px; } .cine-event__time { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; letter-spacing: .5px; color: var(--cine-accent); text-transform: uppercase; } .cine-event__desc { font-size: .88rem; color: var(--cine-lav); font-weight: 300; line-height: 1.5; } .cine-events__cta { margin-top: 38px; text-align: center; } /* ═══════════════════════════════════════════════════════════════ RANKING AO VIVO (substitui o card "Trailer") ═══════════════════════════════════════════════════════════════ */ .cine-rank { padding: clamp(70px,12vh,150px) 0; background: transparent; } .cine-rank__card { margin-top: 44px; border-radius: var(--cine-radius); overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 70px rgba(0,0,0,.5); background: rgba(255,255,255,.02); } .cine-rank__head, .cine-rank__row { display: grid; grid-template-columns: 64px 2fr 1.4fr .8fr .8fr; align-items: center; gap: 12px; padding: 16px clamp(18px,2.4vw,32px); } .cine-rank__head { color: var(--cine-cream-ink); font-weight: 700; font-size: .76rem; letter-spacing: 1.5px; text-transform: uppercase; } .cine-rank__body { display: flex; flex-direction: column; } .cine-rank__row { border-top: 1px solid rgba(255,255,255,.06); transition: background .2s; } .cine-rank__row:hover { background: rgba(255,255,255,.04); } .cine-rank__pos { font-weight: 700; font-size: 1.2rem; color: var(--cine-ink); } .cine-rank__row--top1 .cine-rank__pos, .cine-rank__row--top2 .cine-rank__pos, .cine-rank__row--top3 .cine-rank__pos { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-image: var(--cine-grad); background-size: 300% 100%; } .cine-rank__name { font-weight: 700; font-size: 1.05rem; color: var(--cine-ink); letter-spacing: .3px; } .cine-rank__guild { display: block; font-size: .76rem; color: var(--cine-lav-dim); font-weight: 400; margin-top: 2px; } .cine-rank__cls { font-size: .9rem; color: var(--cine-lav); font-weight: 300; } .cine-rank__lvl { font-size: 1rem; color: var(--cine-ink); font-weight: 600; } .cine-rank__rr { font-size: 1rem; color: var(--cine-accent); font-weight: 700; } .cine-rank__loading, .cine-rank__empty { text-align: center; color: var(--cine-lav); padding: 56px 20px; font-weight: 300; font-size: 1.05rem; } .cine-rank__empty .ttl { display: block; font-size: 1.5rem; font-weight: 700; color: var(--cine-ink); margin-bottom: 8px; letter-spacing: .5px; } .cine-rank__more { margin-top: 36px; text-align: center; } .cine-rank__wrap { margin-top: 44px; } /* ── TOP 3 PODIUM (cards grandes premium) ── */ .cine-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.8vw,24px); align-items: end; margin-bottom: clamp(28px,3.4vw,44px); } .cine-pod { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; text-align: center; border-radius: var(--cine-radius); padding: clamp(22px,2.4vw,30px) clamp(16px,1.8vw,22px) clamp(20px,2.2vw,26px); background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.10); transition: transform .3s var(--cine-ease), border-color .3s, box-shadow .3s; } .cine-pod::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .9; background: radial-gradient(120% 70% at 50% 0%, rgba(232,67,26,.16), rgba(232,67,26,0) 62%); } .cine-pod:hover { transform: translateY(-6px); box-shadow: 0 26px 64px rgba(0,0,0,.55); } /* 1o lugar: maior, mais alto, borda de fogo */ .cine-pod--1 { transform: translateY(-18px); border-color: rgba(255,138,61,.4); box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 38px rgba(232,67,26,.18); padding-top: clamp(28px,3vw,38px); } .cine-pod--1::before { background: radial-gradient(130% 80% at 50% 0%, rgba(245,166,35,.28), rgba(232,67,26,.06) 55%, transparent 75%); opacity: 1; } .cine-pod--1:hover { transform: translateY(-24px); } .cine-pod--1 .cine-pod__art { width: clamp(78px,9vw,104px); height: clamp(78px,9vw,104px); font-size: clamp(2.4rem,4.4vw,3.1rem); } .cine-pod--1 .cine-pod__name { font-size: clamp(1.2rem,2vw,1.5rem); } .cine-pod--2 { border-color: rgba(215,221,227,.26); } .cine-pod--3 { border-color: rgba(232,150,90,.26); } .cine-pod__medal { position: absolute; top: 12px; left: 14px; font-size: 1.5rem; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); } .cine-pod__art { width: clamp(64px,7vw,84px); height: clamp(64px,7vw,84px); margin: 4px auto 14px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: clamp(2rem,3.6vw,2.5rem); background: linear-gradient(160deg, rgba(232,67,26,.22), rgba(255,138,61,.05)); border: 1px solid rgba(255,138,61,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .cine-pod__name { font-size: clamp(1.05rem,1.7vw,1.3rem); font-weight: 700; color: var(--cine-ink); letter-spacing: .4px; text-transform: uppercase; line-height: 1.1; } .cine-pod__cls { font-size: .82rem; color: var(--cine-lav); font-weight: 300; margin-top: 4px; } .cine-pod__guild { display: block; font-size: .72rem; color: var(--cine-lav-dim); margin-top: 2px; } .cine-pod__badges { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0; min-height: 20px; flex-wrap: wrap; } .cine-pod__badges .cine-rank__vip { font-size: .6rem; } .cine-pod__gs { font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .cine-pod__gslbl { font-size: .62rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cine-lav-dim); font-weight: 700; margin-top: 5px; } .cine-pod__meta { display: flex; justify-content: center; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } .cine-pod__meta span { font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--cine-lav-dim); font-weight: 600; } .cine-pod__meta b { display: block; font-size: 1.05rem; color: var(--cine-ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 2px; letter-spacing: .3px; text-transform: none; } @media (max-width: 760px) { .cine-podium { grid-template-columns: 1fr; gap: 12px; } .cine-pod, .cine-pod--1 { transform: none; } .cine-pod--1:hover, .cine-pod:hover { transform: translateY(-4px); } .cine-pod { display: grid; grid-template-columns: auto 1fr auto; align-items: center; text-align: left; gap: 14px; padding: 16px 18px; } .cine-pod__medal { position: static; } .cine-pod__art { margin: 0; } .cine-pod__badges { justify-content: flex-start; margin: 8px 0 0; grid-column: 2; } .cine-pod__name, .cine-pod__cls, .cine-pod__guild { grid-column: 2; } .cine-pod__gs, .cine-pod__gslbl { grid-column: 3; grid-row: 1; text-align: right; } .cine-pod__meta { grid-column: 1 / -1; justify-content: flex-start; } } /* ═══════════════════════════════════════════════════════════════ PERSONAGENS — CARROSSEL de 15 cards UNIFORMES ═══════════════════════════════════════════════════════════════ */ .cine-classes { padding: clamp(70px,12vh,150px) 0; background: transparent; } .cine-classes__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .cine-carousel__nav { display: flex; gap: 10px; } .cine-carousel__btn { width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: var(--cine-ink); font-size: 1.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--cine-ease); } .cine-carousel__btn:hover { background: rgba(255,255,255,.13); transform: scale(1.06); } .cine-carousel__btn:disabled { opacity: .3; cursor: default; transform: none; } .cine-carousel { margin-top: 40px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; } .cine-carousel::-webkit-scrollbar { display: none; } .cine-carousel.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; } .cine-carousel__track { display: flex; gap: clamp(16px,2vw,24px); padding: 4px clamp(18px,4vw,48px); } /* perspectiva no trilho p/ o tilt 3D dos cards */ .cine-carousel__track { perspective: 1100px; } .cls-card { position: relative; flex: 0 0 clamp(220px, 24vw, 300px); aspect-ratio: 3/4.2; border-radius: var(--cine-radius); overflow: hidden; isolation: isolate; box-shadow: 0 20px 60px rgba(0,0,0,.45); scroll-snap-align: start; transform-style: preserve-3d; transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)); transition: transform .5s var(--cine-ease), box-shadow .3s; } .cls-card.tilting { transition: transform .12s linear, box-shadow .3s; will-change: transform; } .cls-card:hover { --ty: -6px; box-shadow: 0 28px 70px rgba(0,0,0,.55); } .cls-card__img { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center top; background-color: #14122a; display: flex; align-items: center; justify-content: center; transition: transform .5s var(--cine-ease); /* cine15: feather no TOPO (sem retangulo seco) + suave nas laterais — a arte derrete no card/fundo */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .cls-card:hover .cls-card__img { transform: scale(1.06); } /* glow de fogo leve seguindo o mouse */ .cls-card__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(180px 180px at var(--gx,50%) var(--gy,50%), rgba(255,138,61,.34), rgba(255,138,61,0) 60%); transition: opacity .3s ease; mix-blend-mode: screen; } .cls-card:hover .cls-card__glow { opacity: 1; } body.no-motion .cls-card { transform: none !important; } body.no-motion .cls-card__glow { display: none; } .cls-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(8,8,20,.96) 100%); } .cls-card__cap { position: absolute; z-index: 2; bottom: 22px; left: 22px; right: 22px; } .cls-card__cap b { display: block; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--cine-ink); } .cls-card__cap span { display: block; font-size: .85rem; color: var(--cine-lav); font-weight: 300; margin-top: 4px; line-height: 1.35; } /* ── RODAPE (clone gta5) ────────────────────────────────────── */ .cine-foot { background: transparent; padding: clamp(70px,12vh,140px) 0 50px; text-align: center; border-top: 0; } .cine-foot__logo { width: 150px; height: auto; margin: 0 auto 22px; filter: drop-shadow(0 10px 30px rgba(255,90,31,.4)); } .cine-foot__cta { font-size: clamp(2rem,5vw,3.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; } .cine-foot__sub { color: var(--cine-lav); font-weight: 300; font-size: 1.1rem; margin: 0 0 32px; } .cine-foot__pills { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; } .cine-foot__social { display: flex; gap: 16px; justify-content: center; margin-bottom: 28px; } .cine-foot__social a { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); color: #ECE9F5; transition: all .2s; } .cine-foot__social a:hover { color: #ffffff; background: rgba(88,101,242,.85); border-color: rgba(88,101,242,.9); transform: translateY(-3px); } .cine-foot__social svg { width: 20px; height: 20px; } .cine-foot__links { display: flex; gap: clamp(14px,3vw,30px); justify-content: center; flex-wrap: wrap; margin-bottom: 26px; } .cine-foot__links a { color: var(--cine-lav); font-size: .94rem; letter-spacing: .5px; transition: color .2s; } .cine-foot__links a:hover { color: var(--cine-ink); } .cine-foot__note { color: var(--cine-lav-dim); font-size: .8rem; font-weight: 300; max-width: 660px; margin: 0 auto; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ HERO VIVO — canvas de brasas, olhos do dragao, respiro, grao ═══════════════════════════════════════════════════════════════ */ /* canvas de brasas sobre o hero, abaixo do conteudo */ .cine-hero__sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; opacity: .9; } /* respiro lento do fundo (scale 1.0 -> 1.03) */ @keyframes cineBreathe { 0%,100%{ transform: scale(1) translate3d(0,0,0); } 50%{ transform: scale(1.03) translate3d(0,0,0); } } .cine-hero__bg { animation: cineBreathe 14s ease-in-out infinite; } body.no-motion .cine-hero__bg { animation: none !important; } /* olhos do dragao: dois pontos de glow posicionados sobre a hero.png, acendem na direcao do cursor (intensidade via --eye) */ .cine-hero__eyes { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cine-eye { position: absolute; width: clamp(10px, 1.4vw, 18px); height: clamp(10px, 1.4vw, 18px); border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff2c0 0%, #ff7a1f 45%, rgba(255,90,31,0) 72%); filter: blur(.5px); transform: translate(-50%, -50%) scale(var(--eye, .4)); transition: opacity .4s ease; mix-blend-mode: screen; } /* posicoes calibradas p/ a face do dragao na hero.png (ajustaveis) */ .cine-eye--l { left: 47.3%; top: 38%; } .cine-eye--r { left: 52.7%; top: 38%; } body:not(.no-motion) .cine-hero.eyes-on .cine-eye { opacity: calc(.35 + var(--eye, 0) * .65); } /* grao de filme sutil global */ .cine-grain { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: cineGrain 1.2s steps(3) infinite; } @keyframes cineGrain { 0%{transform:translate(0,0)} 33%{transform:translate(-4%,2%)} 66%{transform:translate(3%,-3%)} 100%{transform:translate(0,0)} } body.no-motion .cine-grain { animation: none !important; } /* reveal de entrada elegante do hero (stagger) */ .cine-hero__inner > * { opacity: 0; transform: translateY(22px); } .cine-hero.ready .cine-hero__inner > * { opacity: 1; transform: none; transition: opacity .9s var(--cine-ease), transform 1s var(--cine-ease); } .cine-hero.ready .cine-hero__inner > *:nth-child(1){ transition-delay:.05s } .cine-hero.ready .cine-hero__inner > *:nth-child(2){ transition-delay:.16s } .cine-hero.ready .cine-hero__inner > *:nth-child(3){ transition-delay:.27s } .cine-hero.ready .cine-hero__inner > *:nth-child(4){ transition-delay:.38s } .cine-hero.ready .cine-hero__inner > *:nth-child(5){ transition-delay:.49s } .cine-hero.ready .cine-hero__inner > *:nth-child(6){ transition-delay:.60s } body.no-motion .cine-hero__inner > * { opacity: 1 !important; transform: none !important; } /* ── PULSO AO VIVO (faixa fina integrada no hero) ───────────── */ .cine-pulse { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; padding: 8px 18px; border-radius: 999px; background: rgba(255,255,255,.05); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .9rem; color: var(--cine-lav); max-width: 92vw; } .cine-pulse__live { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cine-ink); white-space: nowrap; } .cine-pulse__dot { width: 9px; height: 9px; border-radius: 50%; background: #3ad07a; box-shadow: 0 0 0 0 rgba(58,208,122,.6); animation: cinePing 2s ease-out infinite; flex: 0 0 auto; } @keyframes cinePing { 0%{box-shadow:0 0 0 0 rgba(58,208,122,.5)} 70%{box-shadow:0 0 0 8px rgba(58,208,122,0)} 100%{box-shadow:0 0 0 0 rgba(58,208,122,0)} } .cine-pulse__num { color: var(--cine-ink); font-weight: 700; } .cine-pulse__sep { width: 1px; height: 16px; background: rgba(255,255,255,.16); } /* Ticker que ALTERNA EM FADE — cada msg curta aparece INTEIRA (sem clip horizontal). O contentor cresce ate o tamanho da maior msg via um "ghost" invisivel; as msgs reais ficam absolutas e so trocam por opacidade. Nunca corta. */ .cine-pulse__ticker { position: relative; display: inline-grid; place-items: center; height: 1.4em; max-width: min(60vw, 380px); color: var(--cine-lav); font-weight: 600; } .cine-pulse__ticker .cine-tk { grid-area: 1 / 1; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: 0; transition: opacity .55s var(--cine-ease); pointer-events: none; } .cine-pulse__ticker .cine-tk.on { opacity: 1; } body.no-motion .cine-pulse__ticker .cine-tk { transition: none; } body.no-motion .cine-pulse__dot { animation: none; } @media (max-width: 560px){ .cine-pulse { gap: 8px; padding: 8px 14px; } .cine-pulse__sep { display: none; } .cine-pulse__ticker { max-width: 78vw; } } /* ═══════════════════════════════════════════════════════════════ LIVES / STREAMERS — "AO VIVO" estilo Twitch minimalista ═══════════════════════════════════════════════════════════════ */ .cine-lives { position: relative; padding: clamp(70px,12vh,150px) 0; background: transparent; overflow: hidden; isolation: isolate; } /* fundo sutil branded: brasas vermelhas atras (camada de atmosfera, nao card) */ .cine-lives::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 50% -6%, rgba(232,67,26,.12), rgba(232,67,26,0) 60%), radial-gradient(40% 60% at 88% 110%, rgba(255,138,61,.08), rgba(255,138,61,0) 60%); } .cine-lives__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(20px,2.6vw,32px); margin-top: 46px; max-width: 980px; } .cine-live { border-radius: var(--cine-radius-sm); overflow: hidden; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); transition: transform .25s var(--cine-ease), border-color .25s, box-shadow .25s; } .cine-live:hover { transform: translateY(-5px); border-color: rgba(255,138,61,.4); box-shadow: 0 18px 46px rgba(0,0,0,.45); } .cine-live__thumb { position: relative; aspect-ratio: 16/9; background-size: cover; background-position: center; } .cine-live__thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,8,20,.1) 40%, rgba(8,8,20,.7) 100%); } .cine-live__badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; background: #e8431a; color: #fff; font-weight: 700; font-size: .68rem; letter-spacing: 1.2px; padding: 4px 9px; border-radius: 5px; text-transform: uppercase; } .cine-live__badge::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: cineBlink 1.4s ease-in-out infinite; } @keyframes cineBlink { 0%,100%{opacity:1} 50%{opacity:.25} } body.no-motion .cine-live__badge::before { animation: none; } .cine-live__views { position: absolute; bottom: 12px; right: 12px; z-index: 2; background: rgba(8,8,20,.75); color: #fff; font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 5px; letter-spacing: .3px; } .cine-live__foot { display: flex; align-items: center; gap: 12px; padding: 14px 16px; } .cine-live__av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); } .cine-live__meta { min-width: 0; } .cine-live__title { font-size: .98rem; font-weight: 700; color: var(--cine-ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cine-live__sub { font-size: .82rem; color: var(--cine-lav-dim); margin-top: 2px; } .cine-live__sub b { color: var(--cine-accent); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ COUNTDOWN — proximo evento (na secao Guerras & Eventos) ═══════════════════════════════════════════════════════════════ */ .cine-countdown { display: flex; align-items: center; justify-content: center; gap: clamp(10px,1.4vw,20px); flex-wrap: wrap; margin: 40px 0 6px; } .cine-countdown__lbl { color: var(--cine-lav); font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; } .cine-countdown__lbl b { color: var(--cine-ink); font-weight: 700; } .cine-countdown__clock { display: inline-flex; align-items: baseline; gap: 8px; } .cine-cd-unit { display: inline-flex; flex-direction: column; align-items: center; min-width: 58px; } .cine-cd-unit b { font-size: clamp(1.6rem,3.4vw,2.4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background-image: var(--cine-grad); background-size: 300% 100%; animation: cineFire 7s linear infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cine-cd-unit span { font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cine-lav-dim); margin-top: 8px; } .cine-cd-colon { font-size: clamp(1.4rem,3vw,2rem); font-weight: 300; color: var(--cine-lav-dim); align-self: flex-start; line-height: 1; } body.no-motion .cine-cd-unit b { animation: none; } /* ── REVEAL (IntersectionObserver) ──────────────────────────── */ .reveal { opacity: 0; transform: translateY(54px) scale(.985); transition: opacity .9s var(--cine-ease), transform 1s var(--cine-ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } /* ── Movimento OFF / prefers-reduced-motion ─────────────────── */ body.no-motion .grad-anim, body.no-motion .grad-text { animation: none !important; } body.no-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.no-motion .cine-scrolldown { animation: none !important; } body.no-motion .cine-card__bg, body.no-motion .cine-hero__bg, body.no-motion .cine-lore__bgimg, body.no-motion .cine-event-hero__bg, body.no-motion .cls-card__img { transform: none !important; } /* prefers-reduced-motion: so corta o reveal/animacoes; o JS ja respeita p/ parallax */ @media (prefers-reduced-motion: reduce) { .grad-anim, .grad-text, .cine-scrolldown { animation: none !important; } .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── RESPONSIVO ─────────────────────────────────────────────── */ @media (max-width: 900px) { .cine-news__grid { grid-template-columns: 1fr; } .cine-news__feat { min-height: 320px; } } @media (max-width: 980px) { .cine-events__layout { grid-template-columns: 1fr; } .cine-event-hero { min-height: 300px; } } @media (max-width: 560px) { .cine-news__side { grid-template-columns: 38% 1fr; min-height: 100px; } .cine-news__stitle { -webkit-line-clamp: 2; } } @media (max-width: 860px) { .cine-menu { grid-template-columns: 1fr; } .cine-menu__left { display: none; } .cine-menu__right { padding: 26px 22px; } .cine-card { min-height: 440px; } .cine-card::before { background: linear-gradient(0deg, rgba(8,8,20,.96) 0%, rgba(8,8,20,.62) 56%, rgba(8,8,20,.25) 100%); } .cine-events__grid { grid-template-columns: repeat(2, 1fr); } /* Ranking: vira layout de 3 colunas (pos | nome+classe | nivel/resets) */ .cine-rank__head { display: none; } .cine-rank__row { grid-template-columns: 50px 1fr auto; } .cine-rank__cls { display: none; } .cine-rank__rr { display: none; } .cls-card { flex-basis: 70vw; } } @media (max-width: 480px) { .cine-nav__brand { display: none; } .cine-events__grid { grid-template-columns: 1fr; } .cine-classes__head { gap: 14px; } .cls-card { flex-basis: 80vw; } } /* ═══════════════════════════════════════════════════════════════ WIDGET DE LIVE FLUTUANTE (canto inferior ESQUERDO) Vidro escuro + glow de fogo, slide-in, hover expande, minimizavel. ═══════════════════════════════════════════════════════════════ */ .cine-lw { position: fixed; left: 22px; bottom: 22px; z-index: 1400; font-family: inherit; pointer-events: none; } .cine-lw__card, .cine-lw__pin { pointer-events: auto; } /* CARD aberto */ .cine-lw__card { position: relative; width: 290px; cursor: pointer; background: linear-gradient(165deg, rgba(20,16,32,.82), rgba(10,9,22,.86)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,138,61,.28); border-radius: 16px; padding: 12px 12px 12px 14px; box-shadow: 0 16px 44px rgba(0,0,0,.6), 0 0 26px rgba(232,67,26,.18); transform: translateY(140%) scale(.96); opacity: 0; transition: transform .55s var(--cine-ease), opacity .45s var(--cine-ease), border-color .25s, box-shadow .35s; overflow: hidden; } .cine-lw.show .cine-lw__card { transform: translateY(0) scale(1); opacity: 1; } .cine-lw.min .cine-lw__card { transform: translateY(140%) scale(.96); opacity: 0; pointer-events: none; } .cine-lw__card::before { /* leve aura de fogo no topo */ content: ''; position: absolute; inset: -40% -40% auto -40%; height: 120px; background: radial-gradient(60% 80% at 24% 0%, rgba(255,90,31,.22), rgba(255,90,31,0) 70%); pointer-events: none; } .cine-lw__card:hover { border-color: rgba(255,138,61,.55); box-shadow: 0 22px 54px rgba(0,0,0,.7), 0 0 34px rgba(232,67,26,.3); } .cine-lw__close { position: absolute; top: 8px; right: 8px; z-index: 4; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--cine-lav); display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--cine-ease); opacity: 0; } .cine-lw__card:hover .cine-lw__close { opacity: 1; } .cine-lw__close:hover { background: rgba(255,255,255,.15); color: #fff; transform: rotate(90deg); } .cine-lw__close svg { width: 12px; height: 12px; } .cine-lw__row { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; } .cine-lw__avwrap { position: relative; flex: 0 0 auto; } .cine-lw__av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,138,61,.4); } .cine-lw__live { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; background: #e8431a; border: 2px solid #100c1c; box-shadow: 0 0 0 0 rgba(232,67,26,.7); animation: lwPing 1.8s ease-out infinite; } @keyframes lwPing { 0%{box-shadow:0 0 0 0 rgba(232,67,26,.6)} 70%{box-shadow:0 0 0 7px rgba(232,67,26,0)} 100%{box-shadow:0 0 0 0 rgba(232,67,26,0)} } body.no-motion .cine-lw__live { animation: none; } .cine-lw__meta { min-width: 0; } .cine-lw__top { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; } .cine-lw__badge { flex: 0 0 auto; white-space: nowrap; background: #e8431a; color: #fff; font-size: .58rem; font-weight: 700; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .cine-lw__name { font-size: .92rem; font-weight: 700; color: var(--cine-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .cine-lw__views { font-size: .76rem; color: var(--cine-lav-dim); margin-top: 3px; } .cine-lw__views b { color: var(--cine-accent); font-weight: 700; } /* HOVER expande (mini-thumb + titulo) */ .cine-lw__expand { position: relative; z-index: 2; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--cine-ease), opacity .35s var(--cine-ease), margin-top .4s var(--cine-ease); margin-top: 0; } .cine-lw__card:hover .cine-lw__expand { max-height: 160px; opacity: 1; margin-top: 11px; } .cine-lw__thumb { position: relative; height: 96px; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; } .cine-lw__thumb::after { content: ''; position: absolute; inset: 0; border-radius: 10px; background: linear-gradient(180deg, rgba(8,8,20,.15) 40%, rgba(8,8,20,.66) 100%); } .cine-lw__play { position: relative; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(232,67,26,.92); color: #fff; font-size: .85rem; padding-left: 2px; box-shadow: 0 4px 16px rgba(232,67,26,.5); } .cine-lw__livetitle { font-size: .82rem; color: var(--cine-lav); line-height: 1.35; margin-top: 9px; font-weight: 400; } /* PIN minimizado */ .cine-lw__pin { position: absolute; left: 0; bottom: 0; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: linear-gradient(165deg, rgba(20,16,32,.9), rgba(10,9,22,.92)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,138,61,.4); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(232,67,26,.28); transform: scale(0); opacity: 0; transition: transform .4s var(--cine-ease), opacity .3s, box-shadow .3s; } .cine-lw.min .cine-lw__pin { transform: scale(1); opacity: 1; } .cine-lw__pin:hover { box-shadow: 0 12px 34px rgba(0,0,0,.65), 0 0 30px rgba(232,67,26,.45); transform: scale(1.07); } .cine-lw__pin svg { width: 16px; height: 16px; } .cine-lw__pindot { position: absolute; top: 3px; right: 3px; width: 10px; height: 10px; border-radius: 50%; background: #e8431a; border: 2px solid #100c1c; animation: lwPing 1.8s ease-out infinite; } body.no-motion .cine-lw__pindot { animation: none; } @media (max-width: 560px) { .cine-lw { right: 14px; left: auto; bottom: 14px; } .cine-lw__card { width: 250px; padding: 10px 10px 10px 12px; } .cine-lw__av { width: 38px; height: 38px; } .cine-lw__card:hover .cine-lw__expand { max-height: 140px; } .cine-lw__thumb { height: 80px; } .cine-lw__pin { width: 42px; height: 42px; } } /* ═══════════════════════════════════════════════════════════════ MODAL UNIVERSAL (noticia + classe) — overlay + painel vidro ═══════════════════════════════════════════════════════════════ */ .cine-modal { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 3vw, 40px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--cine-ease), visibility .35s; } .cine-modal.open { opacity: 1; visibility: visible; pointer-events: auto; } .cine-modal__backdrop { position: absolute; inset: 0; background: rgba(5,5,14,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cine-modal__panel { position: relative; z-index: 2; width: min(720px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; background: linear-gradient(168deg, rgba(22,18,36,.96), rgba(11,10,24,.98)); border: 1px solid rgba(255,138,61,.22); border-radius: var(--cine-radius); box-shadow: 0 40px 110px rgba(0,0,0,.7), 0 0 50px rgba(232,67,26,.12); overflow: hidden; transform: translateY(18px) scale(.97); opacity: 0; transition: transform .4s var(--cine-ease), opacity .35s var(--cine-ease); } .cine-modal.open .cine-modal__panel { transform: none; opacity: 1; } .cine-modal__close { position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: rgba(8,8,20,.55); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--cine-ease); } .cine-modal__close:hover { background: rgba(232,67,26,.85); border-color: rgba(232,67,26,.9); transform: rotate(90deg); } .cine-modal__close svg { width: 18px; height: 18px; } .cine-modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; background: rgba(8,8,20,.55); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 1.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .2s var(--cine-ease); } .cine-modal__nav:hover { background: rgba(232,67,26,.85); border-color: rgba(232,67,26,.9); } .cine-modal__nav--prev { left: 12px; } .cine-modal__nav--next { right: 12px; } .cine-modal__nav[hidden] { display: none; } .cine-modal__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .cine-modal__scroll::-webkit-scrollbar { width: 9px; } .cine-modal__scroll::-webkit-scrollbar-thumb { background: rgba(255,138,61,.3); border-radius: 8px; } /* --- conteudo interno do modal (compartilhado) --- */ .cmod__cover { position: relative; height: clamp(190px, 34vh, 320px); background-size: cover; background-position: center; background-color: #14122a; } .cmod__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,20,.1) 30%, rgba(11,10,24,.96) 100%); } .cmod__body { padding: clamp(22px, 3vw, 38px); position: relative; } .cmod__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; margin-top: -52px; position: relative; z-index: 2; } .cmod__pill { display: inline-block; font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--cine-cream-ink); padding: 5px 12px; border-radius: 999px; } .cmod__date { font-size: .82rem; color: var(--cine-lav-dim); letter-spacing: .5px; } .cmod__title { font-size: clamp(1.5rem, 3.6vw, 2.4rem); font-weight: 700; color: var(--cine-ink); line-height: 1.08; letter-spacing: .4px; margin: 0 0 16px; text-transform: uppercase; } .cmod__role { font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: var(--cine-accent); margin: -8px 0 14px; } .cmod__text { font-size: 1.02rem; color: var(--cine-lav); font-weight: 300; line-height: 1.75; white-space: pre-line; } .cmod__sechead { font-size: .8rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 700; color: var(--cine-accent); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; } .cmod__sechead::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,138,61,.4), rgba(255,138,61,0)); } .cmod__skills { display: grid; grid-template-columns: 1fr; gap: 10px; } .cmod__skill { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--cine-radius-sm); padding: 13px 16px; } .cmod__skill b { display: block; font-size: 1rem; font-weight: 700; color: var(--cine-ink); letter-spacing: .3px; } .cmod__skill span { display: block; font-size: .88rem; color: var(--cine-lav); font-weight: 300; line-height: 1.5; margin-top: 4px; } .cmod__balance { background: linear-gradient(160deg, rgba(232,67,26,.08), rgba(255,138,61,.02)); border: 1px solid rgba(255,138,61,.18); border-radius: var(--cine-radius-sm); padding: 15px 18px; font-size: .96rem; color: var(--cine-lav); font-weight: 300; line-height: 1.7; margin-top: 16px; } /* --- grafico de balanceamento (barras 1-10, gradiente fogo) --- */ .cstats { display: grid; gap: 11px; } .cstat { display: grid; grid-template-columns: 96px 1fr 22px; align-items: center; gap: 12px; } .cstat__lbl { font-size: .82rem; letter-spacing: .5px; text-transform: uppercase; font-weight: 600; color: var(--cine-lav); white-space: nowrap; } .cstat__track { position: relative; height: 9px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.06); overflow: hidden; } .cstat__fill { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .85s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 10px rgba(255,90,31,.35); } .cstat__num { font-size: .9rem; font-weight: 800; color: var(--cine-ink); text-align: right; font-variant-numeric: tabular-nums; } body.no-motion .cstat__fill { transition: none; } @media (max-width: 560px) { .cine-modal__nav { width: 40px; height: 40px; font-size: 1.5rem; } .cmod__meta { margin-top: -40px; } .cstat { grid-template-columns: 80px 1fr 20px; gap: 9px; } .cstat__lbl { font-size: .74rem; } } /* ═══════════════════════════════════════════════════════════════ COUNTDOWN DE LANCAMENTO (no hero) + botao Download ═══════════════════════════════════════════════════════════════ */ .cine-launch[hidden] { display: none !important; } .cine-launch { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 4px 0 4px; } .cine-launch__lbl { font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--cine-accent); } .cine-launch__clock { display: inline-flex; align-items: flex-start; gap: clamp(6px,1.4vw,16px); } .cine-launch__unit { display: inline-flex; flex-direction: column; align-items: center; min-width: clamp(48px,9vw,70px); } .cine-launch__unit b { font-size: clamp(1.9rem,5vw,3rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 1px; } .cine-launch__unit span { font-size: .58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--cine-lav-dim); margin-top: 8px; } .cine-launch__sep { font-size: clamp(1.6rem,4vw,2.6rem); font-weight: 300; color: rgba(255,138,61,.5); line-height: 1; padding-top: .05em; } .cine-launch__live { display: flex; justify-content: center; } .cine-launch__live[hidden] { display: none; } #cine-launch-clock[hidden] { display: none; } .cine-launch__on { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.4rem,3.4vw,2rem); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #3ad07a; } .cine-launch__ondot { width: 12px; height: 12px; border-radius: 50%; background: #3ad07a; box-shadow: 0 0 0 0 rgba(58,208,122,.6); animation: cinePing 2s ease-out infinite; } body.no-motion .cine-launch__ondot { animation: none; } /* botao download do hero — herda .btn-primary; sublabel discreto */ .cine-dl-btn { font-size: 1.05rem; padding: 15px 38px; letter-spacing: 1.5px; } .cine-dl-btn .ic { font-size: 1.05em; } .cine-dl-sub { color: var(--cine-lav-dim); font-size: .82rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ MODAL DE DOWNLOAD (progresso real, tema fogo) ═══════════════════════════════════════════════════════════════ */ .cine-dlm__panel { width: min(460px, 100%); } .cine-dlm__inner { padding: clamp(28px,4vw,44px) clamp(24px,3.5vw,40px) clamp(26px,3.5vw,38px); text-align: center; } .cine-dlm__flamewrap { position: relative; width: 150px; height: 150px; margin: 4px auto 22px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, rgba(232,67,26,.18), rgba(11,10,24,0) 70%); } /* brasa/chama que ENCHE conforme % (clip-path controlado via --p) */ .cine-dlm__ember { position: absolute; inset: 6px; border-radius: 50%; background: var(--cine-grad); background-size: 300% 100%; animation: cineFire 4s linear infinite; /* preenchimento de baixo p/ cima conforme --p (0..100) */ -webkit-mask: linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0); clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0); transition: clip-path .35s var(--cine-ease); filter: drop-shadow(0 0 18px rgba(255,90,31,.55)); } .cine-dlm__flamewrap::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid rgba(255,138,61,.25); } .cine-dlm__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--cine-ink); z-index: 2; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgba(0,0,0,.75); } .cine-dlm__pct span { font-size: 2.9rem; line-height: 1; } .cine-dlm__pct i { font-size: 1.1rem; font-style: normal; font-weight: 700; color: var(--cine-accent); margin-left: 2px; align-self: center; transform: translateY(-.5em); } body.no-motion .cine-dlm__ember { animation: none; } .cine-dlm__title { font-size: clamp(1.3rem,3.2vw,1.7rem); font-weight: 700; color: var(--cine-ink); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 6px; } .cine-dlm__sub { font-size: .92rem; color: var(--cine-lav); font-weight: 300; margin: 0 0 22px; } .cine-dlm__bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; border: 1px solid rgba(255,255,255,.08); } .cine-dlm__fill { height: 100%; width: 0%; border-radius: 999px; transition: width .3s var(--cine-ease); } .cine-dlm__stats { display: flex; justify-content: space-between; margin-top: 12px; font-size: .86rem; color: var(--cine-lav-dim); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .5px; } .cine-dlm__err { margin-top: 22px; } .cine-dlm__err p { color: #ff8a6b; font-size: .92rem; margin: 0 0 14px; } .cine-dlm__err[hidden] { display: none; } /* ═══════════════════════════════════════════════════════════════ FORMULARIO DE REGISTRO (dentro do #cine-modal) ═══════════════════════════════════════════════════════════════ */ .creg { padding: clamp(26px,3.5vw,42px) clamp(24px,3.2vw,40px) clamp(28px,3.5vw,40px); } .creg__eyebrow { display: block; font-size: .72rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--cine-accent); margin-bottom: 8px; text-align: center; } .creg__title { font-size: clamp(1.5rem,3.4vw,2.1rem); font-weight: 700; color: var(--cine-ink); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 6px; text-align: center; } .creg__sub { font-size: .92rem; color: var(--cine-lav); font-weight: 300; margin: 0 0 24px; text-align: center; } .creg__field { margin-bottom: 14px; } .creg__field label { display: block; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--cine-lav-dim); margin-bottom: 6px; } .creg__field input { width: 100%; padding: 13px 16px; border-radius: var(--cine-radius-sm); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: var(--cine-ink); font-family: inherit; font-size: 1rem; font-weight: 400; transition: border-color .2s, background .2s; } .creg__field input::placeholder { color: var(--cine-lav-dim); opacity: .7; } .creg__field input:focus { outline: none; border-color: rgba(255,138,61,.6); background: rgba(255,255,255,.07); } .creg__hint { display: block; font-size: .74rem; color: var(--cine-lav-dim); margin-top: 5px; font-weight: 300; } .creg__msg { font-size: .9rem; font-weight: 600; margin: 4px 0 16px; padding: 11px 14px; border-radius: var(--cine-radius-sm); display: none; } .creg__msg.show { display: block; } .creg__msg.err { background: rgba(232,67,26,.12); border: 1px solid rgba(232,67,26,.35); color: #ff9b7d; } .creg__msg.ok { background: rgba(58,208,122,.12); border: 1px solid rgba(58,208,122,.35); color: #6ee6a0; } .creg__submit { width: 100%; justify-content: center; margin-top: 6px; padding: 15px 30px; font-size: 1.05rem; } .creg__submit[disabled] { opacity: .6; cursor: not-allowed; } /* estado de boas-vindas */ .creg__welcome { text-align: center; padding: clamp(34px,5vw,54px) clamp(24px,3.2vw,40px); } .creg__welcome .ic { font-size: 3.4rem; display: block; margin-bottom: 14px; } .creg__welcome h2 { font-size: clamp(1.6rem,3.6vw,2.2rem); font-weight: 700; color: var(--cine-ink); text-transform: uppercase; margin: 0 0 10px; } .creg__welcome p { color: var(--cine-lav); font-weight: 300; margin: 0 0 24px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════ cine9 — RATES range, GUERRA(vencedor+modal guild), RANKING(GS/VIP/ trofeus + modal perfil), LIVES empty-state, RODAPE credito. FILOSOFIA: contido, sutil, sem overflow horizontal, sem tremor. ═══════════════════════════════════════════════════════════════ */ /* ── ANTI-TREMOR: solta will-change apos revelar (sem jitter de GPU) ── */ .reveal.in { will-change: auto; } /* numeros sempre tabulares = largura estavel, nao empurra layout */ .cine-card__num b, .cine-rank__lvl, .cine-rank__rr, .cine-rank__gs { font-variant-numeric: tabular-nums; } /* ── RATES: numero em range estavel (tabular, sem tremor) ── */ .cine-card__num--range b { font-size: clamp(1.7rem,4.2vw,2.9rem); white-space: nowrap; } /* ── GUERRAS: card clicavel + selo do vencedor ── */ .cine-war { cursor: pointer; } .cine-war:focus-visible { outline: 2px solid rgba(255,138,61,.7); outline-offset: 3px; } .cine-event-hero.cine-war:hover { box-shadow: 0 28px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,138,61,.3); } .cine-war__winner { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 9px 16px; border-radius: 999px; background: rgba(255,138,61,.10); border: 1px solid rgba(255,138,61,.28); } .cine-war__winner--sm { margin-top: 10px; padding: 6px 12px; gap: 7px; } .cine-war__crown { font-size: 1em; line-height: 1; filter: drop-shadow(0 2px 6px rgba(232,67,26,.4)); } .cine-war__wlbl { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cine-lav-dim); font-weight: 700; } .cine-war__winner--sm .cine-war__wlbl { display: none; } .cine-war__guild { font-weight: 700; font-size: 1.05rem; letter-spacing: .4px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cine-war__winner--sm .cine-war__guild { font-size: .95rem; } .cine-event--war { position: relative; } .cine-event--war .cine-event__desc { flex: 1; } /* ── RANKING: + coluna GS/Poder + badges VIP + trofeus ── */ .cine-rank__head, .cine-rank__row { grid-template-columns: 56px 2fr 1.3fr .7fr .7fr .9fr; } .cine-rank__row { cursor: pointer; } .cine-rank__row:focus-visible { outline: 2px solid rgba(255,138,61,.6); outline-offset: -2px; } .cine-rank__gs { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; background-image: var(--cine-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } body.no-motion .cine-rank__gs { animation: none; } .cine-rank__h-gs { text-align: left; } .cine-rank__badges { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; } .cine-rank__vip { font-size: .58rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; color: #14121c; line-height: 1.3; } .cine-rank__vip--bronze { background: linear-gradient(135deg,#c87b3c,#e8a165); } .cine-rank__vip--prata { background: linear-gradient(135deg,#9aa3ad,#d7dde3); } .cine-rank__vip--ouro { background: linear-gradient(135deg,#d8a128,#ffd86b); } .cine-rank__troph { display: inline-flex; align-items: center; gap: 2px; font-size: .74rem; color: var(--cine-accent); font-weight: 700; } .cine-rank__troph .ic { font-size: .9em; } /* ── PERFIL (modal de jogador, padrao #cine-modal) ── */ .cprof__hero { position: relative; display: flex; gap: clamp(16px,2.4vw,26px); align-items: center; padding: clamp(22px,3vw,34px) clamp(22px,3vw,38px) clamp(18px,2vw,24px); background: linear-gradient(150deg, rgba(232,67,26,.14), rgba(255,138,61,.03)); border-bottom: 1px solid rgba(255,138,61,.16); } .cprof__avatar { flex: 0 0 auto; width: clamp(74px,11vw,96px); height: clamp(74px,11vw,96px); border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: clamp(2.2rem,5vw,3rem); background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid rgba(255,138,61,.3); box-shadow: 0 12px 36px rgba(0,0,0,.5); } .cprof__head { min-width: 0; } .cprof__rank { font-size: .7rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; color: var(--cine-accent); } .cprof__name { font-size: clamp(1.5rem,3.6vw,2.2rem); font-weight: 700; color: var(--cine-ink); letter-spacing: .4px; line-height: 1.1; margin: 2px 0 6px; text-transform: uppercase; } .cprof__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; color: var(--cine-lav); font-weight: 300; } .cprof__sub .cine-rank__vip { font-size: .56rem; } .cprof__body { padding: clamp(20px,3vw,32px); } .cprof__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .cprof__stat { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--cine-radius-sm); padding: 14px 12px; text-align: center; } .cprof__stat b { display: block; font-size: clamp(1.2rem,2.6vw,1.6rem); font-weight: 700; color: var(--cine-ink); font-variant-numeric: tabular-nums; letter-spacing: .3px; } .cprof__stat.is-gs b { background-image: var(--cine-grad); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cprof__stat span { display: block; font-size: .64rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cine-lav-dim); margin-top: 6px; font-weight: 700; } .cprof__achs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cprof__ach { display: flex; align-items: center; gap: 11px; background: linear-gradient(160deg, rgba(232,67,26,.07), rgba(255,138,61,.015)); border: 1px solid rgba(255,138,61,.16); border-radius: var(--cine-radius-sm); padding: 12px 14px; } .cprof__ach .ic { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; } .cprof__ach b { display: block; font-size: .92rem; color: var(--cine-ink); font-weight: 700; } .cprof__ach span { display: block; font-size: .76rem; color: var(--cine-lav-dim); font-weight: 300; margin-top: 1px; } /* ── EQUIPAMENTOS (grid de slots placeholder, estilo Drax) ── */ .cprof__equip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .cprof__slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 1 / 1; border-radius: var(--cine-radius-sm); background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.08); transition: border-color .25s var(--cine-ease), background .25s, transform .2s; } .cprof__slot:hover { border-color: rgba(255,138,61,.4); background: rgba(255,138,61,.06); transform: translateY(-2px); } .cprof__slot-ic { font-size: 1.6rem; line-height: 1; opacity: .55; filter: grayscale(.3); } .cprof__slot-l { font-size: .68rem; letter-spacing: .5px; text-transform: uppercase; color: var(--cine-lav-dim); font-weight: 600; } @media (max-width: 560px){ .cprof__achs { grid-template-columns: 1fr; } .cprof__stats { gap: 8px; } .cprof__equip { grid-template-columns: repeat(4, 1fr); gap: 7px; } .cprof__slot-ic { font-size: 1.3rem; } .cprof__slot-l { font-size: .6rem; } } /* ── GUILD (modal de membros da guilda vencedora) ── */ .cguild__hero { position: relative; padding: clamp(22px,3vw,34px) clamp(22px,3vw,38px) clamp(16px,2vw,22px); background: linear-gradient(150deg, rgba(232,67,26,.14), rgba(255,138,61,.03)); border-bottom: 1px solid rgba(255,138,61,.16); text-align: center; } .cguild__crown { font-size: clamp(2.2rem,5vw,2.8rem); line-height: 1; filter: drop-shadow(0 4px 14px rgba(232,67,26,.5)); } .cguild__lbl { display: block; font-size: .7rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 800; color: var(--cine-accent); margin: 10px 0 4px; } .cguild__name { font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 700; color: var(--cine-ink); letter-spacing: .5px; line-height: 1.05; text-transform: uppercase; margin: 0; } .cguild__event { display: block; font-size: .86rem; color: var(--cine-lav); font-weight: 300; margin-top: 6px; } .cguild__example { display: inline-block; margin-top: 10px; font-size: .66rem; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; color: var(--cine-lav-dim); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: 4px 11px; border-radius: 999px; } .cguild__body { padding: clamp(18px,2.6vw,28px) clamp(18px,2.6vw,30px) clamp(22px,3vw,32px); } .cguild__members { display: flex; flex-direction: column; gap: 9px; } .cguild__m { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.08); border-radius: var(--cine-radius-sm); padding: 11px 15px; } .cguild__m--master { background: linear-gradient(160deg, rgba(232,67,26,.13), rgba(255,138,61,.03)); border-color: rgba(255,138,61,.34); } .cguild__m-pos { font-size: .9rem; font-weight: 700; color: var(--cine-lav-dim); text-align: center; } .cguild__m--master .cguild__m-pos { font-size: 1.1rem; } .cguild__m-main { min-width: 0; } .cguild__m-name { font-size: 1.02rem; font-weight: 700; color: var(--cine-ink); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cguild__m-role { font-size: .56rem; letter-spacing: .8px; text-transform: uppercase; font-weight: 800; color: #14121c; padding: 2px 7px; border-radius: 5px; margin-left: 8px; vertical-align: middle; display: inline-block; } .cguild__m-role--master { background-image: var(--cine-grad); background-size: 300% 100%; } .cguild__m-role--battlemaster { background: linear-gradient(135deg,#c87b3c,#e8a165); } .cguild__m-role--assistant { background: linear-gradient(135deg,#9aa3ad,#d7dde3); } .cguild__m-cls { font-size: .8rem; color: var(--cine-lav); font-weight: 300; margin-top: 2px; } .cguild__m-stats { text-align: right; flex: 0 0 auto; } .cguild__m-lvl { font-size: .92rem; font-weight: 700; color: var(--cine-ink); font-variant-numeric: tabular-nums; } .cguild__m-rr { font-size: .72rem; color: var(--cine-accent); font-weight: 700; } .cguild__empty { text-align: center; color: var(--cine-lav); padding: 30px 10px; font-weight: 300; } /* ── LIVES: empty-state (cards de beneficio de virar streamer) — branded/cinematografico ── */ .cine-live--benefit { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px,2.8vw,34px) clamp(22px,2.4vw,28px); display: flex; flex-direction: column; gap: 11px; min-height: 240px; background: linear-gradient(165deg, rgba(20,16,32,.6), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.09); border-radius: var(--cine-radius); transition: transform .3s var(--cine-ease), border-color .3s, box-shadow .3s; } .cine-live--benefit::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(90% 70% at 18% 0%, rgba(232,67,26,.18), rgba(232,67,26,0) 62%); transition: opacity .35s var(--cine-ease); } .cine-live--benefit:hover { transform: translateY(-6px); border-color: rgba(255,138,61,.42); box-shadow: 0 22px 56px rgba(0,0,0,.5), 0 0 30px rgba(232,67,26,.14); } .cine-live--benefit:hover::before { opacity: 1; } .cine-live--benefit .cine-live__ic { font-size: 2.1rem; line-height: 1; width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; background: linear-gradient(160deg, rgba(232,67,26,.22), rgba(255,138,61,.05)); border: 1px solid rgba(255,138,61,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .cine-live--benefit h3 { font-size: 1.18rem; font-weight: 700; color: var(--cine-ink); letter-spacing: .4px; margin: 6px 0 0; line-height: 1.2; text-transform: uppercase; } .cine-live--benefit p { font-size: .92rem; color: var(--cine-lav); font-weight: 300; line-height: 1.6; margin: 0; flex: 1; } /* grid de 3 colunas alinhado quando em empty-state de beneficios */ .cine-lives__grid:has(.cine-live--benefit) { grid-template-columns: repeat(3, 1fr); max-width: 1080px; } @media (max-width: 880px) { .cine-lives__grid:has(.cine-live--benefit) { grid-template-columns: 1fr; } } /* BOTAO centralizado abaixo dos 3 cards de beneficio */ .cine-lives__cta { display: flex; justify-content: center; margin-top: clamp(26px,3.4vw,40px); } .cine-lives__cta .btn-primary { padding: 15px 38px; font-size: 1rem; letter-spacing: .5px; } .cine-lives__note { text-align: center; color: var(--cine-lav-dim); font-size: .82rem; font-weight: 300; margin-top: 22px; letter-spacing: .3px; } /* ── RODAPE: credito DarkCMS centralizado e elegante (vence inline antigo) ── */ .powered-by-darkmu { text-align: center !important; display: flex !important; justify-content: center !important; align-items: center !important; padding: 26px 16px 30px !important; margin: 0 !important; background: transparent; border-top: 0; font-family: 'Josefin Sans', sans-serif; } .powered-by-darkmu__link { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem !important; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; color: var(--cine-lav-dim) !important; text-decoration: none !important; padding: 8px 16px; border-radius: 999px; border: 1px solid transparent; transition: color .25s var(--cine-ease), border-color .25s, background .25s; } .powered-by-darkmu__link:hover { color: var(--cine-ink) !important; border-color: rgba(255,138,61,.3); background: rgba(255,138,61,.06); } .powered-by-darkmu__ic { width: 15px; height: 15px; color: var(--cine-accent); flex: 0 0 auto; } .powered-by-darkmu__txt b { color: var(--cine-accent); font-weight: 800; letter-spacing: .8px; } .powered-by-darkmu__link:hover .powered-by-darkmu__txt b { color: #ffb22e; } /* olhos do dragao REATIVADOS (calibrados p/ hero.png) — display:none removido cine13 */ html, body.cine-home { background:#0a0807 !important; } /* ── Por que jogar (hover na logo do hero) ───────────── */ #cine-why{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(4,3,8,.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;} #cine-why.open{opacity:1;visibility:visible;} .cine-why__panel{position:relative;width:min(900px,96vw);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#16100b,#0a0807);border:1px solid rgba(255,138,61,.28);border-radius:22px;padding:clamp(30px,4vw,52px);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(232,67,26,.14);transform:translateY(18px) scale(.98);transition:transform .35s cubic-bezier(.2,.7,.2,1);} #cine-why.open .cine-why__panel{transform:none;} .cine-why__x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#ECE9F5;font-size:24px;line-height:1;cursor:pointer;transition:all .2s;} .cine-why__x:hover{background:rgba(255,90,31,.85);color:#fff;transform:rotate(90deg);} .cine-why__eyebrow{font-size:.8rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;} .cine-why__title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin:.25em 0 1em;color:#F3F1FA;line-height:1.05;} .cine-why__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px);} @media(max-width:680px){.cine-why__grid{grid-template-columns:1fr;}} .cine-why__item{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;transition:all .2s;} .cine-why__item:hover{border-color:rgba(255,138,61,.5);background:rgba(255,90,31,.06);transform:translateY(-3px);} .cine-why__ic{flex:0 0 auto;width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:23px;border-radius:12px;background:linear-gradient(135deg,rgba(255,90,31,.18),rgba(176,30,16,.12));border:1px solid rgba(255,138,61,.3);} .cine-why__h{font-size:1.05rem;font-weight:700;color:#F3F1FA;margin:0 0 4px;letter-spacing:.3px;} .cine-why__d{font-size:.9rem;color:#C9C6DC;line-height:1.5;font-weight:300;margin:0;} .cine-hero__logo{cursor:pointer;} /* efeito de abertura do modal Por que jogar */ .cine-why__eyebrow,.cine-why__title{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);} .cine-why__item{opacity:0;transform:translateY(22px) scale(.96);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);} #cine-why.open .cine-why__eyebrow{opacity:1;transform:none;transition-delay:.06s;} #cine-why.open .cine-why__title{opacity:1;transform:none;transition-delay:.14s;} #cine-why.open .cine-why__item{opacity:1;transform:none;} #cine-why.open .cine-why__item:nth-child(1){transition-delay:.24s;} #cine-why.open .cine-why__item:nth-child(2){transition-delay:.32s;} #cine-why.open .cine-why__item:nth-child(3){transition-delay:.40s;} #cine-why.open .cine-why__item:nth-child(4){transition-delay:.48s;} #cine-why.open .cine-why__item:nth-child(5){transition-delay:.56s;} #cine-why.open .cine-why__item:nth-child(6){transition-delay:.64s;} #cine-why.open .cine-why__panel{animation:whyIgnite .85s ease both;} @keyframes whyIgnite{0%{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 rgba(232,67,26,0);}38%{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 95px rgba(255,90,31,.6),inset 0 0 70px rgba(255,90,31,.13);}100%{box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(232,67,26,.14);}} .cine-why__title .grad-text{background-size:300% 100%;} #cine-why.open .cine-why__title .grad-text{animation:whySweep 2.6s linear .2s 2;} @keyframes whySweep{to{background-position:300% 0;}} .cine-why__embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:22px;z-index:0;} .cine-why__panel>*{position:relative;z-index:1;} .cine-why__embers span{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffd24a,#ff5a1f 60%,transparent);box-shadow:0 0 9px #ff5a1f;opacity:0;animation:whyEmber linear forwards;} @keyframes whyEmber{0%{transform:translateY(0) scale(1);opacity:0;}14%{opacity:1;}100%{transform:translateY(-360px) scale(.35);opacity:0;}} body.no-motion .cine-why__item,body.no-motion .cine-why__eyebrow,body.no-motion .cine-why__title{opacity:1!important;transform:none!important;transition:none!important;} /* class modal cover — imagem maior, posicao melhor, menos overlay (estava escurecida demais) */ .cmod__cover{height:clamp(250px,44vh,440px) !important;background-position:center 18% !important;background-color:#0a0807 !important;} .cmod__cover::after{background:linear-gradient(180deg,rgba(10,8,7,0) 52%,rgba(10,8,7,.45) 80%,rgba(10,8,7,.93) 100%) !important;} /* HERO IMPONENTE — centralizado, logo grande dominando, dragao atras */ @media (min-width: 900px){ .cine-hero { padding-right: clamp(28px,6vw,90px) !important; } } .cine-hero__inner { align-items:center !important; text-align:center !important; margin:0 auto !important; max-width:1000px; } .cine-hero__line { display:none !important; } .cine-hero__logo { width:clamp(260px,38vw,600px) !important; max-width:92vw !important; margin:0 auto .2em !important; filter:drop-shadow(0 14px 50px rgba(255,90,31,.45)) drop-shadow(0 0 90px rgba(232,67,26,.25)) !important; } .cine-hero__season { justify-content:center !important; text-align:center !important; } .cine-hero__row, .cine-hero__cta { justify-content:center !important; } .cine-hero__pulse { justify-content:center !important; left:50% !important; transform:translateX(-50%) !important; } .cine-hero__bg { background-position:center 30% !important; inset:-22% 0 -22% 0 !important; } /* HERO texto grande (logo removida) — imponente, 2 linhas */ .cine-hero__logo{display:none !important;} .cine-hero__bigtitle{font-family:"Josefin Sans",sans-serif;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:1px;margin:0 auto .42em;display:flex;flex-direction:column;align-items:center;gap:.02em;} .cine-hero__bigtitle span:first-child{font-size:clamp(2rem,5.5vw,3.8rem);color:#F3F1FA;text-shadow:0 4px 30px rgba(0,0,0,.55);} .cine-hero__bigtitle .grad-text{font-size:clamp(3.6rem,11.5vw,8.6rem);background-size:300% 100%;filter:drop-shadow(0 0 55px rgba(255,90,31,.45));animation:whySweep 5s linear infinite;} .cine-hero__bigtitle .grad-text{white-space:nowrap;font-size:clamp(3rem,10vw,7rem) !important;} .cine-hero__bigtitle span:first-child{letter-spacing:2px;} /* HERO bigtitle — maior, mais pra direita, vermelho-alaranjado */ .cine-hero__inner{max-width:1400px !important;} @media (min-width:900px){ .cine-hero__inner{ transform:translateX(clamp(30px,6vw,130px)); } } .cine-hero__bigtitle{line-height:.86 !important;} .cine-hero__bigtitle span:first-child{font-size:clamp(3.2rem,8.5vw,6.4rem) !important;letter-spacing:3px;} .cine-hero__bigtitle .grad-text{ white-space:nowrap; font-size:clamp(4.5rem,15vw,11.5rem) !important; background:linear-gradient(90deg,#b01e10,#e8431a,#ff5a1f,#ff7a2a,#ff5a1f,#e8431a,#b01e10) !important; background-size:300% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; filter:drop-shadow(0 0 60px rgba(232,67,26,.5)) !important; animation:whySweep 6s linear infinite !important; } /* HERO bigtitle — MAIS imponente ainda */ .cine-hero__inner{max-width:1500px !important;} @media (min-width:900px){ .cine-hero__inner{ transform:translateX(clamp(10px,3vw,70px)); } } .cine-hero__bigtitle{line-height:.82 !important;margin-bottom:.5em !important;} .cine-hero__bigtitle span:first-child{font-size:clamp(3.6rem,9.5vw,7rem) !important;letter-spacing:4px;} .cine-hero__bigtitle .grad-text{font-size:clamp(5rem,18vw,13.5rem) !important;letter-spacing:-1px !important;filter:drop-shadow(0 0 80px rgba(232,67,26,.55)) drop-shadow(0 4px 24px rgba(0,0,0,.6)) !important;} /* VERMILLION — cor viva, sem apagar (estatico, saturado) */ .cine-hero__bigtitle .grad-text{ background:linear-gradient(180deg,#ffb43a 0%,#ff7e1c 34%,#ff4d12 68%,#ff2208 100%) !important; background-size:100% 100% !important; background-position:0 0 !important; animation:none !important; filter:drop-shadow(0 0 30px rgba(255,90,20,.65)) drop-shadow(0 3px 14px rgba(0,0,0,.5)) !important; } /* FIX faixa retangular: gradiente recortado SO no texto (clip:text) */ .cine-hero__bigtitle .grad-text{ background-image:linear-gradient(180deg,#ffb43a 0%,#ff7e1c 34%,#ff4d12 68%,#ff2208 100%) !important; background-color:transparent !important; background-size:100% 100% !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; color:transparent !important; } /* FIX REAL faixa retangular: filter quebra background-clip:text em browsers reais -> usar text-shadow */ .cine-hero__bigtitle .grad-text{ filter:none !important; text-shadow:0 0 30px rgba(255,100,30,.55), 0 4px 16px rgba(0,0,0,.55) !important; } /* FIX retangulo no Chrome: transform no ancestral quebra background-clip:text -> remover transform, centralizar */ @media (min-width:900px){ .cine-hero__inner{ transform:none !important; margin-left:auto !important; margin-right:auto !important; } } .cine-hero__inner{ transform:none !important; } .cine-hero__bigtitle, .cine-hero__bigtitle .grad-text{ will-change:auto !important; } /* FIX letras cortando no topo: line-height apertado < fonte -> caixa cabe as letras */ .cine-hero__bigtitle{line-height:1.02 !important;overflow:visible !important;gap:.06em !important;padding-top:.12em !important;} .cine-hero__bigtitle span:first-child{line-height:1.04 !important;} .cine-hero__bigtitle .grad-text{line-height:1.02 !important;padding-top:.04em !important;overflow:visible !important;} /* FIX corte lateral: titulo cabe na largura (imponente sem vazar) + folga lateral */ .cine-hero__inner{ box-sizing:border-box !important; max-width:100% !important; padding-left:clamp(20px,5vw,90px) !important; padding-right:clamp(20px,5vw,90px) !important; } .cine-hero__bigtitle{ width:100% !important; max-width:100% !important; } .cine-hero__bigtitle span:first-child{ font-size:clamp(1.7rem,6vw,5.2rem) !important; line-height:1.05 !important; letter-spacing:.01em; } .cine-hero__bigtitle .grad-text{ font-size:clamp(2.4rem,10vw,9.2rem) !important; line-height:1.0 !important; letter-spacing:0; } /* FIX header do ranking ilegivel (cream-ink escuro sobre card escuro) */ .cine-rank__head{ color: rgba(255,233,221,.72) !important; } .cine-rank__head span{ color: inherit !important; } /* Barra ao rolar: INVISIVEL (so logo + hamburguer), sem bg azul/blur */ .cine-nav, .cine-nav.solid{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important; border-bottom:0 !important; } .cine-nav__icon{ filter: drop-shadow(0 2px 8px rgba(0,0,0,.75)) drop-shadow(0 4px 12px rgba(232,67,26,.45)) !important; } .cine-burger span{ box-shadow:0 1px 4px rgba(0,0,0,.7); } /* ════════════════ CHEFÃO DO DIA ════════════════ */ /* Selo/timer no centro do menu */ .cine-menu__left{ justify-content:flex-start !important; padding-top:clamp(38px,6vh,80px) !important; } .cine-menu__bigimg{ width:clamp(120px,20vh,200px) !important; height:clamp(120px,20vh,200px) !important; } .cine-bossbtn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%); z-index:3; width:min(78%,330px); display:flex; flex-direction:column; align-items:center; gap:9px; padding:20px 22px 16px; cursor:pointer; text-align:center; background:linear-gradient(180deg,rgba(28,16,10,.86),rgba(14,9,8,.92)); border:1px solid rgba(255,138,61,.32); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4) inset, 0 0 40px rgba(255,90,30,.12); transition:transform .35s var(--cine-ease), box-shadow .35s, border-color .3s; -webkit-tap-highlight-color:transparent; } .cine-bossbtn:hover{ transform:translate(-50%,-46%) scale(1.035); border-color:rgba(255,138,61,.6); box-shadow:0 30px 90px rgba(0,0,0,.7), 0 0 60px rgba(255,90,30,.28); } .cine-bossbtn__tag{ font-size:.66rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--cine-accent); font-weight:700; } .cine-bossbtn__name{ font-size:clamp(1.2rem,2.4vh,1.7rem); font-weight:800; letter-spacing:.5px; color:var(--cine-ink); line-height:1; text-transform:uppercase; } .cine-bossbtn__bar{ display:block; width:100%; height:9px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.5); } .cine-bossbtn__bar i{ display:block; height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg,#ff2208,#ff7e1c,#ffb43a); box-shadow:0 0 12px rgba(255,120,30,.6); transition:width .5s var(--cine-ease); } .cine-bossbtn__row{ display:flex; align-items:center; justify-content:space-between; width:100%; font-size:.78rem; color:var(--cine-lav); } .cine-bossbtn__row #bb-pct{ color:#ffb43a; font-weight:700; } .cine-bossbtn__timer b{ color:var(--cine-ink); font-variant-numeric:tabular-nums; } .cine-bossbtn__hint{ font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--cine-lav-dim); margin-top:1px; } .cine-bossbtn::after{ content:''; position:absolute; inset:-2px; border-radius:22px; background:radial-gradient(circle at 50% 0,rgba(255,120,30,.22),transparent 70%); opacity:0; transition:opacity .3s; pointer-events:none; } .cine-bossbtn:hover::after{ opacity:1; } /* ── Modal ── */ .cine-bossmodal{ position:fixed; inset:0; z-index:1800; display:flex; align-items:center; justify-content:center; padding:clamp(14px,3vw,40px); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; } .cine-bossmodal.open{ opacity:1; visibility:visible; } .cine-bossmodal__scrim{ position:absolute; inset:0; background:rgba(4,3,8,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cine-bossmodal__panel{ position:relative; width:min(1080px,100%); max-height:92vh; overflow:auto; display:grid; grid-template-columns:1.15fr 1fr .82fr; gap:0; background:linear-gradient(180deg,#15100e,#0c0807); border:1px solid rgba(255,138,61,.22); border-radius:24px; box-shadow:0 50px 140px rgba(0,0,0,.7), 0 0 80px rgba(255,80,20,.1); transform:scale(.78); opacity:0; transition:transform .42s var(--cine-ease), opacity .35s ease; } .cine-bossmodal.open .cine-bossmodal__panel{ transform:scale(1); opacity:1; } .cine-bossmodal__x{ position:absolute; top:12px; right:14px; z-index:6; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:1rem; cursor:pointer; transition:all .2s; } .cine-bossmodal__x:hover{ background:rgba(255,60,30,.4); transform:rotate(90deg); } .cine-bossmodal__stage{ position:relative; border-radius:24px 0 0 24px; overflow:hidden; background:radial-gradient(circle at 50% 35%,#2a1410,#0a0706); min-height:320px; display:flex; align-items:flex-end; justify-content:center; } .cine-bossmodal__art{ width:100%; height:100%; object-fit:cover; object-position:center; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); } .cine-bossmodal__art.hit{ animation:bmShake .28s; } @keyframes bmShake{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-6px,3px)} 50%{transform:translate(5px,-3px)} 80%{transform:translate(-3px,2px)} } .cine-bossmodal__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 60%,rgba(255,90,30,.25),transparent 65%); mix-blend-mode:screen; } .cine-bossmodal__fx{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .bm-dmg{ position:absolute; font-weight:900; font-size:1.5rem; color:#ffd27a; text-shadow:0 2px 8px rgba(0,0,0,.8); pointer-events:none; animation:bmDmg 1s ease-out forwards; } .bm-dmg.crit{ font-size:2.4rem; color:#ff5a1f; } @keyframes bmDmg{ 0%{opacity:0; transform:translateY(0) scale(.6)} 15%{opacity:1; transform:translateY(-10px) scale(1.1)} 100%{opacity:0; transform:translateY(-80px) scale(1)} } .cine-bossmodal__defeated{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:clamp(1.6rem,4vw,2.8rem); font-weight:900; letter-spacing:3px; color:#ff3b3b; text-shadow:0 0 30px rgba(255,0,0,.6); background:rgba(0,0,0,.45); } .cine-bossmodal.is-defeated .cine-bossmodal__defeated{ display:flex; } .cine-bossmodal__main{ padding:clamp(20px,2.4vw,34px); display:flex; flex-direction:column; } .bm-tag{ font-size:.68rem; letter-spacing:2.5px; text-transform:uppercase; color:var(--cine-accent); font-weight:700; } .bm-name{ font-size:clamp(1.8rem,3.6vw,3rem) !important; line-height:1.02; margin:4px 0 2px; font-weight:800; } .bm-title{ font-size:.92rem; color:var(--cine-lav); letter-spacing:.5px; text-transform:uppercase; } .bm-lore{ font-size:.9rem; color:var(--cine-lav-dim); line-height:1.5; margin:10px 0 16px; } .bm-hpwrap{ margin-bottom:12px; } .bm-hpbar{ position:relative; height:26px; border-radius:9px; background:rgba(255,255,255,.07); overflow:hidden; box-shadow:inset 0 2px 6px rgba(0,0,0,.5); } .bm-hpbar i{ display:block; height:100%; width:100%; border-radius:9px; background:linear-gradient(90deg,#ff2208,#ff7e1c 60%,#ffb43a); box-shadow:0 0 18px rgba(255,120,30,.6); transition:width .45s var(--cine-ease); } .bm-hpbar b{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); } .bm-hpnum{ text-align:center; font-size:.78rem; color:var(--cine-lav-dim); margin-top:5px; font-variant-numeric:tabular-nums; } .bm-hpnum .bm-sep{ opacity:.5; } .bm-stats{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; font-size:.84rem; color:var(--cine-lav); margin-bottom:14px; } .bm-stats b{ color:var(--cine-ink); } .bm-attack{ position:relative; width:100%; padding:16px; border:0; border-radius:14px; cursor:pointer; font-family:inherit; font-weight:900; font-size:1.15rem; letter-spacing:2px; text-transform:uppercase; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff7e1c,#ff4d12); background-size:200% 100%; box-shadow:0 14px 36px rgba(255,90,20,.4); transition:transform .12s, box-shadow .25s, filter .2s; overflow:hidden; } .bm-attack:hover{ filter:brightness(1.08); box-shadow:0 18px 50px rgba(255,90,20,.55); } .bm-attack:active{ transform:scale(.96); } .bm-attack.is-locked{ background:linear-gradient(90deg,#5a4a44,#3e3330); color:#cbb8ae; box-shadow:none; letter-spacing:1px; } .bm-attack.pulse{ animation:bmPulse .2s; } @keyframes bmPulse{ 0%{transform:scale(1)} 50%{transform:scale(.94)} 100%{transform:scale(1)} } .bm-msg{ min-height:18px; text-align:center; font-size:.8rem; margin-top:8px; color:#ffb43a; } .bm-next{ text-align:center; font-size:.78rem; color:var(--cine-lav-dim); margin-top:6px; } .bm-next b{ color:var(--cine-lav); font-variant-numeric:tabular-nums; } .bm-pass{ margin-top:16px; display:flex; align-items:center; gap:12px; justify-content:space-between; padding:13px 15px; border-radius:14px; background:linear-gradient(90deg,rgba(255,90,20,.14),rgba(255,138,61,.06)); border:1px solid rgba(255,138,61,.3); } .bm-pass__txt{ font-size:.82rem; color:var(--cine-ink); display:flex; flex-direction:column; gap:1px; } .bm-pass__txt span{ font-size:.72rem; color:var(--cine-lav-dim); } .bm-pass.is-active{ background:linear-gradient(90deg,rgba(55,214,168,.14),rgba(55,214,168,.04)); border-color:rgba(55,214,168,.4); } #bm-pass-btn{ flex:none; padding:10px 16px; border:0; border-radius:10px; cursor:pointer; font-family:inherit; font-weight:800; font-size:.82rem; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff5a1f); white-space:nowrap; transition:filter .2s, transform .12s; } #bm-pass-btn:hover{ filter:brightness(1.08); } #bm-pass-btn:active{ transform:scale(.96); } .cine-bossmodal__side{ padding:clamp(18px,2vw,28px) clamp(16px,1.8vw,24px); background:rgba(255,255,255,.02); border-left:1px solid rgba(255,255,255,.06); border-radius:0 24px 24px 0; } .bm-side-h{ font-size:.74rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--cine-lav); font-weight:700; margin:0 0 10px; } .bm-side-h:not(:first-child){ margin-top:22px; } .bm-rank{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; counter-reset:bmr; } .bm-rank li{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; background:rgba(255,255,255,.03); font-size:.82rem; color:var(--cine-ink); } .bm-rank li::before{ counter-increment:bmr; content:counter(bmr); width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.08); font-size:.66rem; font-weight:800; color:var(--cine-lav); } .bm-rank li:nth-child(1)::before{ background:linear-gradient(135deg,#ffd75e,#ff9a1f); color:#1a0d06; } .bm-rank li:nth-child(2)::before{ background:linear-gradient(135deg,#e6e9f2,#9aa3bd); color:#1a0d06; } .bm-rank li:nth-child(3)::before{ background:linear-gradient(135deg,#e8a06a,#b56a32); color:#1a0d06; } .bm-rank li .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bm-rank li .dm{ color:#ffb43a; font-weight:700; font-variant-numeric:tabular-nums; font-size:.76rem; } .bm-rank li.me{ outline:1px solid rgba(255,138,61,.5); background:rgba(255,138,61,.08); } .bm-rank__empty{ color:var(--cine-lav-dim) !important; background:transparent !important; font-size:.8rem; } .bm-rank__empty::before{ display:none !important; } .bm-rewards{ display:flex; flex-direction:column; gap:7px; } .bm-reward{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.03); font-size:.78rem; } .bm-reward .rt{ font-weight:800; color:var(--cine-ink); flex:none; min-width:78px; } .bm-reward .rv{ color:var(--cine-lav); } .bm-reward.t-legendary{ border:1px solid rgba(255,180,58,.35); } .bm-reward.t-epic{ border:1px solid rgba(155,92,255,.3); } .bm-reward.t-rare{ border:1px solid rgba(122,162,255,.3); } @media (max-width:860px){ .cine-bossmodal__panel{ grid-template-columns:1fr; max-height:94vh; } .cine-bossmodal__stage{ border-radius:24px 24px 0 0; min-height:220px; max-height:34vh; } .cine-bossmodal__side{ border-left:0; border-top:1px solid rgba(255,255,255,.06); border-radius:0 0 24px 24px; } } /* ── Timer do Chefão no CENTRO da barra superior (sempre visível) ── */ .cine-navboss{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:9px; padding:7px 15px; border-radius:999px; cursor:pointer; z-index:2; background:linear-gradient(180deg,rgba(28,16,10,.62),rgba(14,9,8,.74)); border:1px solid rgba(255,138,61,.34); box-shadow:0 6px 24px rgba(0,0,0,.4), 0 0 26px rgba(255,90,30,.14); color:var(--cine-ink); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); transition:transform .25s var(--cine-ease), border-color .25s, box-shadow .25s; } .cine-navboss:hover{ transform:translate(-50%,-50%) scale(1.045); border-color:rgba(255,138,61,.65); box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 40px rgba(255,90,30,.3); } .cine-navboss__ic{ font-size:1.05rem; filter:drop-shadow(0 0 8px rgba(255,120,30,.65)); animation:nbPulse 2.2s ease-in-out infinite; } @keyframes nbPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.16)} } .cine-navboss__txt{ display:flex; flex-direction:column; line-height:1.05; text-align:left; } .cine-navboss__txt b{ font-size:.72rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--cine-ink); } .cine-navboss__txt > span{ font-size:.64rem; color:var(--cine-lav); letter-spacing:.3px; } .cine-navboss__txt span i{ font-style:normal; color:#ffb43a; font-weight:700; font-variant-numeric:tabular-nums; } @media (max-width:680px){ .cine-navboss{ padding:6px 12px; } .cine-navboss__txt b{ font-size:.66rem; } } @media (max-width:430px){ .cine-navboss__txt b{ display:none; } } /* Boss art: mostrar inteira (nao cortar) */ .cine-bossmodal__art{ object-fit:contain !important; object-position:center; padding:14px; } .cine-bossmodal__stage{ background:radial-gradient(circle at 50% 40%,#2a1410,#0a0706) !important; } /* Boss art FULL com rosto centralizado (rosto do dragao fica a esquerda da imagem) */ .cine-bossmodal__art{ object-fit:cover !important; object-position:22% 46% !important; padding:0 !important; } /* ── Etiqueta "Chefão do Dia" no botão do topo ── */ .cine-navboss__eye{ display:block; font-size:.55rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--cine-accent); font-weight:800; font-style:normal; line-height:1.1; margin-bottom:1px; } .cine-navboss__txt b{ font-size:.82rem; } /* ── Barra de nível do guerreiro (modal) ── */ .bm-level{ margin:4px 0 12px; } .bm-level__top{ display:flex; justify-content:space-between; align-items:center; font-size:.8rem; color:var(--cine-lav); margin-bottom:5px; } .bm-level__top b{ color:var(--cine-ink); } .bm-level__bonus b{ color:#ffb43a; } .bm-level__bar{ height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.5); } .bm-level__bar i{ display:block; height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,#7aa2ff,#9b5cff); box-shadow:0 0 10px rgba(120,90,255,.5); transition:width .45s var(--cine-ease); } .bm-level__xptxt{ text-align:right; font-size:.66rem; color:var(--cine-lav-dim); margin-top:3px; font-variant-numeric:tabular-nums; } /* ── Tutorial "Como funciona" ── */ .bm-howbtn{ margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--cine-lav); padding:11px; border-radius:11px; cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:700; transition:background .2s; } .bm-howbtn:hover{ background:rgba(255,255,255,.08); } .bm-howbtn .chev{ transition:transform .25s; display:inline-block; } .bm-howbtn.open .chev{ transform:rotate(180deg); } .bm-how{ max-height:0; overflow:hidden; transition:max-height .4s var(--cine-ease); } .bm-how.open{ max-height:480px; } .bm-how ol{ margin:12px 0 2px; padding-left:20px; color:var(--cine-lav-dim); font-size:.82rem; line-height:1.65; } .bm-how li{ margin-bottom:6px; } .bm-how b{ color:var(--cine-lav); } /* ════════ Botão do topo (redesenho organizado) ════════ */ .cine-navboss{ min-width:230px; padding:8px 16px !important; align-items:stretch !important; } .cine-navboss .cine-navboss__txt{ width:100%; gap:0; } .cine-navboss__eye{ display:block; font-size:.56rem; letter-spacing:2px; text-transform:uppercase; color:var(--cine-accent); font-weight:800; font-style:normal; line-height:1; margin-bottom:3px; } .cine-navboss__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .cine-navboss__row b{ font-size:.95rem; font-weight:800; letter-spacing:.3px; color:#fff; line-height:1; } .cine-navboss__pct{ font-style:normal; color:#ffb43a; font-weight:800; font-size:.76rem; font-variant-numeric:tabular-nums; } .cine-navboss__hp{ display:block; height:4px; border-radius:3px; background:rgba(255,255,255,.13); overflow:hidden; margin:5px 0 4px; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); } .cine-navboss__hp i{ display:block; height:100%; width:100%; border-radius:3px; background:linear-gradient(90deg,#ff2208,#ff7e1c,#ffb43a); box-shadow:0 0 8px rgba(255,120,30,.6); transition:width .5s var(--cine-ease); } .cine-navboss__time{ display:block; font-size:.6rem; color:var(--cine-lav-dim); letter-spacing:.4px; } .cine-navboss__time i{ font-style:normal; color:var(--cine-lav); font-weight:600; font-variant-numeric:tabular-nums; } @media (max-width:560px){ .cine-navboss{ min-width:0; } .cine-navboss__time{ display:none; } } /* ════════ Abas do modal ════════ */ .bm-tabs{ display:flex; gap:8px; margin-bottom:14px; } .bm-tab{ flex:1; padding:9px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:var(--cine-lav); border-radius:10px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; transition:all .2s; } .bm-tab:hover{ background:rgba(255,255,255,.07); } .bm-tab.is-on{ background:linear-gradient(90deg,rgba(255,90,20,.22),rgba(255,138,61,.1)); border-color:rgba(255,138,61,.5); color:#fff; } /* ════════ Recompensas (Ruud / joias / miracle / tier log) ════════ */ .bm-rwtab{ display:flex; flex-direction:column; gap:12px; } .bm-rw-card{ padding:14px 15px; border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); } .bm-rw-h{ display:flex; align-items:center; gap:7px; font-size:.74rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--cine-lav); font-weight:800; margin-bottom:9px; } .bm-rw-h span{ color:var(--cine-lav); } /* Ruud */ .bm-rw-ruud{ background:linear-gradient(180deg,rgba(255,180,58,.1),rgba(255,90,20,.04)); border-color:rgba(255,180,58,.32); } .bm-rw-big{ font-size:2.2rem; font-weight:900; line-height:1; color:#ffd27a; text-shadow:0 2px 14px rgba(255,140,30,.4); font-variant-numeric:tabular-nums; } .bm-rw-big::after{ content:' Ruud'; font-size:.86rem; font-weight:700; color:var(--cine-lav-dim); letter-spacing:.5px; } .bm-rw-sub{ font-size:.76rem; color:var(--cine-lav-dim); margin:6px 0 7px; font-variant-numeric:tabular-nums; } .bm-rw-bar{ height:6px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); margin-bottom:12px; } .bm-rw-bar i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#ff7e1c,#ffb43a); box-shadow:0 0 8px rgba(255,140,30,.5); transition:width .4s var(--cine-ease); } .bm-rw-claim{ width:100%; padding:13px; border:0; border-radius:12px; cursor:pointer; font-family:inherit; font-weight:900; font-size:1rem; letter-spacing:1px; text-transform:uppercase; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff7e1c,#ff4d12); box-shadow:0 10px 28px rgba(255,90,20,.35); transition:filter .2s, transform .12s; } .bm-rw-claim:hover:not(:disabled){ filter:brightness(1.08); } .bm-rw-claim:active:not(:disabled){ transform:scale(.97); } .bm-rw-claim:disabled{ background:linear-gradient(90deg,#5a4a44,#3e3330); color:#cbb8ae; box-shadow:none; cursor:not-allowed; } .bm-rw-note{ text-align:center; font-size:.7rem; color:var(--cine-lav-dim); margin-top:8px; } /* Lists (jewels + tier log) */ .bm-rw-list{ display:flex; flex-direction:column; gap:6px; max-height:240px; overflow:auto; } .bm-rw-row{ display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 11px; border-radius:9px; background:rgba(255,255,255,.03); font-size:.82rem; } .bm-rw-jn{ color:#9fd9ff; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bm-rw-jt{ color:var(--cine-lav-dim); font-size:.7rem; flex:none; } .bm-rw-empty-sm{ color:var(--cine-lav-dim); font-size:.8rem; text-align:center; padding:10px 6px; } /* Miracle */ .bm-rw-miracle{ background:linear-gradient(180deg,rgba(255,200,80,.1),rgba(255,160,40,.04)); border-color:rgba(255,200,80,.3); } .bm-rw-mcount{ font-size:1.8rem; font-weight:900; color:#ffd75e; line-height:1; font-variant-numeric:tabular-nums; } /* Tier log */ .bm-rw-logrow{ padding:9px 11px; border-radius:9px; background:rgba(255,255,255,.03); border-left:3px solid rgba(255,255,255,.18); } .bm-rw-logrow.t-legendary{ border-left-color:#ffb43a; } .bm-rw-logrow.t-epic{ border-left-color:#9b5cff; } .bm-rw-logrow.t-rare{ border-left-color:#7aa2ff; } .bm-rw-logtop{ display:flex; align-items:baseline; justify-content:space-between; gap:9px; margin-bottom:3px; } .bm-rw-tier{ font-weight:800; color:var(--cine-ink); font-size:.84rem; } .bm-rw-date{ font-size:.7rem; color:var(--cine-lav-dim); flex:none; font-variant-numeric:tabular-nums; } .bm-rw-gave{ font-size:.78rem; color:var(--cine-lav); } /* Blocked warning banner */ .bm-rw-warn{ padding:12px 14px; border-radius:12px; background:linear-gradient(180deg,rgba(255,80,40,.16),rgba(255,60,30,.06)); border:1px solid rgba(255,90,40,.45); color:#ffd2c2; font-size:.82rem; font-weight:600; line-height:1.4; } .bm-rw-empty{ text-align:center; color:var(--cine-lav-dim); font-size:.84rem; padding:24px 10px; } .bm-drop--warn{ border-color:rgba(255,90,40,.6) !important; box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 30px rgba(255,90,40,.35) !important; } /* ════════ Equipamento ════════ */ .bm-equip{ display:flex; flex-direction:column; } .bm-eq-head{ font-size:.86rem; color:var(--cine-lav); margin-bottom:12px; } .bm-eq-head b{ color:#ffb43a; font-size:1rem; } .bm-eq-slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:18px; } .bm-slot{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 6px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); text-align:center; min-height:92px; justify-content:center; } .bm-slot.filled{ cursor:pointer; } .bm-slot.filled:hover{ background:rgba(255,255,255,.06); } .bm-slot__emoji{ font-size:1.5rem; line-height:1; } .bm-slot__nm{ font-size:.7rem; color:var(--cine-ink); font-weight:700; line-height:1.15; } .bm-slot__bn{ font-size:.74rem; color:#ffb43a; font-weight:800; } .bm-slot__bn i{ color:var(--cine-lav-dim); font-style:normal; font-weight:400; font-size:.68rem; } .bm-eq-invh{ font-size:.78rem; letter-spacing:1px; text-transform:uppercase; color:var(--cine-lav); font-weight:700; margin-bottom:9px; } .bm-eq-invh span{ color:var(--cine-lav-dim); } .bm-eq-inv{ display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto; } .bm-inv-it{ display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.03); border-left:3px solid #9aa3bd; } .bm-inv-em{ font-size:1.1rem; flex:none; } .bm-inv-nm{ flex:1; font-size:.82rem; color:var(--cine-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bm-inv-nm em{ display:block; font-style:normal; font-size:.64rem; color:var(--cine-lav-dim); text-transform:uppercase; letter-spacing:.5px; } .bm-inv-bn{ font-size:.8rem; font-weight:800; color:#ffb43a; flex:none; } .bm-inv-eq{ font-size:.68rem; color:#37d6a8; font-weight:700; flex:none; } .bm-inv-btn{ flex:none; padding:6px 12px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.74rem; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff7e1c); transition:filter .2s; } .bm-inv-btn:hover{ filter:brightness(1.1); } .bm-inv-empty{ text-align:center; color:var(--cine-lav-dim); font-size:.84rem; padding:24px 10px; } /* ════════ Toast de drop ════════ */ .bm-drop{ position:absolute; left:50%; top:14px; transform:translateX(-50%) translateY(-12px); z-index:8; display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:12px; background:linear-gradient(180deg,rgba(28,16,10,.96),rgba(14,9,8,.98)); border:1px solid rgba(255,138,61,.4); box-shadow:0 14px 40px rgba(0,0,0,.6); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; max-width:90%; } .bm-drop.show{ opacity:1; transform:translateX(-50%) translateY(0); } .bm-drop__em{ font-size:1.4rem; } .bm-drop__tx{ font-size:.82rem; color:var(--cine-ink); } .bm-drop__tx b{ display:block; } .bm-drop__tx span{ font-size:.7rem; color:var(--cine-lav-dim); } /* Espaço no topo do botão do Chefão */ .cine-navboss{ top:10px !important; transform:translateX(-50%) !important; } .cine-navboss:hover{ transform:translateX(-50%) scale(1.045) !important; } /* ── Botão do Chefão: borda limpa (hairline via inset) + cantos suaves ── */ .cine-navboss{ border:0 !important; border-radius:14px !important; background:linear-gradient(180deg,rgba(32,19,13,.9),rgba(17,11,9,.94)) !important; box-shadow:0 10px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,138,61,.24), 0 0 28px rgba(255,90,30,.1) !important; transition:transform .25s var(--cine-ease), box-shadow .25s, padding .25s var(--cine-ease) !important; } .cine-navboss::after{ display:none !important; } .cine-navboss:hover{ box-shadow:0 14px 40px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,138,61,.55), 0 0 44px rgba(255,90,30,.28) !important; } /* ── Minimiza ao rolar: só o tempo de renascer ── */ .cine-nav.solid .cine-navboss{ padding:7px 16px !important; min-width:0 !important; } .cine-nav.solid .cine-navboss .cine-navboss__eye, .cine-nav.solid .cine-navboss .cine-navboss__row, .cine-nav.solid .cine-navboss .cine-navboss__hp{ display:none !important; } .cine-nav.solid .cine-navboss .cine-navboss__time{ font-size:.78rem; color:var(--cine-ink); } .cine-nav.solid .cine-navboss .cine-navboss__time i{ color:#ffb43a; font-weight:700; } /* ── Feed do Steal of Heaven (visível a todos) ── */ .bm-special{ margin-bottom:16px; padding:10px 12px; border-radius:12px; background:linear-gradient(180deg,rgba(255,200,80,.1),rgba(255,160,40,.04)); border:1px solid rgba(255,200,80,.32); } .bm-sp-h{ font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:#ffd75e; font-weight:800; margin-bottom:6px; } .bm-sp-it{ font-size:.8rem; color:var(--cine-lav); margin-bottom:2px; } .bm-sp-it b{ color:#fff; } .bm-drop--special{ border-color:#ffd75e !important; box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 34px rgba(255,200,80,.45) !important; } /* Vantagens do Passe no card */ .bm-pass{ align-items:center !important; } .bm-pass__benefits{ display:flex !important; flex-direction:column; gap:3px; margin-top:5px; } .bm-pass__benefits em{ font-style:normal; font-size:.72rem; color:var(--cine-lav); line-height:1.25; } .bm-pass__benefits em b{ color:#ffb43a; } /* Compactar modal p/ evitar rolagem */ .bm-pass__benefits{ display:block !important; margin-top:2px; font-size:.7rem; color:var(--cine-lav); line-height:1.35; } .bm-pass__benefits b{ color:#ffb43a; } .bm-lore{ margin:7px 0 11px !important; font-size:.86rem !important; } .bm-level{ margin:2px 0 9px !important; } .bm-pass{ padding:10px 14px !important; margin-top:12px !important; } /* Passe do Chefao — chips organizados */ .bm-pass__benefits{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:5px 6px !important; margin-top:7px !important; } .bm-pass__chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:rgba(255,138,61,.12); border:1px solid rgba(255,138,61,.28); color:#ffd9b0; font-size:.7rem; font-weight:600; line-height:1.45; white-space:nowrap; } .bm-pass__chip b{ color:#ffb43a; font-weight:800; } .bm-pass.is-active .bm-pass__chip{ background:rgba(55,214,168,.12); border-color:rgba(55,214,168,.3); color:#bff3e2; } .bm-pass.is-active .bm-pass__chip b{ color:#37d6a8; } .bm-pass__txt > b{ font-size:.92rem; color:#ffb43a; letter-spacing:.2px; } .bm-pass__txt{ flex:1; min-width:0; } /* bm-pass-vertical: card premium em coluna (botao full-width embaixo) */ .bm-pass{ flex-direction:column !important; align-items:stretch !important; gap:11px !important; padding:15px 16px !important; } .bm-pass__txt{ flex:none !important; width:100%; } .bm-pass__txt > b{ font-size:1rem !important; } .bm-pass__benefits{ justify-content:flex-start; margin-top:10px !important; gap:6px 7px !important; } .bm-pass__chip{ padding:4px 11px; font-size:.72rem; } #bm-pass-btn{ width:100% !important; padding:12px 16px !important; font-size:.88rem !important; letter-spacing:.7px; box-shadow:0 6px 18px rgba(255,90,31,.32); } .bm-stats{ margin-bottom:11px !important; } .cine-bossmodal__main{ padding:clamp(16px,2vw,28px) !important; } /* ════════════════ GUILDS (recrutamento) ════════════════ */ .cine-guilds{ position:relative; padding:clamp(70px,11vh,140px) 0; } .cine-guilds__wrap{ max-width:1100px; margin:0 auto; padding:0 clamp(20px,5vw,40px); text-align:center; } .cine-guilds__eye{ display:block; font-size:.74rem; letter-spacing:3px; text-transform:uppercase; color:var(--cine-accent); font-weight:800; margin-bottom:10px; } .cine-guilds__h2{ font-size:clamp(2rem,5vw,3.4rem); font-weight:800; letter-spacing:1px; text-transform:uppercase; line-height:1; margin:0 0 14px; color:var(--cine-ink); } .cine-guilds__lead{ max-width:640px; margin:0 auto 40px; color:var(--cine-lav); font-size:1rem; line-height:1.55; } .cine-guilds__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } .cine-gcard{ position:relative; text-align:left; padding:22px; border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.09); border-top:3px solid var(--gc,#ff5a1f); box-shadow:0 18px 50px rgba(0,0,0,.4); transition:transform .25s, box-shadow .25s; } .cine-gcard:hover{ transform:translateY(-4px); box-shadow:0 26px 70px rgba(0,0,0,.55); } .cine-gcard__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; } .cine-gcard__name{ font-size:1.3rem; font-weight:800; color:var(--cine-ink); letter-spacing:.4px; } .cine-gcard__badge{ flex:none; font-size:.64rem; letter-spacing:1px; text-transform:uppercase; font-weight:800; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--cine-lav); } .cine-gcard__badge.st-voting{ background:rgba(122,162,255,.2); color:#9ec0ff; } .cine-gcard__badge.st-formed{ background:rgba(55,214,168,.2); color:#5ee0b8; } .cine-gcard__bar{ height:10px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.5); } .cine-gcard__bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,var(--gc,#ff5a1f),#ffb43a); box-shadow:0 0 12px rgba(255,120,30,.5); transition:width .5s var(--cine-ease); } .cine-gcard__meta{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:.82rem; color:var(--cine-lav); } .cine-gcard__meta b{ color:var(--cine-ink); } .cine-gcard__leader{ color:#5ee0b8; } .cine-gcard__avs{ display:flex; flex-wrap:wrap; gap:5px; margin-top:14px; min-height:30px; } .cine-gav{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#1a0d06; background:linear-gradient(135deg,#ffb43a,#ff7e1c); border:1px solid rgba(0,0,0,.3); } .cine-gav.empty{ background:rgba(255,255,255,.05); color:var(--cine-lav-dim); border:1px dashed rgba(255,255,255,.14); } .cine-gcard__act{ display:flex; gap:9px; margin-top:16px; } .cine-gbtn{ flex:1; padding:11px; border:0; border-radius:11px; cursor:pointer; font-family:inherit; font-weight:800; font-size:.86rem; transition:filter .2s, transform .1s; } .cine-gbtn:active{ transform:scale(.97); } .cine-gbtn--join{ color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff5a1f); } .cine-gbtn--join:hover{ filter:brightness(1.08); } .cine-gbtn--ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:var(--cine-ink); } .cine-gbtn--ghost:hover{ background:rgba(255,255,255,.12); } .cine-gbtn[disabled]{ opacity:.5; cursor:not-allowed; } .cine-guilds__create{ margin-top:34px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; } .cine-guilds__create input{ padding:12px 16px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--cine-ink); font-family:inherit; font-size:.9rem; min-width:220px; } .cine-guilds__createlbl{ color:var(--cine-lav-dim); font-size:.85rem; width:100%; margin-bottom:-4px; } .cine-gmsg{ width:100%; text-align:center; font-size:.84rem; color:#ffb43a; min-height:18px; margin-top:6px; } /* ── Modal da guild ── */ .cine-gmodal{ position:fixed; inset:0; z-index:1850; display:flex; align-items:center; justify-content:center; padding:clamp(14px,3vw,40px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; } .cine-gmodal.open{ opacity:1; visibility:visible; } .cine-gmodal__scrim{ position:absolute; inset:0; background:rgba(4,3,8,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cine-gmodal__panel{ position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; padding:clamp(20px,3vw,32px); border-radius:22px; background:linear-gradient(180deg,#15100e,#0c0807); border:1px solid rgba(255,138,61,.22); box-shadow:0 50px 140px rgba(0,0,0,.7); transform:scale(.92); transition:transform .35s var(--cine-ease); } .cine-gmodal.open .cine-gmodal__panel{ transform:scale(1); } .cine-gmodal__x{ position:absolute; top:12px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer; } .cine-gmodal__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .cine-gmodal__head h3{ font-size:clamp(1.5rem,3.5vw,2.1rem); font-weight:800; margin:0; } .cine-gmodal__badge{ font-size:.64rem; letter-spacing:1px; text-transform:uppercase; font-weight:800; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.08); color:var(--cine-lav); } .cine-gmodal__bar{ height:10px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; } .cine-gmodal__bar i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#ff5a1f,#ffb43a); transition:width .5s; } .cine-gmodal__count{ font-size:.84rem; color:var(--cine-lav-dim); margin:6px 0 16px; } .cine-gmodal__vote{ background:rgba(122,162,255,.08); border:1px solid rgba(122,162,255,.25); border-radius:14px; padding:14px; margin-bottom:16px; } .cine-gmodal__vote h4{ margin:0 0 4px; font-size:.95rem; color:#9ec0ff; } .cine-gmodal__vote p{ margin:0 0 12px; font-size:.76rem; color:var(--cine-lav-dim); } .cine-gmh{ display:none; } .cine-gmodal__mh{ font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--cine-lav); font-weight:700; margin-bottom:8px; } .cine-gmodal__members{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; } .cine-gmemb{ display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px; background:rgba(255,255,255,.03); font-size:.86rem; color:var(--cine-ink); } .cine-gmemb .gtag{ font-size:.62rem; padding:2px 7px; border-radius:999px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; } .cine-gmemb .gtag.leader{ background:rgba(55,214,168,.2); color:#5ee0b8; } .cine-gmemb .gtag.founder{ background:rgba(255,180,58,.18); color:#ffce7a; } .cine-gmemb .gnm{ flex:1; } .cine-gmemb .gvote, .cine-gmemb .gkick{ flex:none; padding:5px 11px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.74rem; } .cine-gmemb .gvote{ color:#1a0d06; background:linear-gradient(90deg,#9ec0ff,#7aa2ff); } .cine-gmemb .gkick{ background:rgba(255,60,60,.18); color:#ff8a8a; } .cine-gmodal__tools{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:14px; margin-bottom:16px; display:flex; flex-direction:column; gap:9px; } .cine-gmodal__tools .th{ font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:#ffce7a; font-weight:800; } .cine-gmodal__tools .row{ display:flex; gap:8px; } .cine-gmodal__tools input{ flex:1; padding:9px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.25); color:var(--cine-ink); font-family:inherit; font-size:.84rem; } .cine-gmodal__tools button{ flex:none; padding:9px 14px; border:0; border-radius:9px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.8rem; background:rgba(255,255,255,.1); color:var(--cine-ink); } .cine-gmodal__chatwrap{ margin-bottom:16px; } .cine-gmodal__chath{ font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--cine-lav); font-weight:700; margin-bottom:8px; } .cine-gmodal__pinned{ font-size:.8rem; color:#ffce7a; background:rgba(255,180,58,.1); border-left:3px solid #ffae3a; padding:8px 11px; border-radius:8px; margin-bottom:8px; } .cine-gmodal__chat{ height:200px; overflow-y:auto; display:flex; flex-direction:column; gap:7px; padding:10px; border-radius:11px; background:rgba(0,0,0,.25); margin-bottom:9px; } .cine-gchatmsg{ font-size:.84rem; color:var(--cine-lav); line-height:1.35; } .cine-gchatmsg b{ color:#ffb43a; margin-right:5px; } .cine-gmodal__chatform{ display:flex; gap:8px; } .cine-gmodal__chatform input{ flex:1; padding:11px 14px; border-radius:11px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--cine-ink); font-family:inherit; font-size:.88rem; } .cine-gmodal__chatform button{ flex:none; padding:11px 18px; border:0; border-radius:11px; cursor:pointer; font-family:inherit; font-weight:800; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff7e1c); } .cine-gmodal__chatlocked{ text-align:center; color:var(--cine-lav-dim); font-size:.82rem; padding:18px; } .cine-gmodal__foot{ display:flex; gap:10px; justify-content:space-between; } .cine-gmodal__inv{ padding:10px 16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:var(--cine-ink); border-radius:11px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; } .cine-gmodal__leave{ padding:10px 16px; border:0; background:rgba(255,60,60,.16); color:#ff8a8a; border-radius:11px; cursor:pointer; font-family:inherit; font-weight:700; font-size:.84rem; } /* Explicador + placar das guilds */ .cine-guilds__how{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:0 auto 36px; max-width:920px; } .cine-ghow{ display:flex; gap:11px; align-items:flex-start; text-align:left; padding:13px 15px; border-radius:13px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); } .cine-ghow__ic{ font-size:1.35rem; flex:none; line-height:1.1; } .cine-ghow p{ margin:0; font-size:.82rem; color:var(--cine-lav); line-height:1.45; } .cine-guilds__feed{ margin:36px auto 0; max-width:760px; text-align:left; } .cine-gfeed__h{ font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--cine-accent); font-weight:800; margin-bottom:12px; text-align:center; } .cine-gfeed__list{ display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; } .cine-gfeed__row{ font-size:.84rem; color:var(--cine-ink); padding:9px 13px; border-radius:9px; background:rgba(255,255,255,.03); border-left:2px solid rgba(255,90,30,.45); } .cine-gfeed__row .g1, .cine-gfeed__row .g2{ font-size:.74rem; color:var(--cine-lav-dim); } .cine-gfeed__row .pt{ float:right; color:#ffb43a; font-weight:800; } .cine-gfeed__empty{ text-align:center; color:var(--cine-lav-dim); font-size:.85rem; padding:22px 14px; background:rgba(255,255,255,.02); border-radius:11px; border:1px dashed rgba(255,255,255,.1); } /* Explicador das guilds em UMA LINHA só (rola na horizontal no mobile) */ .cine-guilds__how{ display:flex !important; flex-wrap:nowrap !important; gap:10px; overflow-x:auto; padding-bottom:8px; grid-template-columns:none !important; max-width:980px; } .cine-ghow{ flex:1 1 0; min-width:158px; } .cine-ghow__ic{ font-size:1.15rem; } .cine-ghow p{ font-size:.74rem; line-height:1.35; } /* Loja de pontos da guild (painel) */ .cine-gmodal__shop{ margin-bottom:16px; } .cine-gmodal__shoph{ font-size:.74rem; letter-spacing:1px; text-transform:uppercase; color:var(--cine-accent); font-weight:800; margin-bottom:9px; } .cine-gmodal__shoph b{ color:#ffb43a; } .cine-gshop{ display:flex; flex-direction:column; gap:6px; } .cine-gshop__it{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); } .cine-gshop__it .snm{ flex:1; font-size:.86rem; color:var(--cine-ink); } .cine-gshop__it .scost{ font-size:.78rem; color:#ffb43a; font-weight:700; } .cine-gshop__it .sbuy{ flex:none; padding:6px 13px; border:0; border-radius:8px; cursor:pointer; font-family:inherit; font-weight:800; font-size:.76rem; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff7e1c); } .cine-gshop__it .sbuy[disabled]{ opacity:.4; cursor:not-allowed; background:rgba(255,255,255,.1); color:var(--cine-lav-dim); } /* ════════ CHANGELOG minimalista (estilo MU patch notes) ════════ */ .cine-changelog .cine-h2 span:first-child{ letter-spacing:2px; } .cine-cl__list{ max-width:720px; margin:34px auto 0; display:flex; flex-direction:column; text-align:left; border-left:2px solid rgba(255,138,61,.25); padding-left:2px; } .cine-cl__row{ display:flex; gap:16px; padding:15px 0 15px 22px; position:relative; border-bottom:1px solid rgba(255,255,255,.05); } .cine-cl__row:last-child{ border-bottom:0; } .cine-cl__row::before{ content:''; position:absolute; left:-7px; top:19px; width:11px; height:11px; border-radius:50%; background:#ff5a1f; box-shadow:0 0 10px rgba(255,90,30,.6); } .cine-cl__date{ flex:none; width:48px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; color:var(--cine-accent); font-weight:700; padding-top:3px; letter-spacing:.5px; } .cine-cl__body{ flex:1; min-width:0; } .cine-cl__tag{ display:inline-block; font-size:.58rem; letter-spacing:1.5px; text-transform:uppercase; font-weight:800; color:#ffce7a; background:rgba(255,180,58,.12); border:1px solid rgba(255,180,58,.2); padding:2px 8px; border-radius:5px; margin-bottom:7px; } .cine-cl__title{ display:block; font-size:1rem; font-weight:700; color:var(--cine-ink); margin-bottom:3px; line-height:1.3; } .cine-cl__txt{ margin:0; font-size:.85rem; color:var(--cine-lav-dim); line-height:1.5; } .cine-cl__empty, .cine-cl__loading{ text-align:center; color:var(--cine-lav-dim); padding:30px; font-size:.88rem; } @media (max-width:560px){ .cine-cl__date{ width:42px; font-size:.74rem; } } /* Selo BETA no changelog */ .cine-cl__beta{ font-size:.42em; letter-spacing:2px; font-weight:800; color:#1a0d06; background:linear-gradient(90deg,#ffb43a,#ff5a1f); padding:3px 9px; border-radius:6px; vertical-align:super; margin-left:12px; box-shadow:0 4px 14px rgba(255,90,30,.35); } /* Modal do changelog (histórico) */ .cine-clmodal{ position:fixed; inset:0; z-index:1850; display:flex; align-items:center; justify-content:center; padding:clamp(14px,3vw,40px); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; } .cine-clmodal.open{ opacity:1; visibility:visible; } .cine-clmodal__scrim{ position:absolute; inset:0; background:rgba(4,3,8,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .cine-clmodal__panel{ position:relative; width:min(680px,100%); max-height:88vh; overflow:auto; padding:clamp(22px,3vw,34px); border-radius:22px; background:linear-gradient(180deg,#15100e,#0c0807); border:1px solid rgba(255,138,61,.22); box-shadow:0 50px 140px rgba(0,0,0,.7); transform:scale(.94); transition:transform .35s var(--cine-ease); } .cine-clmodal.open .cine-clmodal__panel{ transform:scale(1); } .cine-clmodal__x{ position:absolute; top:12px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.16); color:#fff; cursor:pointer; } .cine-clmodal__h{ font-size:1.15rem; font-weight:800; color:var(--cine-ink); margin-bottom:18px; letter-spacing:.5px; } .cine-clmodal .cine-cl__list{ margin-top:0; } /* Loja: explicação + escopo + cooldown */ .cine-gmodal__shopex{ font-size:.74rem; color:var(--cine-lav-dim); line-height:1.45; margin:-4px 0 12px; } .cine-gshop__it .sall{ font-style:normal; color:#5ee0b8; font-size:.7rem; font-weight:700; } .cine-gshop__it .slock{ flex:none; font-size:.72rem; color:var(--cine-lav-dim); text-align:right; } /* ── Atalhos no topo, flanqueando o Chefão do Dia (home + subpáginas) ── */ .cine-nav__side{ display:flex; align-items:center; gap:20px; } .cine-nav__side--r{ justify-content:flex-end; } .cine-navlinks{ position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:18px; z-index:1; background:rgba(9,6,7,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(240,201,64,.14); border-radius:999px; padding:8px 18px; box-shadow:0 10px 30px rgba(0,0,0,.45); } .cine-navlinks--l{ right:calc(50% + 145px); justify-content:flex-end; } .cine-navlinks--r{ left:calc(50% + 145px); } .cine-navlinks a{ font-weight:600; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:#cabfb4; text-decoration:none; position:relative; padding:6px 1px; white-space:nowrap; transition:color .18s var(--cine-ease); } .cine-navlinks a::after{ content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; background:linear-gradient(90deg,#f0c940,#ff6a4d); border-radius:2px; transition:right .22s var(--cine-ease); } .cine-navlinks a:hover, .cine-navlinks a.active{ color:#f0c940; } .cine-navlinks a:hover::after, .cine-navlinks a.active::after{ right:0; } @media (max-width:1180px){ .cine-navlinks{ display:none; } .cine-nav__side{ gap:0; } } body.cine-home .cine-navlinks{ display:none !important; } /* menu compacto p/ caber o seletor de idioma (lang-picker) */ .cine-menu__links a{ font-size:clamp(1.02rem,2.4vh,1.55rem) !important; padding:clamp(6px,1.05vh,11px) 4px !important; } .cine-menu__rhead{ margin-bottom:clamp(12px,2vh,24px) !important; } .cine-menu__right{ overflow-y:auto !important; } .cine-menu__rfoot{ padding-top:13px !important; }