/* ForexRev — strona rankingu (forexrev-ranking.php). Układ zależy od szerokości samego rankingu (container queries): motyw ma stałe szerokości kontenera (940 / 440 / 300 px). Selektory zaczynają się od #fx-ranking, żeby ogólne style motywu (listy, nagłówki, przyciski) ich nie nadpisywały. */ #fx-ranking { --fx-tekst: #142033; --fx-tekst2: #3A4555; --fx-szary: #5B6676; --fx-linia: #E4E9F0; --fx-linia2: #EDF1F5; --fx-tlo: #F7F9FC; --fx-kafel: #F1F6FA; --fx-granat: #0F4C81; --fx-granat2: #0A3A63; --fx-morski: #0A7A94; --fx-morski2: #08667C; --fx-pasek: #00A3C4; --fx-b: #0F4C81; --fx-k: #1F78B4; --fx-o: #00A3C4; --fx-w: #8AD3E3; --fx-font: 'Open Sans', fxs-os, fxs-os-r, sans-serif; --fx-font2: Ubuntu, fxs-ub, 'Open Sans', sans-serif; container-type: inline-size; display: flex; flex-direction: column; gap: 22px; margin: 6px 0 40px; color: var(--fx-tekst); font: 400 15px/1.55 var(--fx-font); } #fx-ranking *, #fx-ranking *::before, #fx-ranking *::after { box-sizing: border-box; } #fx-ranking [hidden] { display: none !important; } #fx-ranking a { color: var(--fx-granat); } #fx-ranking a:hover { color: var(--fx-granat2); } #fx-ranking a:focus-visible, #fx-ranking button:focus-visible, #fx-ranking summary:focus-visible { outline: 2px solid var(--fx-granat); outline-offset: 2px; } #fx-ranking h1, #fx-ranking h2, #fx-ranking h3 { font-family: var(--fx-font2); font-weight: 700; color: var(--fx-tekst); letter-spacing: -.2px; margin: 0; padding: 0; border: 0; background: none; text-transform: none; } #fx-ranking p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } #fx-ranking dl, #fx-ranking dd { margin: 0; } #fx-ranking .fxrk-lista, #fx-ranking .fxrk-legenda, #fx-ranking .fxrk-ostrz ul, #fx-ranking .fxrk-okruszki ol { list-style: none; margin: 0; padding: 0; } #fx-ranking .fxrk-lista > li, #fx-ranking .fxrk-legenda li, #fx-ranking .fxrk-ostrz li, #fx-ranking .fxrk-okruszki li { margin: 0; padding: 0; background: none; list-style: none; } #fx-ranking .fxrk-lista > li::before, #fx-ranking .fxrk-legenda li::before, #fx-ranking .fxrk-ostrz li::before, #fx-ranking .fxrk-okruszki li::before { content: none; display: none; } /* okruszki, nagłówek */ #fx-ranking .fxrk-okruszki ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; color: var(--fx-szary); } #fx-ranking .fxrk-okruszki li + li::before { content: "›"; display: inline; margin-right: 8px; color: var(--fx-szary); } #fx-ranking .fxrk-okruszki a { text-decoration: none; } #fx-ranking .fxrk-naglowek { display: flex; flex-direction: column; gap: 10px; } #fx-ranking .fxrk-naglowek h1 { font-size: 28px; line-height: 1.15; } #fx-ranking .fxrk-wstep { max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--fx-tekst2); } #fx-ranking .fxrk-wstep p + p { margin-top: 8px; } #fx-ranking .fxrk-wstep.fxrk-wstep-zwiniety { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } #fx-ranking .fxrk-wstep-przycisk { align-self: flex-start; margin: -6px 0 0; padding: 4px 0; border: 0; background: none; color: var(--fx-granat); font: 700 14px/1.3 var(--fx-font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #fx-ranking .fxrk-meta { font-size: 13px; color: var(--fx-szary); } #fx-ranking .fxrk-meta a { font-weight: 700; text-decoration: none; } #fx-ranking .fxrk-ryzyko { font-size: 12.5px; line-height: 1.5; color: var(--fx-tekst2); background: var(--fx-tlo); border-left: 3px solid var(--fx-pasek); border-radius: 0 8px 8px 0; padding: 9px 12px; } /* elementy wspólne */ #fx-ranking .fxrk-etykieta { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: var(--fx-tekst2); } #fx-ranking .fxrk-chip { display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1; color: var(--fx-granat); background: #EDF4FA; border-radius: 6px; padding: 5px 7px; } #fx-ranking .fxrk-chip-uwaga { color: #8A4300; background: #FFF1E0; } #fx-ranking .fxrk-link { font-size: 14px; font-weight: 700; text-decoration: none; } #fx-ranking .fxrk-pasek { display: block; height: 6px; border-radius: 3px; background: var(--fx-linia); overflow: hidden; } #fx-ranking .fxrk-pasek > span { display: block; height: 100%; border-radius: 3px; background: var(--fx-pasek); } #fx-ranking .fxrk-paski { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; } #fx-ranking .fxrk-paski > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 8px; } #fx-ranking .fxrk-paski dt { color: var(--fx-tekst2); font-weight: 400; font-size: 12px; } #fx-ranking .fxrk-paski dd { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; } #fx-ranking .fxrk-paski b { text-align: right; font-variant-numeric: tabular-nums; } #fx-ranking .fxrk-akcje { display: flex; flex-direction: column; gap: 6px; } #fx-ranking .fxrk-cta { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 16px; border-radius: 10px; background: var(--fx-morski); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; } #fx-ranking .fxrk-cta:hover { background: var(--fx-morski2); color: #fff; } #fx-ranking .fxrk-rec { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; } #fx-ranking .fxrk-rec-glowny { min-height: 46px; border: 1px solid #C9D3DF; background: #fff; } #fx-ranking .fxrk-ryz { display: block; font-size: 11.5px; line-height: 1.45; color: var(--fx-szary); text-align: center; } #fx-ranking .fxrk-btn2 { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--fx-morski); color: var(--fx-morski); font-size: 14px; font-weight: 700; text-decoration: none; background: #fff; } #fx-ranking .fxrk-btn2:hover { background: var(--fx-morski); color: #fff; } /* kafle liderów */ #fx-ranking .fxrk-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #fx-ranking .fxrk-lider { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; background: var(--fx-granat); color: #fff; border-radius: 18px; padding: 20px; } #fx-ranking .fxrk-lider .fxrk-etykieta { color: #BFE3F0; } #fx-ranking .fxrk-lider-gora { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } #fx-ranking .fxrk-lider-nazwa { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #fx-ranking .fxrk-lider h2 { font-size: 24px; line-height: 1.15; color: #fff; } #fx-ranking .fxrk-lider h2 a { color: #fff; text-decoration: none; } #fx-ranking .fxrk-lider:hover h2 a { text-decoration: underline; } /* kafle klikalne w całości: link marki (albo „Jak oceniamy”) rozciągnięty na kafel; przyciski w kaflu lidera leżą nad nim */ #fx-ranking .fxrk-lider, #fx-ranking .fxrk-kafel { position: relative; transition: background-color .15s, border-color .15s, box-shadow .15s; } #fx-ranking .fxrk-cala::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } #fx-ranking .fxrk-cala:focus-visible { outline: none; } #fx-ranking .fxrk-lider:has(.fxrk-cala:focus-visible), #fx-ranking .fxrk-kafel:has(.fxrk-cala:focus-visible) { outline: 2px solid var(--fx-granat); outline-offset: 3px; } #fx-ranking .fxrk-akcje-lider a { position: relative; z-index: 1; } #fx-ranking .fxrk-lider:hover { box-shadow: 0 8px 22px rgba(15, 76, 129, .25); } #fx-ranking .fxrk-kafel:hover { background: #E3EEF8; box-shadow: 0 6px 16px rgba(15, 76, 129, .10); } #fx-ranking .fxrk-lider-fakty { font-size: 13px; line-height: 1.45; color: #D5E6F3; } #fx-ranking .fxrk-lider-wynik { display: flex; align-items: baseline; gap: 3px; flex: none; font-family: var(--fx-font2); color: #BFE3F0; font-size: 14px; font-weight: 700; } #fx-ranking .fxrk-lider-liczba { font-size: 52px; line-height: .9; color: #fff; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; } #fx-ranking .fxrk-paski-lider { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; font-size: 12.5px; } #fx-ranking .fxrk-paski-lider > div { display: flex; flex-direction: column; align-items: stretch; gap: 6px; } #fx-ranking .fxrk-paski-lider dt { color: #D5E6F3; } #fx-ranking .fxrk-paski-lider dd { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 6px; } #fx-ranking .fxrk-paski-lider b { text-align: left; font: 700 20px/1 var(--fx-font2); color: #fff; } #fx-ranking .fxrk-paski-lider .fxrk-pasek { height: 5px; background: rgba(255, 255, 255, .2); } #fx-ranking .fxrk-paski-lider .fxrk-pasek > span { background: #7FD6EA; } #fx-ranking .fxrk-akcje-lider .fxrk-cta { background: #fff; color: var(--fx-granat); } #fx-ranking .fxrk-akcje-lider .fxrk-cta:hover { background: #E3F4F8; color: var(--fx-granat2); } #fx-ranking .fxrk-akcje-lider .fxrk-rec { color: #fff; } #fx-ranking .fxrk-akcje-lider .fxrk-rec-glowny { background: #fff; color: var(--fx-granat); border: 0; } #fx-ranking .fxrk-akcje-lider .fxrk-ryz { color: #C6DAEA; text-align: left; } #fx-ranking .fxrk-kafel { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; background: var(--fx-kafel); border-radius: 18px; padding: 16px; min-width: 0; } #fx-ranking .fxrk-kafel-wartosc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; color: var(--fx-szary); font-size: 12.5px; } #fx-ranking .fxrk-kafel-wartosc b { font: 700 32px/1 var(--fx-font2); color: var(--fx-granat); font-variant-numeric: tabular-nums; } #fx-ranking .fxrk-kafel-marka { display: flex; flex-direction: column; gap: 2px; } #fx-ranking .fxrk-kafel-marka a { font: 700 16px/1.25 var(--fx-font2); color: var(--fx-tekst); text-decoration: none; } #fx-ranking .fxrk-kafel:hover .fxrk-kafel-marka a { color: var(--fx-granat); text-decoration: underline; } #fx-ranking .fxrk-kafel-marka span { font-size: 12.5px; color: var(--fx-szary); } #fx-ranking .fxrk-kafel-wagi { grid-column: 1 / -1; background: #fff; border: 1px solid var(--fx-linia); } #fx-ranking .fxrk-kafel-wagi:hover { background: #fff; border-color: #A3C2E0; } /* nieparzysta liczba kafli: ostatni przed kaflem wag zajmuje cały wiersz (w dwóch kolumnach na telefonie) */ #fx-ranking .fxrk-bento > .fxrk-kafel:not(.fxrk-kafel-wagi):nth-last-child(2):nth-child(even) { grid-column: 1 / -1; } #fx-ranking .fxrk-sklad { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; } #fx-ranking .fxrk-sklad-b { background: var(--fx-b); } #fx-ranking .fxrk-sklad-k { background: var(--fx-k); } #fx-ranking .fxrk-sklad-o { background: var(--fx-o); } #fx-ranking .fxrk-sklad-w { background: var(--fx-w); } #fx-ranking .fxrk-legenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 14px; font-size: 12.5px; color: var(--fx-tekst2); } #fx-ranking .fxrk-legenda li { display: flex; align-items: center; gap: 7px; } #fx-ranking .fxrk-legenda b { margin-left: auto; } #fx-ranking .fxrk-kropka { flex: none; width: 9px; height: 9px; border-radius: 2px; } /* boks sponsora */ #fx-ranking .fxrk-reklama { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border: 2px solid transparent; border-radius: 16px; padding: 16px 20px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--fx-granat), var(--fx-pasek)) border-box; box-shadow: 0 4px 16px rgba(15, 76, 129, .10); } #fx-ranking .fxrk-rek-etykieta { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .6px; text-transform: uppercase; color: var(--fx-szary); background: #fff; border: 1px solid #C3CCD8; border-radius: 4px; padding: 4px 6px; } #fx-ranking .fxrk-reklama img { width: 104px; height: 56px; object-fit: contain; border-radius: 6px; background: #fff; } #fx-ranking .fxrk-rek-tekst { flex: 1 1 220px; min-width: 0; font-size: 13px; color: var(--fx-szary); } #fx-ranking .fxrk-rek-tekst b { font: 700 17px/1.3 var(--fx-font2); color: var(--fx-tekst); } #fx-ranking .fxrk-rek-tekst small { display: block; margin-top: 3px; font-size: 11.5px; } #fx-ranking .fxrk-rek-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 10px; border: 1px solid var(--fx-granat); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--fx-granat); } #fx-ranking .fxrk-rek-cta:hover { background: var(--fx-granat2); border-color: var(--fx-granat2); color: #fff; } /* sortowanie i lista */ #fx-ranking .fxrk-ranking { display: flex; flex-direction: column; gap: 14px; } #fx-ranking .fxrk-ranking-gora { display: flex; flex-direction: column; gap: 10px; } #fx-ranking .fxrk-ranking-gora h2 { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1.2; } #fx-ranking .fxrk-ranking-gora h2::before { content: ""; flex: none; width: 5px; height: 24px; border-radius: 3px; background: var(--fx-granat); } #fx-ranking .fxrk-sort { display: flex; gap: 4px; background: #EAF1F8; border-radius: 12px; padding: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #fx-ranking .fxrk-sort::-webkit-scrollbar { display: none; } #fx-ranking .fxrk-sort button { flex: none; min-height: 38px; margin: 0; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--fx-tekst2); font: 700 13px/1 var(--fx-font); white-space: nowrap; cursor: pointer; box-shadow: none; text-transform: none; } #fx-ranking .fxrk-sort button:hover { color: var(--fx-tekst); background: rgba(255, 255, 255, .55); } #fx-ranking .fxrk-sort button[aria-pressed="true"] { background: var(--fx-granat); color: #fff; box-shadow: none; } #fx-ranking .fxrk-lista { display: flex; flex-direction: column; gap: 12px; } #fx-ranking .fxrk-wiecej { align-self: center; min-height: 46px; margin: 0; padding: 0 24px; border-radius: 23px; border: 1px solid #C9D3DF; background: #fff; color: var(--fx-tekst); font: 700 14px/1 var(--fx-font); cursor: pointer; } #fx-ranking .fxrk-wiecej:hover { border-color: var(--fx-granat); color: var(--fx-granat); } #fx-ranking .fxrk-nota { font-size: 12.5px; line-height: 1.6; color: var(--fx-szary); } #fx-ranking .fxrk-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* karta brokera */ /* karta: niebieska ramka z grubszą lewą krawędzią (pierwsze trzy w bieżącej kolejności — granatowa), nr 1 rankingu redakcji w granatowej ramce z plakietką */ #fx-ranking .fxrk-lista > .fxrk-karta { position: relative; background: #fff; border: 1px solid #A3C2E0; border-left: 4px solid #7FA6CF; border-radius: 16px; box-shadow: 0 1px 3px rgba(15, 76, 129, .08); } #fx-ranking .fxrk-lista > .fxrk-karta:nth-child(-n+3) { border-left-color: var(--fx-granat); } #fx-ranking .fxrk-lista > .fxrk-karta.fxrk-nr1 { margin-top: 10px; border: 2px solid var(--fx-granat); border-left-width: 4px; box-shadow: 0 8px 22px rgba(15, 76, 129, .16); } #fx-ranking .fxrk-k-wyroznienie { position: absolute; top: -13px; left: 18px; padding: 6px 12px; border-radius: 999px; background: var(--fx-granat); color: #fff; font: 700 12px/1 var(--fx-font); white-space: nowrap; } #fx-ranking .fxrk-k-gora { display: flex; flex-direction: column; gap: 14px; padding: 16px; } #fx-ranking .fxrk-k-marka { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; } #fx-ranking .fxrk-k-poz { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #E6F0F8; color: var(--fx-granat); font: 700 16px/1 var(--fx-font2); font-variant-numeric: tabular-nums; } #fx-ranking .fxrk-lista > .fxrk-karta:nth-child(-n+3) .fxrk-k-poz { background: var(--fx-granat); color: #fff; } #fx-ranking .fxrk-k-logo { grid-column: 2; width: 112px; height: 64px; padding: 0; object-fit: contain; border: 1px solid var(--fx-linia2); border-radius: 8px; background: #fff; } #fx-ranking .fxrk-k-nazwa { grid-column: 2; display: flex; flex-direction: column; gap: 6px; min-width: 0; } #fx-ranking .fxrk-k-nazwa h3 { font-size: 19px; line-height: 1.2; } #fx-ranking .fxrk-k-nazwa h3 a { color: var(--fx-tekst); text-decoration: none; } #fx-ranking .fxrk-k-nazwa h3 a:hover { color: var(--fx-granat); text-decoration: underline; } #fx-ranking .fxrk-chipy { display: flex; flex-wrap: wrap; gap: 6px; } #fx-ranking .fxrk-k-uz { font-size: 12.5px; color: var(--fx-szary); } #fx-ranking .fxrk-k-uz b { color: var(--fx-tekst); } #fx-ranking .fxrk-k-ocena { display: flex; align-items: center; gap: 12px; } #fx-ranking .fxrk-pierscien { position: relative; flex: none; width: 68px; height: 68px; color: var(--fx-granat); } #fx-ranking .fxrk-p-svg { display: block; width: 100%; height: 100%; } #fx-ranking .fxrk-p-tekst { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } #fx-ranking .fxrk-p-tekst b { font: 700 19px/1 var(--fx-font2); color: var(--fx-granat); font-variant-numeric: tabular-nums; } #fx-ranking .fxrk-p-tekst small { font-size: 10.5px; font-weight: 700; color: var(--fx-szary); } #fx-ranking .fxrk-k-ocena .fxrk-paski { flex: 1; min-width: 0; } #fx-ranking .fxrk-fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0 16px; padding: 12px 14px; background: #F0F6FB; border-radius: 12px; } #fx-ranking .fxrk-fakty > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; border-radius: 8px; } #fx-ranking .fxrk-fakty dt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 400; color: var(--fx-szary); } #fx-ranking .fxrk-fakty dt::before { content: ""; flex: none; width: 15px; height: 15px; background: var(--fx-morski); -webkit-mask: var(--fx-ikona) no-repeat center / contain; mask: var(--fx-ikona) no-repeat center / contain; } #fx-ranking .fxrk-f-koszt { --fx-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M7 7l-4 5 4 5M17 7l4 5-4 5'/%3E%3C/svg%3E"); } #fx-ranking .fxrk-f-wplata { --fx-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 7l3-3h11v3M16 13.5h2'/%3E%3C/svg%3E"); } #fx-ranking .fxrk-f-instr { --fx-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M11 20V4M17 20v-7M3 20h18'/%3E%3C/svg%3E"); } #fx-ranking .fxrk-f-platformy { --fx-ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h18v12H3zM8 20h8M12 16v4'/%3E%3C/svg%3E"); } #fx-ranking .fxrk-fakty dd { font-size: 14.5px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: break-word; } #fx-ranking .fxrk-szcz { margin-top: 12px; border-top: 1px solid var(--fx-linia2); } #fx-ranking .fxrk-szcz summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; color: var(--fx-granat); font-size: 13.5px; font-weight: 700; cursor: pointer; list-style: none; } #fx-ranking .fxrk-szcz summary::-webkit-details-marker { display: none; } #fx-ranking .fxrk-szcz summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s; } #fx-ranking .fxrk-szcz[open] summary::after { transform: translateY(2px) rotate(-135deg); } #fx-ranking .fxrk-szcz > dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; padding: 2px 16px 18px; font-size: 13px; } #fx-ranking .fxrk-szcz > dl > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; } #fx-ranking .fxrk-szcz dt { color: var(--fx-szary); font-weight: 400; } #fx-ranking .fxrk-szcz dd { font-weight: 700; line-height: 1.45; overflow-wrap: break-word; } /* karta na wąskim ekranie (telefon): zwarta — pierścień oceny obok nazwy, części oceny 2×2, przyciski obok siebie (ok. 2 karty na ekran zamiast jednej) */ @container (max-width: 719.98px) { #fx-ranking .fxrk-k-gora { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "poz logo pierscien" "poz nazwa pierscien" "chipy chipy chipy" "uz uz uz" "paski paski paski" "akcje akcje akcje"; gap: 8px 10px; padding: 14px 14px 12px; } #fx-ranking .fxrk-k-marka, #fx-ranking .fxrk-k-nazwa, #fx-ranking .fxrk-k-ocena { display: contents; } #fx-ranking .fxrk-k-poz { grid-area: poz; width: 32px; height: 32px; font-size: 15px; } #fx-ranking .fxrk-k-logo { grid-area: logo; width: 96px; height: 54px; } #fx-ranking .fxrk-k-nazwa h3 { grid-area: nazwa; font-size: 17px; } #fx-ranking .fxrk-k-gora .fxrk-chipy { grid-area: chipy; } #fx-ranking .fxrk-k-gora .fxrk-chip { font-size: 11px; padding: 4px 6px; } #fx-ranking .fxrk-k-uz { grid-area: uz; } #fx-ranking .fxrk-pierscien { grid-area: pierscien; align-self: center; width: 60px; height: 60px; } #fx-ranking .fxrk-p-tekst b { font-size: 17px; } #fx-ranking .fxrk-p-tekst small { font-size: 9.5px; } #fx-ranking .fxrk-k-ocena .fxrk-paski { grid-area: paski; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 4px; } #fx-ranking .fxrk-k-ocena .fxrk-paski > div { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "p p"; gap: 3px 6px; } #fx-ranking .fxrk-k-ocena .fxrk-paski dt { grid-area: n; font-size: 11.5px; } #fx-ranking .fxrk-k-ocena .fxrk-paski dd { display: contents; } #fx-ranking .fxrk-k-ocena .fxrk-pasek { grid-area: p; height: 5px; } #fx-ranking .fxrk-k-ocena .fxrk-paski b { grid-area: v; font-size: 12.5px; } #fx-ranking .fxrk-k-gora > .fxrk-akcje { grid-area: akcje; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #fx-ranking .fxrk-k-gora > .fxrk-akcje { margin-top: 4px; } #fx-ranking .fxrk-k-gora > .fxrk-akcje .fxrk-cta { padding: 0 8px; font-size: 14px; } #fx-ranking .fxrk-k-gora > .fxrk-akcje .fxrk-rec { min-height: 46px; padding: 0 8px; border: 1px solid #C9D3DF; background: #fff; } #fx-ranking .fxrk-k-gora > .fxrk-akcje .fxrk-rec-glowny, #fx-ranking .fxrk-k-gora > .fxrk-akcje .fxrk-ryz { grid-column: 1 / -1; } #fx-ranking .fxrk-k-gora > .fxrk-akcje .fxrk-ryz { font-size: 11px; text-align: left; } #fx-ranking .fxrk-fakty { margin: 0 14px; padding: 10px 12px; gap: 8px 12px; } #fx-ranking .fxrk-fakty dd { font-size: 13.5px; } #fx-ranking .fxrk-szcz { margin-top: 8px; } #fx-ranking .fxrk-szcz summary { min-height: 42px; padding: 0 14px; } } /* wyróżnienie wartości, po której posortowano */ #fx-ranking .fxrk-lista[data-sort="b"] [data-m="b"] dt, #fx-ranking .fxrk-lista[data-sort="k"] [data-m="k"] dt, #fx-ranking .fxrk-lista[data-sort="o"] [data-m="o"] dt, #fx-ranking .fxrk-lista[data-sort="w"] [data-m="w"] dt { color: var(--fx-morski); font-weight: 700; } #fx-ranking .fxrk-lista[data-sort="b"] [data-m="b"] .fxrk-pasek > span, #fx-ranking .fxrk-lista[data-sort="k"] [data-m="k"] .fxrk-pasek > span, #fx-ranking .fxrk-lista[data-sort="o"] [data-m="o"] .fxrk-pasek > span, #fx-ranking .fxrk-lista[data-sort="w"] [data-m="w"] .fxrk-pasek > span { background: var(--fx-granat); } #fx-ranking .fxrk-lista[data-sort="koszt"] [data-m="koszt"], #fx-ranking .fxrk-lista[data-sort="wplata"] [data-m="wplata"] { margin: -5px -7px; padding: 5px 7px; background: #DDF1F6; } #fx-ranking .fxrk-lista[data-sort="opinie"] [data-m="opinie"] { color: var(--fx-morski); font-weight: 700; } /* marki bez oceny, ostrzeżenia, eBook */ #fx-ranking .fxrk-bez { display: flex; flex-direction: column; gap: 10px; background: var(--fx-tlo); border-radius: 16px; padding: 18px; } #fx-ranking .fxrk-bez h2 { font-size: 19px; } #fx-ranking .fxrk-bez > p { font-size: 13.5px; color: var(--fx-tekst2); } #fx-ranking .fxrk-bez dl { display: flex; flex-direction: column; gap: 10px; } #fx-ranking .fxrk-bez dl > div { display: flex; flex-direction: column; gap: 5px; } #fx-ranking .fxrk-bez dt { display: flex; align-items: center; gap: 8px; font-size: 13px; } #fx-ranking .fxrk-bez dd { font-size: 13.5px; line-height: 1.6; color: var(--fx-tekst2); } #fx-ranking .fxrk-dalej { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } #fx-ranking .fxrk-ostrz, #fx-ranking .fxrk-ebook { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--fx-linia); border-radius: 16px; padding: 18px; background: #fff; } #fx-ranking .fxrk-dalej h2 { font-size: 18px; line-height: 1.25; } #fx-ranking .fxrk-ostrz li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--fx-linia2); font-size: 14px; line-height: 1.4; } #fx-ranking .fxrk-ostrz time { font-size: 12px; color: var(--fx-szary); } #fx-ranking .fxrk-ostrz li a { color: var(--fx-tekst); text-decoration: none; font-weight: 700; } #fx-ranking .fxrk-ostrz li a:hover { color: var(--fx-granat); text-decoration: underline; } #fx-ranking .fxrk-ebook { background: var(--fx-kafel); border-color: var(--fx-kafel); color: var(--fx-granat); align-items: flex-start; } #fx-ranking .fxrk-ebook p { font-size: 14px; color: var(--fx-tekst2); } /* artykuł pod rankingiem (treść strony) */ #fx-ranking .fxrk-artykul { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--fx-tekst2); border-top: 1px solid var(--fx-linia); padding-top: 28px; } #fx-ranking .fxrk-artykul h2 { font-size: 22px; line-height: 1.25; margin: 30px 0 10px; } #fx-ranking .fxrk-artykul h2:first-child { margin-top: 0; } #fx-ranking .fxrk-artykul h3 { font-size: 17px; line-height: 1.35; margin: 20px 0 6px; } #fx-ranking .fxrk-artykul p { margin: 0 0 12px; } #fx-ranking .fxrk-artykul ul { margin: 0 0 14px; padding-left: 1.3em; list-style: disc; } #fx-ranking .fxrk-artykul li { margin: 0 0 6px; padding: 0; background: none; list-style: disc; } #fx-ranking .fxrk-artykul li::before { content: none; } #fx-ranking .fxrk-artykul strong { color: var(--fx-tekst); } /* szerszy ranking: komputer (kontener motywu 940 px) */ @container (min-width: 720px) { #fx-ranking { gap: 26px; } #fx-ranking .fxrk-naglowek h1 { font-size: 36px; } #fx-ranking .fxrk-wstep, #fx-ranking .fxrk-wstep.fxrk-wstep-zwiniety { display: block; font-size: 16px; line-height: 1.6; -webkit-line-clamp: none; line-clamp: none; overflow: visible; } #fx-ranking .fxrk-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 12px; } #fx-ranking .fxrk-lider { grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: 24px; } #fx-ranking .fxrk-lider h2 { font-size: 28px; } #fx-ranking .fxrk-lider-liczba { font-size: 68px; } #fx-ranking .fxrk-paski-lider { grid-template-columns: repeat(4, minmax(0, 1fr)); } #fx-ranking .fxrk-akcje-lider { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; } #fx-ranking .fxrk-akcje-lider .fxrk-cta, #fx-ranking .fxrk-akcje-lider .fxrk-rec-glowny { padding: 0 22px; } #fx-ranking .fxrk-akcje-lider .fxrk-ryz { flex-basis: 100%; } #fx-ranking .fxrk-kafel-wagi, #fx-ranking .fxrk-bento > .fxrk-kafel:not(.fxrk-kafel-wagi):nth-last-child(2):nth-child(even) { grid-column: auto; } #fx-ranking .fxrk-ranking-gora h2 { font-size: 24px; } #fx-ranking .fxrk-pierscien { width: 88px; height: 88px; } #fx-ranking .fxrk-p-tekst b { font-size: 24px; } #fx-ranking .fxrk-k-ocena { gap: 16px; } #fx-ranking .fxrk-paski > div { grid-template-columns: 104px minmax(0, 1fr); } #fx-ranking .fxrk-k-gora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 180px; align-items: center; gap: 22px; padding: 20px 22px; } #fx-ranking .fxrk-fakty { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 22px; } #fx-ranking .fxrk-szcz summary { padding: 0 22px; } #fx-ranking .fxrk-szcz > dl { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 2px 22px 20px; } #fx-ranking .fxrk-bez dl > div { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: baseline; } #fx-ranking .fxrk-dalej { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }