/* Passaros.org — visual Figma WEBAPP (home / navbar / footer) */ @import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap'); :root { --po-page-bg: #f1f1f1; --po-card: #ffffff; --po-card-muted: #f1f1f1; --po-border: #eaeaea; --po-border-strong: #cfcfcf; --po-text-h2: #3a3a3a; --po-text-h3: #424242; --po-text-body: #474747; --po-text-muted: #6f6f6f; --po-text-disabled: #7b7b7b; --po-primary: #accd00; --po-primary-text: #061029; --po-primary-hover: #9bbb00; --po-primary-dark: #768c00; --po-primary-darkest: #5c6d00; --po-radius-lg: 24px; --po-radius-md: 16px; --po-radius-sm: 12px; --po-radius-pill: 999px; --po-shadow: 0 11px 10.8px rgba(126, 126, 126, 0.13); --po-shadow-card: 0 8px 16px rgba(0, 0, 0, 0.05); --po-font: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; --po-nav-height: 96px; } html { overflow-x: hidden; min-height: 100%; } body { font-family: var(--po-font); background-color: var(--po-page-bg); color: var(--po-text-body); padding-top: var(--po-nav-height); padding-bottom: 64px; position: relative; overflow-x: hidden; /* Fill the viewport on short pages so the watermark is not clipped, without growing the document past the screen (padding is already border-box). */ min-height: 100dvh; } .page-watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .page-watermark__p { position: absolute; width: 1440px; height: 1440px; max-width: none; display: block; } .page-watermark__p--right { top: 160px; right: -750px; } .page-watermark__p--left { top: 1680px; left: -677px; } a { color: var(--po-primary-darkest); } #usuario-minha-conta #menu a:hover, #usuario-minha-conta #menu a:focus { color: var(--po-primary); text-decoration: none; } #usuario-minha-conta #menu a.desabilitado:hover, #usuario-minha-conta #menu a.desabilitado:focus, #usuario-minha-conta #menu a.desabilitado:hover h4, #usuario-minha-conta #menu a.desabilitado:focus h4 { color: #bcbcbc; } .body-content { position: relative; z-index: 1; margin-top: 24px; padding-left: 15px; padding-right: 15px; min-height: 70dvh; } /* O backdrop do Bootstrap vai para o (z-index 1040). Com z-index: 1 acima, o modal dentro do RenderBody fica num stacking context abaixo do overlay — a tela fica cinza e o dropzone não recebe clique. */ body.modal-open .body-content { z-index: auto; } /* ========== PAGE HEADINGS (verde antigo → #5c6d00) ========== */ h3, .torneio h3 { color: var(--po-primary-darkest); } ul.etapas a:hover div.etapa .descricao .titulo { color: var(--po-primary-darkest); } /* ========== LEGACY ACCENTS (verde antigo → nova paleta) ========== */ .card-campeonato h2 { color: var(--po-primary-darkest); } .ponto-extra, .loading-text { color: var(--po-primary-darkest); } .badge-primary { background-color: var(--po-primary-dark); } .label-primary { background-color: var(--po-primary-darkest); } .label-primary[href]:hover, .label-primary[href]:focus { background-color: var(--po-primary-darkest); } .spinner { border-top-color: var(--po-primary-dark); } .spinner > div { background-color: var(--po-primary-dark); } .card-campeonato .modalidades a { color: var(--po-primary-darkest); } .card-campeonato .modalidades a:hover, .card-campeonato .btn-etapas span:hover, .card-campeonato .etapa-atual span { background-color: var(--po-primary-dark); border-color: var(--po-primary-dark); color: #fff; } .seletor-estado .estado.selecionado, .btn-estado .estado.selecionado { background-color: var(--po-primary-dark); } #proximos-torneios ul a:hover li.torneio .data { background-color: var(--po-primary-dark); } input.novo { background-color: var(--po-primary-dark) !important; } input[type="checkbox"]:checked:after { background-color: var(--po-primary); color: var(--po-primary-text); } .passaros-toggle input:checked + .passaros-toggle-slider { background-color: var(--po-primary); } .passaros-toggle-check { color: var(--po-primary-text); } .passaros-toggle input:focus-visible + .passaros-toggle-slider { outline-color: var(--po-primary-dark); } .title-filters div span.active, .filtro-btn.active { border-color: var(--po-primary-dark); background-color: var(--po-primary-dark); color: #fff; } .filter-modal-footer .apply-btn { background: var(--po-primary-dark); color: #fff; } #searchButtonMobile { border-color: var(--po-primary-dark); background-color: var(--po-primary-dark); } .card-ultimo-campeonato .topo { background-color: var(--po-primary-dark); } /* ========== NAVBAR ========== */ .navbar.navbar-fixed-top { background-color: var(--po-card); border-bottom: 1px solid var(--po-border-strong); box-shadow: none; padding: 0; min-height: var(--po-nav-height); } .navbar.navbar-fixed-top > .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: var(--po-nav-height); padding-top: 12px; padding-bottom: 12px; } .navbar .navbar-header { float: left; margin: 0; } .navbar-brand { margin: 0; padding: 0; height: auto; max-width: 200px; } .navbar-brand img { width: 100%; max-width: 200px; height: auto; display: block; } .navbar .navbar-toggle { margin: 12px 0 12px 12px; border: 1px solid var(--po-border-strong); border-radius: 10px; padding: 8px 10px; background: var(--po-card); } .navbar .navbar-toggle .icon-bar { border: 0; background-color: var(--po-text-h3); height: 2px; border-radius: 2px; } .navbar .navbar-collapse { float: none; border: 0; box-shadow: none; max-height: none; } @media (min-width: 1200px) { .navbar .navbar-toggle { display: none !important; } .navbar.navbar-fixed-top > .container { flex-direction: row; flex-wrap: nowrap; align-items: center; } .navbar .navbar-header { float: none; width: auto; flex-shrink: 0; } .navbar-brand, .navbar-brand img { width: 200px; max-width: 200px; flex-shrink: 0; } .navbar .navbar-collapse, .navbar .navbar-collapse.collapse { display: flex !important; align-items: center; justify-content: space-between; flex: 1; height: auto !important; margin-left: 24px; padding: 0; overflow: visible !important; border: 0; } .navbar .navbar-nav { float: none; display: flex; align-items: center; margin: 0; flex: 1; justify-content: center; } .navbar .navbar-nav.navbar-right { float: none; margin: 0; flex: 0 0 auto; justify-content: flex-end; gap: 10px; } .navbar-auth { display: flex; } .navbar-nav > li > a.dropdown-toggle, .navbar-auth > li > a.dropdown-toggle { display: inline-flex; align-items: center; gap: 8px; } .navbar-nav > li > a.dropdown-toggle .caret, .navbar-auth > li > a.dropdown-toggle .caret { margin-left: 0; } } @media (min-width: 992px) and (max-width: 1199px) { .navbar.navbar-fixed-top > .container, .container.body-content { width: 1170px; max-width: 100%; } } .navbar a:not(.btn-nav):not(.navbar-brand), .navbar-nav > li > a:not(.btn-nav) { color: var(--po-text-h3) !important; font-weight: 600; font-size: 16px; padding: 16px !important; border-radius: var(--po-radius-md); background: transparent !important; } .navbar-nav > li > a:not(.btn-nav):hover, .navbar-nav > li > a:not(.btn-nav):focus, .nav .open > a:not(.btn-nav), .nav .open > a:not(.btn-nav):hover, .nav .open > a:not(.btn-nav):focus { background-color: var(--po-card-muted) !important; color: var(--po-text-h2) !important; border-radius: var(--po-radius-md); } .navbar li { margin-right: 0; } .navbar li .dropdown-menu { background-color: var(--po-card); border: 1px solid var(--po-border); border-radius: var(--po-radius-sm); box-shadow: var(--po-shadow-card); padding: 8px; } .navbar li .dropdown-menu li a { color: var(--po-text-body) !important; border-bottom: 1px solid var(--po-border); border-radius: 8px; font-weight: 500; font-size: 14px; padding: 10px 12px !important; } .navbar .dropdown-menu li:last-of-type a { border-bottom: none; } .navbar .dropdown-menu a:hover { background-color: var(--po-card-muted) !important; color: var(--po-text-h2) !important; } .navbar .submenu, .navbar .submenu .submenu { background-color: transparent; margin-top: 0 !important; } .navbar-nav .dropdown-menu .submenu > li > a { padding-left: 24px !important; } .navbar-nav .dropdown-menu .submenu .submenu > li > a { padding-left: 36px !important; } .navbar-auth { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; } .navbar-auth > li { margin: 0; } .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--po-radius-md); box-sizing: border-box; font-family: var(--po-font); font-weight: 500; font-size: 14px; text-decoration: none !important; transition: background-color 0.15s ease, border-color 0.15s ease; white-space: nowrap; outline: none; box-shadow: none; } .btn-nav-outline { background: var(--po-card); border-color: var(--po-border-strong); color: var(--po-text-h3) !important; } .btn-nav-outline:hover, .btn-nav-outline:focus { background: #dadada !important; border-color: var(--po-border-strong) !important; color: var(--po-text-h2) !important; outline: none; box-shadow: none; } .btn-nav-primary { background: var(--po-primary); border-color: var(--po-primary); color: var(--po-primary-text) !important; padding-left: 20px; } .navbar-auth > li > a.btn-nav-outline { background: var(--po-card) !important; border-color: var(--po-border-strong) !important; padding: 12px 24px !important; } .navbar-auth > li > a.btn-nav-primary { background: var(--po-primary) !important; border-color: var(--po-primary) !important; color: var(--po-primary-text) !important; padding: 12px 24px 12px 20px !important; } .btn-nav-primary:hover, .btn-nav-primary:focus, .navbar-auth > li > a.btn-nav-primary:hover, .navbar-auth > li > a.btn-nav-primary:focus { background: var(--po-primary-hover) !important; border-color: var(--po-primary-hover) !important; color: var(--po-primary-text) !important; outline: none; box-shadow: none; } .navbar-auth > li > a.btn-nav-outline:hover, .navbar-auth > li > a.btn-nav-outline:focus { background: #dadada !important; border-color: var(--po-border-strong) !important; color: var(--po-text-h2) !important; outline: none; box-shadow: none; } .btn-nav-primary img, .btn-nav-primary .fa { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--po-primary-text); } .navbar-auth .dropdown > a.btn-nav { background: var(--po-card-muted); border: 1px solid var(--po-border); color: var(--po-text-h3) !important; } /* ========== PRIMARY / SUCCESS BUTTONS ========== */ .btn-primary, .btn-success { background-color: var(--po-primary); background-image: none; border-color: var(--po-primary); color: var(--po-primary-text); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-success:hover, .btn-success:focus, .btn-success.focus { background-color: var(--po-primary-hover); background-image: none; border-color: var(--po-primary-hover); color: var(--po-primary-text); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary, .btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success, .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus { background-color: var(--po-primary-dark); background-image: none; border-color: var(--po-primary-dark); color: var(--po-primary-text); } .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus { background-color: var(--po-primary); border-color: var(--po-primary); color: var(--po-primary-text); } .btn-success .badge { color: var(--po-primary); background-color: #fff; } table .acoes a.transferir, table .acoes a.aprovar-filiacao, table .acoes a[title*="Aprovar"], .aprovar-filiacao { color: var(--po-primary); } table .acoes a.transferir:hover, table .acoes a.aprovar-filiacao:hover, table .acoes a[title*="Aprovar"]:hover, .aprovar-filiacao:hover { color: var(--po-primary-hover); } /* ========== HOME HERO ========== */ .home-page { padding-bottom: 48px; } .home-hero { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; } .home-hero-banner { display: block; overflow: hidden; border-radius: var(--po-radius-lg); line-height: 0; } .home-hero-banner__img, .home-hero-banner img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: var(--po-radius-lg); } .home-ads.row { display: flex; gap: 16px; width: 100%; margin-left: 0; margin-right: 0; } .home-ads::before, .home-ads::after { display: none; content: none; } .home-ads > [class*='col-'] { padding-left: 0; padding-right: 0; float: none; width: auto; flex: 1 1 0; min-width: 0; } .home-ads #sdshow-1, .home-ads #sdshow-2 { width: 100%; border-radius: var(--po-radius-lg); box-shadow: none; overflow: hidden; } .home-ads .sld-1:not(.active), .home-ads .sld-2:not(.active) { display: none; } .home-ads .sld-1 img, .home-ads .sld-2 img, .home-ads .sld-1 picture, .home-ads .sld-2 picture { width: 100%; height: auto; display: block; border-radius: var(--po-radius-lg); } @media (max-width: 991px) { .home-ads.row { flex-direction: column; gap: 16px; } .home-ads > [class*='col-'] { flex: 0 0 auto; width: 100%; max-width: 100%; } .home-ads #sdshow-2 { margin-top: 0; } } /* ========== CAMPEONATO CARDS ========== */ .home-page .card-campeonato, .card-campeonato { background: #f9f9f9; border: 1px solid var(--po-border-strong); border-radius: 24px; padding: 16px; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.05); min-height: 0; height: 100%; text-align: left; display: flex; flex-direction: column; gap: 16px; margin-bottom: 0; grid-template-rows: none; } .card-campeonato:hover { cursor: default; } .card-campeonato-header { display: flex; gap: 16px; align-items: flex-start; width: 100%; } .card-campeonato-header .header-block { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .card-campeonato-header small, .card-campeonato > small { display: block; color: var(--po-text-muted); font-size: 12px; font-weight: 400; line-height: 1; margin: 0; } .home-page .card-campeonato h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--po-text-h2); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-campeonato .edicao-select { flex-shrink: 0; width: 72px; height: 33px; appearance: none; -webkit-appearance: none; background: var(--po-card) url('/images/redesign/icons/chevron-down.svg') no-repeat right 8px center; background-size: 14px; border: 1px solid var(--po-border); border-radius: 12px; padding: 8px 26px 8px 8px; font-family: var(--po-font); font-size: 14px; font-weight: 500; line-height: 1; color: var(--po-text-h2); cursor: pointer; box-shadow: none; } .card-campeonato .category-tabs { display: flex; align-items: flex-start; gap: 8px; padding: 4px; width: 100%; background: var(--po-card-muted); border-radius: 12px; } .card-campeonato .category-tabs.single, .card-campeonato .category-tabs:has(> .category-tab:only-child) { background: transparent; padding: 0 0 8px; border-bottom: 1px solid var(--po-border); border-radius: 0; gap: 0; align-items: stretch; } .card-campeonato .category-tab { flex: 1 1 0; min-width: 0; border: 0; background: transparent; border-radius: 8px; padding: 4px 8px; margin: 0; font-family: var(--po-font); font-size: 14px; font-weight: 500; line-height: 1; color: var(--po-text-muted); cursor: pointer; box-shadow: none; outline: none; height: auto; } .card-campeonato .category-tab.active { background: #fff; font-weight: 700; color: var(--po-text-h2); } .card-campeonato .category-tabs.single .category-tab, .card-campeonato .category-tabs.single .category-tab.active, .card-campeonato .category-tabs:has(> .category-tab:only-child) .category-tab, .card-campeonato .category-tabs:has(> .category-tab:only-child) .category-tab.active { flex: 1 1 100%; width: 100%; max-width: 100%; background: #fff; font-weight: 700; color: var(--po-text-h2); padding: 4px 8px; border-radius: 8px; box-shadow: none; cursor: default; } .card-campeonato .species-panels { width: 100%; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .card-campeonato .species-section, .card-campeonato .modalidade.species-section { display: none; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; border: 0; background: transparent; padding: 0; margin: 0; place-content: initial; } .card-campeonato .species-section.active { display: flex; flex: 1 1 auto; } .card-campeonato .species-hint { margin: 0; font-size: 11px; font-weight: 400; line-height: 1; color: var(--po-text-muted); width: 100%; } .card-campeonato .modalidades, .card-campeonato .species-chips, .card-campeonato .species-chips.modalidades { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; align-content: flex-start; width: 100%; grid-template-columns: none; } .card-campeonato .modalidades a, .card-campeonato .species-chips a { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--po-border); background: var(--po-card); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03); color: var(--po-text-h2); font-size: 14px; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; } .card-campeonato .modalidades a:hover, .card-campeonato .species-chips a:hover { background: var(--po-card-muted); color: var(--po-text-h2); text-decoration: none; } .card-campeonato .modalidade h3, .card-campeonato .etapas, .card-campeonato .btn-etapas { display: none; } .row.row-flex { display: flex; flex-wrap: wrap; align-items: stretch; margin-left: -8px; margin-right: -8px; } .row.row-flex::before, .row.row-flex::after { display: none; content: none; } .row.row-flex > [class*="col-"] { display: flex; flex-direction: column; padding-left: 8px; padding-right: 8px; margin-bottom: 16px; } /* ========== RESULTADOS ========== */ .home-results-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 48px 0 24px; } .home-results-header h3 { margin: 0; font-size: 26px; font-weight: 600; color: var(--po-text-h3); } .btn.btn-foreground-color, .btn-foreground-color { background-color: transparent; background-image: none; border: 1px solid var(--po-border-strong); border-radius: var(--po-radius-sm); min-height: 33px; height: auto; align-content: center; color: var(--po-text-h3); font-weight: 500; font-size: 14px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; box-shadow: none; } .btn.btn-foreground-color:hover, .btn.btn-foreground-color:focus, .btn-foreground-color:hover, .btn-foreground-color:focus { background-color: transparent; background-image: none; border-color: var(--po-border-strong); color: var(--po-text-h2); box-shadow: none; } .btn-foreground-color img { width: 16px; height: 16px; } .card-ultimo-campeonato { border: 1px solid var(--po-border-strong); background-color: var(--po-card); border-radius: var(--po-radius-lg); text-align: center; margin-bottom: 16px; display: flex; flex-direction: column; box-shadow: var(--po-shadow-card); cursor: pointer; overflow: hidden; height: auto; min-height: 238px; width: 100%; max-width: none; padding: 16px; gap: 16px; } .card-ultimo-campeonato .topo { display: none; } .card-ultimo-campeonato .info-campeonato { width: 100%; padding: 0; display: flex; justify-content: space-between; border-bottom: 0; } .card-ultimo-campeonato .info-campeonato span { margin: 0; border-radius: var(--po-radius-sm); padding: 6px 12px; border: 1px solid var(--po-border); color: var(--po-text-h2); height: auto; font-size: 14px; font-weight: 500; background: var(--po-card); } .card-ultimo-campeonato .resumo-campeonato { padding: 0; display: flex; flex-direction: column; gap: 16px; flex: 1; } .resumo-campeonato h2 { font-size: 16px; font-weight: 600; margin: 0; text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; height: auto; min-height: 38px; line-height: 1.2; color: var(--po-text-h2); } .card-ultimo-campeonato .etapa-campeonato { padding: 0; display: flex; gap: 12px; height: auto; color: var(--po-text-muted); font-size: 14px; align-items: stretch; } .etapa-campeonato .indicador { background-color: var(--po-primary); width: 4px; border-radius: 2px; flex-shrink: 0; } .card-ultimo-campeonato .modalidade-campeonato { padding-top: 0; border-top: 0; margin-top: auto; } .modalidade-campeonato .categoria { color: var(--po-text-muted); font-size: 12px; } .modalidade-campeonato .modalidade { color: var(--po-text-h2); font-size: 16px; font-weight: 600; } /* ========== FOOTER ========== */ .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--po-card); border: none; border-radius: var(--po-radius-lg); padding: 16px 24px; margin-top: 48px; margin-bottom: 0; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1; color: var(--po-text-disabled); text-align: left; } .site-footer p { margin: 0; } .site-footer-copy { flex-shrink: 0; white-space: nowrap; } .site-footer-credits { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; flex: 1; } .site-footer-credits a { color: var(--po-primary-dark); text-decoration: underline; text-underline-position: from-font; } .site-footer-credits a:hover { color: var(--po-primary-darkest); } .site-footer-legal { display: flex; align-items: center; gap: 16px; flex-shrink: 0; text-align: center; } .site-footer-legal a { color: var(--po-text-disabled); text-decoration: none; white-space: nowrap; } .site-footer-legal a:hover { color: var(--po-text-body); text-decoration: underline; } .site-footer-version { margin: 16px 0 0; font-size: 11px; color: var(--po-text-disabled); text-align: center; } hr.body-divider { display: none; } @media (max-width: 1199px) { :root { --po-nav-height: 72px; --po-gutter: 16px; } body { padding-top: calc(var(--po-nav-height) + 24px); } body:has(.ambiente) { padding-top: calc(var(--po-nav-height) + 48px); } body:has(.navbar-collapse.in) { overflow: hidden; } .body-content { margin-top: 16px; padding-left: var(--po-gutter); padding-right: var(--po-gutter); } .navbar.navbar-fixed-top > .container { min-height: var(--po-nav-height); flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding-left: var(--po-gutter); padding-right: var(--po-gutter); } .navbar.navbar-fixed-top > .container > .navbar-header, .navbar.navbar-fixed-top > .container > .navbar-collapse { margin-left: 0; margin-right: 0; } .navbar .navbar-header { display: flex; float: none; position: relative; width: 100%; align-items: center; justify-content: flex-start; } .navbar > .container .navbar-brand, .navbar-brand { float: none; margin: 0; padding: 0; height: auto; max-width: 180px; } .navbar-brand img { display: block; margin: 0; padding: 0; width: auto; max-width: 180px; } .navbar .navbar-toggle { display: block !important; position: absolute; right: 0; top: 50%; transform: translateY(-50%); margin: 0; float: none; z-index: 2; } .navbar .navbar-collapse { float: none; width: 100%; max-width: 100%; align-self: stretch; background: var(--po-card); overflow: hidden; } .navbar .navbar-collapse.collapse { display: none !important; height: 0 !important; margin: 0; padding: 0; border: 0; } .navbar .navbar-collapse.collapsing, .navbar .navbar-collapse.collapse.in { display: block !important; height: auto !important; max-height: calc(100dvh - var(--po-nav-height) - 24px); border-top: 1px solid var(--po-border); margin: 8px 0 0; padding: 8px 0 16px; overflow-y: auto !important; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } body:has(.ambiente) .navbar .navbar-collapse.collapsing, body:has(.ambiente) .navbar .navbar-collapse.collapse.in { max-height: calc(100dvh - var(--po-nav-height) - 72px); } .navbar .navbar-nav, .navbar .navbar-nav.navbar-right, .navbar-auth { display: block; float: none; width: 100%; max-width: 100%; margin: 0; } .navbar .navbar-nav > li, .navbar-auth > li { float: none; width: 100%; margin: 0; } .navbar-nav > li > a { display: block; width: 100%; text-align: left; padding: 14px 16px !important; } .navbar-nav .open .dropdown-menu, .navbar-auth .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: var(--po-card); border: 0; border-radius: 0; box-shadow: none; padding: 0 0 8px; } .navbar-nav .open .dropdown-menu > li > a, .navbar-auth .open .dropdown-menu > li > a { padding: 10px 16px 10px 32px !important; white-space: normal; } .navbar-auth { margin-top: 8px; padding: 0 16px; } .navbar-auth > li > a.btn-nav, .navbar-auth .btn-nav { width: 100%; max-width: 100%; margin-bottom: 8px; justify-content: center; box-sizing: border-box; } } @media (max-width: 767px) { body { padding-bottom: 32px; } .body-content { margin-top: 16px; } .home-hero { margin-bottom: 24px; gap: 12px; } .home-hero-banner, .home-hero-banner__img, .home-hero-banner img { width: 100%; max-width: 100%; } .row.row-flex { display: block; margin-left: 0; margin-right: 0; } .row.row-flex > [class*="col-"] { display: block; float: none; width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; margin-bottom: 16px; } .home-page .card-campeonato, .card-campeonato { height: auto; min-height: 0; width: 100%; } .home-page .card-campeonato h2 { white-space: normal; } .page-watermark__p { width: 800px; height: 800px; } .page-watermark__p--right { top: 80px; right: -420px; } .page-watermark__p--left { top: 900px; left: -420px; } .site-footer { flex-direction: column; align-items: center; padding: 16px 20px; text-align: center; } .site-footer-copy { white-space: normal; } .home-results-header { flex-direction: column; align-items: flex-start; } .home-results-header h3 { font-size: 20px; } .btn.btn-foreground-color, .btn-foreground-color { width: 100%; justify-content: center; } }