/* * Dock inferior — barra 72px, gradiente footer Figma; tab ativa: altura extra + translateY * com margin-bottom negativo para o fundo visual encostar ao dock (translate não altera layout). */ /* * Fundo do lobby (body + main): --lobby-page-bg-image = lobby/Background.svg no layout (Propshaft). * Vinheta só em linear: os radiais antigos criavam anéis tipo “radar” por cima da textura. */ body.bg-green-football:not(.registration-fullbleed), main.bg-green-football { background-color: var(--cx-surface-card, #11231c); background-image: linear-gradient( to bottom, rgba(1, 29, 14, 0.42) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(1, 18, 12, 0.48) 100% ), var(--lobby-page-bg-image, none); background-size: cover, cover; background-position: center, center; background-repeat: no-repeat, no-repeat; background-attachment: scroll, scroll; } /* * App-shell (mobile): viewport-bounded layout, comportamento de app nativo. * - / ocupam exatamente a viewport (100dvh) e não rolam. * - A cadeia turbo-frame#body → .div (flex-col) → main → turbo-frame#main herda essa altura. * - SOMENTE a raiz da página rola (`.keen-slider__slide` no slider raiz / `main.lobby-with-fixed-dock` em /lobby). * - O dock fixo (#cacheta-lobby-dock.dock--fixed) é um overlay viewport-relative; o padding-bottom * do scroller deixa o conteúdo passar por baixo dele sem ficar escondido. * * Classe `lobby-scroll-shell` ativa nas rotas main#show (slider) e lobbies#show. */ html:not(.registration-fullbleed).lobby-scroll-shell, html:not(.registration-fullbleed).lobby-scroll-shell body:not(.registration-fullbleed) { height: 100%; min-height: 100svh; min-height: 100dvh; /* Trava a raiz: a página não rola — apenas o scroller interno declarado abaixo. */ overflow: hidden; overscroll-behavior: none; } /* Cadeia interna herda a altura da viewport sem permitir crescimento por padding/margem. */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#body, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#body > .div, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#body > .div > main[data-controller="main"], html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#body > .div > main[data-controller="main"] > turbo-frame#main { height: 100%; min-height: 0; box-sizing: border-box; } /* Slider raiz (/): trilho horizontal ocupa o espaço restante depois do turbo-frame#nav. */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#main > turbo-frame#slider, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out { height: 100%; min-height: 0; box-sizing: border-box; } /* * Each slide is the only vertical scroller on `/` (Messages, Clubs, Lobby). * Support + Settings use inner scroll on `.support-page` / settings host (see below) * so short pages do not leave a large empty rubber-band above the dock. * Does not apply to `.quick-match__slider .keen-slider__slide` (nested horizontal carousel). */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide { height: 100%; min-height: 0; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); } /* * Support + Settings: slide fills the track but does not scroll; `overflow-y` lives on the * inner column so scroll extent follows content + bottom inset (no empty band above the dock). */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="support"], html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] { display: flex; flex-direction: column; align-self: stretch; width: 100%; height: 100%; min-height: 0; max-height: 100%; box-sizing: border-box; overflow: hidden; overscroll-behavior: contain; padding-bottom: 0; scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); } html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="support"] > turbo-frame#support, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings { flex: 1 1 0; min-height: 0; min-width: 0; flex-basis: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="support"] > turbo-frame#support > .support-page, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings > .lobby-settings.lobby-settings--guest { flex: 1 1 0; min-height: 0; min-width: 0; flex-basis: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; box-sizing: border-box; } /* * Settings (authenticated): host only passes height to the inner column; accordions + logout * scroll inside `.lobby-settings.lobby-scroll-root` so expanded accordions stay reachable above the dock. */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings > .lobby-settings-host { flex: 1 1 0; min-height: 0; min-width: 0; flex-basis: 0; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; } html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings > .lobby-settings-host > .lobby-settings.lobby-scroll-root { flex: 1 1 0; min-height: 0; min-width: 0; flex-basis: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; box-sizing: border-box; } html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="support"] > turbo-frame#support > .support-page { padding-bottom: calc(16px + 84px + env(safe-area-inset-bottom, 0px) + 8px); } html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings > .lobby-settings.lobby-settings--guest, html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide[data-slider-tab="settings"] > turbo-frame#settings > .lobby-settings-host > .lobby-settings.lobby-scroll-root { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 16px); scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 16px); } /* * Per-widget turbo-frame inside each slide: . * * `` defaults to `display: inline`, which breaks percentage height * chains from `.keen-slider__slide` to inner pages. Most tabs use `height: 100%` * so inner layouts (e.g. Lobby) fill the slide. * * Support and Settings: `#support` / `#settings` use flex + inner overflow (rules above). */ html:not(.registration-fullbleed).lobby-scroll-shell turbo-frame#slider > .keen-slider.zoom-out > .keen-slider__slide > turbo-frame { display: block; height: 100%; min-height: 0; box-sizing: border-box; } /* Rota `/lobby` (lobbies#show): o `main.lobby-with-fixed-dock` é o scroller único. */ html:not(.registration-fullbleed).lobby-scroll-shell main.lobby-with-fixed-dock { height: 100%; min-height: 0; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); } /* * `.lobby-scroll-root` is the inner column (LobbyComponent, setting_component): * min-height fills the slide when inner layouts need vertical stretch (Lobby hero). * Do not use 100dvh here — height comes from the parent scroller (slide / main). */ html:not(.registration-fullbleed).lobby-scroll-shell .lobby-scroll-root { min-height: 100%; box-sizing: border-box; } /* Folga sob turbo-frame#nav (em /, o nav fica em-fluxo no topo da coluna). */ html:not(.registration-fullbleed).lobby-scroll-shell .lobby-scroll-root > .lobby-scroll-root__hero { margin-top: 4.75rem; box-sizing: border-box; } /* * Fora do shell: rota /lobby standalone (data-theme="lobby" sem lobby-scroll-shell, ex.: cache do navegador * antes do JS aplicar a classe) e variantes legadas precisam do espaço para o dock. */ html[data-theme="lobby"] main.lobby-with-fixed-dock, html[data-theme="lobby"] .main-with-fixed-dock { box-sizing: border-box; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px) + 8px); } #cacheta-lobby-dock.dock.dock--fixed { position: fixed; inset-inline: 0; bottom: env(safe-area-inset-bottom, 0px); z-index: 60; width: 100%; max-width: none; height: 72px; min-height: 72px; box-sizing: border-box; margin: 0; /* Sem padding vertical na barra — altura fixa 72px; só folgas laterais / safe area. */ padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0 max(10px, env(safe-area-inset-left, 0px)); opacity: 1; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 2px; overflow: visible; background: var( --cx-dock-footer-grad, linear-gradient(0deg, #1cafaa 0%, #8db80f 100%) ); border: none; border-top-left-radius: 14px; border-top-right-radius: 14px; } /* Previews / variantes sem --fixed */ .dock:not(.dock--fixed) { position: relative; z-index: 50; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 16px; width: 100%; box-sizing: border-box; overflow: visible; background: var( --cx-dock-footer-grad, linear-gradient(360deg, #1cafaa 0%, #8db80f 100%) ); border: none; border-top-left-radius: 14px; border-top-right-radius: 14px; padding: 6px 12px 6px; } #cacheta-lobby-dock.dock > turbo-frame { flex: 1 1 0; display: flex; flex-direction: row; justify-content: center; align-items: stretch; min-width: 0; min-height: 0; } /* Conteúdo do slot ocupa toda a largura do frame (evita pill ativo mais estreito que os vizinhos). */ #cacheta-lobby-dock.dock > turbo-frame > a.dock-tab, #cacheta-lobby-dock.dock > turbo-frame > .indicator { flex: 1 1 0; min-width: 0; align-self: stretch; } /* Club visitante: slot com turbo-frame aninhado (login). */ #cacheta-lobby-dock.dock > turbo-frame > turbo-frame { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: row; justify-content: center; align-items: stretch; } #cacheta-lobby-dock.dock > turbo-frame > turbo-frame > a.dock-tab, #cacheta-lobby-dock.dock > turbo-frame > turbo-frame > .indicator { flex: 1 1 0; min-width: 0; align-self: stretch; } #cacheta-lobby-dock.dock > turbo-frame > .indicator { display: flex; flex-direction: column; align-items: stretch; justify-content: center; } #cacheta-lobby-dock.dock > turbo-frame > .indicator > .dock-tab.nav-item { flex: 1 1 0; min-width: 0; min-height: 0; } #cacheta-lobby-dock.dock > turbo-frame#message_dock_button_frame > .indicator { position: relative; } #cacheta-lobby-dock.dock > turbo-frame#message_dock_button_frame > .indicator > .indicator-item.badge { position: absolute; right: 20px; top: 15px; padding: 8px; } /* Tab ativa: ancora o pill pela base da barra; translate eleva sem deixar “buraco” (ver margin no .tab--active). */ #cacheta-lobby-dock.dock > turbo-frame:has(.tab--active) { align-items: flex-end; } #cacheta-lobby-dock.dock > turbo-frame:has(.tab--active) > .indicator { justify-content: flex-end; } /* Slot lobby: sem “segunda caixa” com altura própria — o pill ativo (.tab--active) cobre o destaque. */ #cacheta-lobby-dock.dock > turbo-frame#lobby_dock_button_frame { background: transparent; margin-bottom: 0; margin-top: 0; height: 100%; min-height: 0; border-radius: 0; } #cacheta-lobby-dock.dock > turbo-frame#lobby_dock_button_frame span.dock-label > span { font-weight: 700; } /* Inativos: texto escuro sobre gradiente claro da barra */ #cacheta-lobby-dock.dock .dock-label { color: #031207; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: 11px; text-align: center; line-height: 13px; letter-spacing: 0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #cacheta-lobby-dock.dock .dock-tab.tab--active .dock-label, #cacheta-lobby-dock.dock a.dock-tab.tab--active .dock-label { color: #031207; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 700; line-height: 15px; letter-spacing: 0; } #cacheta-lobby-dock.dock a.dock-tab { text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent; } #cacheta-lobby-dock.dock .dock-tab, #cacheta-lobby-dock.dock a.dock-tab { cursor: pointer; pointer-events: auto; touch-action: manipulation; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: transparent; border: none; padding: 0; font: inherit; box-sizing: border-box; min-width: 0; transition: box-shadow 0.2s ease, background 0.2s ease, height 0.22s ease, transform 0.22s ease, margin-bottom 0.22s ease; } /* Largura igual por slot: o item preenche o turbo-frame (Figma). */ #cacheta-lobby-dock.dock .dock-tab.nav-item, #cacheta-lobby-dock.dock a.dock-tab.nav-item { flex: 1 1 0; min-width: 0; } @keyframes cacheta-dock-tab-active-in { from { opacity: 0.58; } to { opacity: 1; } } #cacheta-lobby-dock.dock .dock-tab.tab--active, #cacheta-lobby-dock.dock a.dock-tab.tab--active { position: relative; z-index: 5; box-sizing: border-box; flex: 1 1 0; min-width: 0; /* Altura extra = saliência para cima; translateY(-12px) eleva o desenho; margin-bottom -12px * devolve a ocupação no flex (translate não mexe no layout — sem faixa vazia até ao fundo do dock). */ height: calc(100% + 12px); min-height: 64px; margin-bottom: -12px; transform: translateY(-12px); transform-origin: center bottom; padding: 4px 3px 5px; overflow: visible; justify-content: center; gap: 2px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: linear-gradient( 180deg, var(--cx-accent-lime, #a6d90f) 0%, var(--cx-accent-cyan, #03f3eb) 100% ); background-repeat: no-repeat; background-size: 100% 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 -2px 10px rgba(0, 40, 18, 0.12), 0 10px 24px rgba(0, 40, 18, 0.35); /* Fade-in ao trocar tab ativa — suaviza flicker de layout/transform. */ animation: cacheta-dock-tab-active-in 0.26s ease-out both; } @media (prefers-reduced-motion: reduce) { #cacheta-lobby-dock.dock .dock-tab.tab--active, #cacheta-lobby-dock.dock a.dock-tab.tab--active { animation: none; } } #cacheta-lobby-dock.dock .dock-tab__icon { display: block; width: 40px; height: 40px; max-width: 40px; max-height: 40px; object-fit: contain; flex-shrink: 0; transition: opacity 0.18s ease, width 0.2s ease, height 0.2s ease, max-width 0.2s ease, max-height 0.2s ease; } #cacheta-lobby-dock.dock .dock-tab.tab--active .dock-tab__icon, #cacheta-lobby-dock.dock a.dock-tab.tab--active .dock-tab__icon { width: 36px; height: 36px; max-width: 36px; max-height: 36px; margin-top: -1px; flex-shrink: 0; } /* * Hover dos ícones: NÃO usar só @media (hover: hover) — em PWA/WebView/tablet com * ponteiro “coarse” como primário esse media é falso e o efeito some por completo. * turbo-frame:hover: com pointer sobre o botão/link (descendente), o frame também * está em hover no CSS, alargando a zona útil. */ #cacheta-lobby-dock.dock > turbo-frame:hover .dock-tab:not(.tab--active) .dock-tab__icon, #cacheta-lobby-dock.dock > turbo-frame:hover a.dock-tab:not(.tab--active) .dock-tab__icon, #cacheta-lobby-dock.dock .dock-tab:hover:not(.tab--active) .dock-tab__icon, #cacheta-lobby-dock.dock a.dock-tab:hover:not(.tab--active) .dock-tab__icon { opacity: 0.92; width: 46px; height: 46px; max-width: 46px; max-height: 46px; } #cacheta-lobby-dock.dock > turbo-frame:hover .dock-tab.tab--active .dock-tab__icon, #cacheta-lobby-dock.dock > turbo-frame:hover a.dock-tab.tab--active .dock-tab__icon, #cacheta-lobby-dock.dock .dock-tab.tab--active:hover .dock-tab__icon, #cacheta-lobby-dock.dock a.dock-tab.tab--active:hover .dock-tab__icon { width: 38px; height: 38px; max-width: 38px; max-height: 38px; } #cacheta-lobby-dock.dock .dock-tab:active:not(.tab--active) .dock-tab__icon, #cacheta-lobby-dock.dock a.dock-tab:active:not(.tab--active) .dock-tab__icon { opacity: 0.88; } /* * Classe no (dock-tab__icon--nudge) — não depende só do pai; !important evita * utilitários Tailwind/Daisy e garante que o ajuste apareça após rebuild do CSS. * 1px: alinhamento óptico leve (CARTAS + headset); subir/descer: editar só este valor. */ #cacheta-lobby-dock.dock img.dock-tab__icon--nudge { transform: translateY(1px) !important; } /* Ativo: sem nudge extra no ícone — alinhamento do pill */ #cacheta-lobby-dock.dock .dock-tab.tab--active img.dock-tab__icon--nudge, #cacheta-lobby-dock.dock a.dock-tab.tab--active img.dock-tab__icon--nudge { transform: none !important; }