body.fr-home-active {
overflow-x: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.fr-home-active .site-content {
display: block !important;
width: 100% !important;
max-width: none !important;
}
body.fr-home-active #right-sidebar,
body.fr-home-active #left-sidebar,
body.fr-home-active .widget-area {
display: none !important;
}
body.fr-home-active #primary,
body.fr-home-active .content-area,
body.fr-home-active .site-main,
body.fr-home-active .inside-article,
body.fr-home-active .container,
body.fr-home-active .grid-container,
body.fr-home-active .site.grid-container {
width: 100% !important;
max-width: none !important;
float: none !important;
}
body.fr-home-active .inside-article {
padding: 0 !important;
}
body.fr-home-active .entry-content {
margin-top: 0 !important;
width: 100% !important;
max-width: none !important;
}
body.fr-home-active .entry-content > .fr-homepage {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* Resetowanie domyślnych kontenerów GeneratePress na full-width dla Homepage */
body.fr-home-active #page, body.fr-home-active .site, body.fr-home-active .site-content, body.fr-home-active .content-area, body.fr-home-active .site-main, body.fr-home-active .inside-article, body.fr-home-active .entry-content {
max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
}
/* =========================================================
4RINGS — ACCESSIBILITY HELPERS
========================================================= */
.fr-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.fr-homepage {
--fr-text: #101010;
--fr-muted: #666;
--fr-border: #e4e4e4;
width: 100%;
max-width: none;
color: var(--fr-text);
background: #fff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
overflow-x: hidden;
}
.fr-homepage .fr-wrap {
width: calc(100% - 48px);
max-width: 1080px;
margin: 0 auto;
}
.fr-homepage a {
color: inherit;
text-decoration: none;
}
.fr-homepage,
.fr-homepage h1,
.fr-homepage h2,
.fr-homepage h3,
.fr-homepage p,
.fr-homepage span,
.fr-homepage a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
letter-spacing: 0;
}
.fr-img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center center;
background: #eee;
}
.fr-img-empty {
background: #eee;
}
.fr-meta {
color: var(--fr-muted);
font-size: 13px;
font-weight: 650;
line-height: 1.3;
}
.fr-meta-light {
color: rgba(255, 255, 255, .86);
}
.fr-badge {
display: inline-flex;
width: fit-content;
padding: 5px 8px;
background: var(--badge-bg);
color: var(--badge-fg);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.020em;
line-height: 1;
}
.fr-ad {
width: 100%;
margin: 24px 0 28px;
padding: 0;
}
.fr-ad-box {
width: 100%;
max-width: 970px;
height: 300px;
min-height: 300px;
max-height: 300px;
margin: 0 auto;
padding: 0;
overflow: hidden;
border: 1px solid #e1e1e1;
background: #f7f7f7;
box-sizing: border-box;
}
.fr-today-bar {
width: min(1220px, calc(100% - 32px));
margin: 10px auto 18px;
padding: 10px 12px;
display: flex;
align-items: center;
gap: 14px;
border: 1px solid #eeeeee;
background: #fafafa;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.fr-today-bar::-webkit-scrollbar {
display: none;
}
.fr-today-label {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
padding-left: 9px;
border-left: 3px solid #E12626;
color: #111;
font-size: 13px;
line-height: 1;
font-weight: 760;
text-transform: uppercase;
letter-spacing: 0.020em;
}
.fr-today-bar a {
flex: 0 0 auto;
color: #222;
font-size: 13px;
line-height: 1;
font-weight: 650;
text-decoration: none;
}
.fr-today-bar a:hover {
color: #E12626;
text-decoration: underline;
text-underline-offset: 3px;
}
.fr-hero-block,
.fr-section {
margin: 48px 0;
}
.fr-day-section {
margin: 24px 0 28px;
}
.fr-day-card {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
gap: 20px;
align-items: center;
margin-bottom: 18px;
padding: 20px;
border: 1px solid var(--fr-border);
border-left: 5px solid #E12626;
background: #fafafa;
}
.fr-day-copy {
min-width: 0;
}
.fr-day-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px 12px;
background: #111;
color: #fff;
font-size: 13px;
font-weight: 650;
line-height: 1.05;
letter-spacing: .055em;
border-left: 5px solid #E12626;
box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
}
.fr-day-label::before {
content: "";
width: 7px;
height: 7px;
background: #E12626;
}
.fr-day-card h1 {
margin: 9px 0 8px;
font-size: clamp(25px, 3vw, 38px);
line-height: 1.04;
font-weight: 800;
}
.fr-day-card p {
display: -webkit-box;
margin: 0 0 10px;
color: #333;
font-size: 15px;
line-height: 1.42;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fr-day-link {
display: inline-flex;
margin-top: 12px;
padding: 9px 0 2px;
border-bottom: 2px solid #E12626;
background: transparent;
color: #111;
font-size: 13px;
font-weight: 700;
}
.fr-day-image,
.fr-news-image,
.fr-card-image {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #eee;
}
.fr-hero {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
gap: 20px;
width: 100%;
}
.fr-hero-side,
.fr-side-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.fr-hero-side .fr-hero-card,
.fr-hero-side .fr-hero-small {
grid-column: auto !important;
}
.fr-hero-card {
min-width: 0;
overflow: hidden;
background: #111;
}
.fr-hero-card .fr-img,
.fr-day-image .fr-img,
.fr-card-image .fr-img {
transform: translateZ(0);
image-rendering: auto;
}
.fr-hero-card .fr-img {
object-position: center 48%;
}
.fr-hero-link {
position: relative;
display: block;
height: 100%;
min-height: 220px;
}
.fr-hero-main .fr-hero-link {
min-height: 512px;
}
.fr-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.38) 45%, rgba(0,0,0,.9));
}
.fr-hero-copy {
position: absolute;
right: 16px;
bottom: 16px;
left: 16px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
}
.fr-hero-copy .fr-badge {
margin: 0 0 2px;
}
.fr-hero-copy strong {
display: -webkit-box;
color: #fff;
font-size: 20px;
line-height: 1.12;
font-weight: 800;
text-shadow: 0 1px 2px rgba(0,0,0,.38);
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fr-hero-main .fr-hero-copy strong {
font-size: clamp(34px, 4vw, 52px);
line-height: 1.02;
}
.fr-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 22px;
}
.fr-section-head h2 {
position: relative;
margin: 0;
padding-left: 14px;
font-size: clamp(28px, 4vw, 36px);
line-height: 1.05;
font-weight: 800;
}
.fr-section-head h2::before {
content: "";
position: absolute;
top: .08em;
bottom: .08em;
left: 0;
width: 5px;
background: var(--fr-color);
}
.fr-section-head a {
color: var(--fr-color, #E12626);
font-size: 13.5px;
font-weight: 800;
text-align: right;
display: inline-flex;
align-items: center;
transition: all .16s ease;
}
.fr-latest-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.fr-brief-section {
padding: 22px;
border: 1px solid var(--fr-border);
border-top: 5px solid #111;
background: #fafafa;
}
.fr-brief-list {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.fr-brief-item {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 14px;
border: 1px solid #e2e2e2;
background: #fff;
}
.fr-brief-item strong {
display: -webkit-box;
color: #111;
font-size: 15px;
line-height: 1.22;
font-weight: 800;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.fr-brief-item span:last-child {
color: var(--fr-muted);
font-size: 12px;
font-weight: 600;
}
.fr-news-row {
display: grid;
grid-template-columns: 140px minmax(0, 1fr);
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--fr-border);
}
.fr-news-copy,
.fr-card-copy {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 7px;
}
.fr-card-copy .fr-badge,
.fr-news-copy .fr-badge {
margin-top: 12px;
}
.fr-news-row h3,
.fr-feature-card h3 {
display: -webkit-box;
margin: 0;
font-size: 20px;
line-height: 1.18;
font-weight: 800;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Ujednolicenie zachowania się obrazków na Homepage */
.fr-homepage article,
.fr-homepage .fr-card,
.fr-homepage .fr-feature-card {
min-width: 0;
}
.fr-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.fr-feature-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .75fr));
gap: 20px;
}
.fr-feature-card {
min-width: 0;
padding-bottom: 16px;
border-bottom: 1px solid var(--fr-border);
}
.fr-feature-large {
grid-row: span 2;
}
.fr-feature-large h3 {
font-size: clamp(25px, 3vw, 34px);
line-height: 1.08;
font-weight: 800;
}
.fr-card-copy p {
display: -webkit-box;
margin: 0;
color: #444;
font-size: 14px;
line-height: 1.4;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- NEW SECTION LAYOUTS --- */
/* Chińskie Marki: 1 large + list */
.fr-layout-chinese .fr-feature-grid {
grid-template-columns: 1.4fr 1fr;
align-items: start;
gap: 24px;
}
.fr-layout-chinese .fr-feature-large {
grid-column: 1;
grid-row: 1 / span 3;
border-bottom: 0;
padding-bottom: 0;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
display: grid;
grid-template-columns: 110px 1fr;
gap: 16px;
align-items: center;
border-bottom: 1px solid var(--fr-border);
padding-bottom: 16px;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Napędy: Listowy */
.fr-layout-drives .fr-feature-grid {
grid-template-columns: 1.25fr 1fr;
align-items: start;
gap: 24px;
}
.fr-layout-drives .fr-feature-large {
grid-column: 1;
grid-row: 1 / span 3;
border-bottom: 0;
padding-bottom: 0;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
display: grid;
grid-template-columns: 90px 1fr;
gap: 14px;
align-items: center;
border-bottom: 1px solid var(--fr-border);
padding-bottom: 14px;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Rankingi: Numery */
.fr-layout-ranking .fr-feature-grid {
grid-template-columns: repeat(4, 1fr);
counter-reset: ranking-counter;
gap: 20px;
}
.fr-layout-ranking .fr-feature-large {
grid-column: span 2;
}
.fr-layout-ranking .fr-feature-card {
position: relative;
}
.fr-layout-ranking .fr-feature-card::before {
counter-increment: ranking-counter;
content: counter(ranking-counter);
position: absolute;
top: -12px;
left: -12px;
width: 32px;
height: 32px;
background: var(--fr-color);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 15px;
z-index: 5;
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* Poradniki: Lżejsze, 4 kolumny */
.fr-layout-guides .fr-feature-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.fr-layout-guides .fr-feature-large {
grid-column: span 1;
}
.fr-layout-guides .fr-feature-large h3 {
font-size: 19px;
}
.fr-layout-guides .fr-feature-large p {
display: none;
}
/* Rynek: 3 równe kafle */
.fr-layout-market .fr-feature-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.fr-layout-market .fr-feature-large {
grid-column: span 1;
}
.fr-layout-market .fr-feature-large h3 {
font-size: 20px;
}
.fr-layout-market .fr-feature-large p {
display: none;
}
.fr-shortcuts {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.fr-shortcuts a {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 10px 14px;
border: 1px solid var(--fr-border);
background: #fff;
color: #111;
font-size: 14px;
font-weight: 650;
line-height: 1.1;
box-sizing: border-box;
}
.fr-brand-logo-placeholder {
width: 22px;
height: 22px;
flex: 0 0 22px;
border: 1px solid currentColor;
opacity: .22;
}
.fr-brand-name {
white-space: nowrap;
}
.fr-brand-strip {
padding: 18px;
border: 1px solid #ead9df;
border-top: 4px solid #8B1E3F;
background: #fbf8f9;
margin-top: 24px;
}
.fr-brand-strip a {
border-color: #d9bdc8;
flex: 1 1 180px;
min-height: 64px;
padding: 15px 18px;
font-size: 16px;
}
.fr-brand-strip a:hover {
border-color: #8B1E3F;
color: #8B1E3F;
}
.fr-shortcuts-yellow a {
background: #fff;
border: 1px solid #eaeaea;
border-left: 4px solid #FFC400;
border-radius: 4px;
padding: 12px 18px;
font-size: 15px;
font-weight: 700;
color: #111;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
.fr-shortcuts-yellow a:hover {
border-color: #FFC400;
background: #fffdf5;
color: #000;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 196, 0, 0.15);
}
.fr-shortcuts-yellow .fr-brand-logo-placeholder {
display: none !important;
}
.fr-shortcuts-yellow a::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
.fr-shortcuts-yellow a[data-brand="ev"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.fr-shortcuts-yellow a[data-brand="hybrydy-i-plug-in"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.fr-shortcuts-yellow a[data-brand="ladowanie-i-infrastruktura"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.fr-shortcuts-yellow a[data-brand="benzyna-diesel-lpg"]::before { -webkit-mask-image: url('data:image/svg+xml;utf8,'); }
.fr-section-head a::after {
content: "\2192";
display: inline-block;
margin-left: 4px;
transition: transform .16s ease;
}
.fr-section-head a:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.fr-section-head a:hover::after {
transform: translateX(3px);
}
/* --- DESKTOP ALIGNMENT FIXES --- */
@media (min-width: 769px) {
/* Chińskie marki & Napędy */
.fr-layout-chinese .fr-feature-grid,
.fr-layout-drives .fr-feature-grid {
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 16px 24px;
align-items: stretch;
}
.fr-layout-chinese .fr-feature-large,
.fr-layout-drives .fr-feature-large {
grid-row: 1 / span 3;
height: 100%;
display: flex;
flex-direction: column;
}
.fr-layout-chinese .fr-feature-large .fr-card-image,
.fr-layout-drives .fr-feature-large .fr-card-image {
flex: 1 1 auto;
min-height: 0;
display: block;
}
.fr-layout-chinese .fr-feature-large .fr-card-image img,
.fr-layout-drives .fr-feature-large .fr-card-image img {
height: 100%;
object-fit: cover;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large),
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
height: 100%;
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 20px;
align-items: center;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 1px solid var(--fr-border);
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large):last-child,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: none;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) h3,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) h3 {
font-size: 17px;
line-height: 1.25;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-badge,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge {
margin-top: 0;
}
.fr-layout-chinese .fr-brand-strip {
margin-top: 64px;
padding: 24px;
}
.fr-layout-drives .fr-shortcuts-yellow {
margin-top: 64px;
}
/* Testy, Poradniki, Rynek */
.fr-layout-tests .fr-feature-grid,
.fr-layout-guides .fr-feature-grid,
.fr-layout-market .fr-feature-grid {
align-items: stretch;
}
.fr-layout-tests .fr-feature-card,
.fr-layout-guides .fr-feature-card,
.fr-layout-market .fr-feature-card {
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.fr-layout-tests .fr-card-image,
.fr-layout-guides .fr-card-image,
.fr-layout-market .fr-card-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
flex-shrink: 0;
}
.fr-layout-tests .fr-card-image img,
.fr-layout-guides .fr-card-image img,
.fr-layout-market .fr-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fr-layout-tests .fr-card-copy,
.fr-layout-guides .fr-card-copy,
.fr-layout-market .fr-card-copy {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.fr-layout-tests .fr-meta,
.fr-layout-guides .fr-meta,
.fr-layout-market .fr-meta {
margin-top: auto;
}
.fr-layout-tests .fr-feature-large h3,
.fr-layout-guides .fr-feature-large h3,
.fr-layout-market .fr-feature-large h3 {
font-size: clamp(20px, 2vw, 24px) !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE STRUCTURE FINAL
Worth reading / Older posts / Latest cleanup
========================================================= */
/* ZADANIE 3: Najnowsze — pełniejsza szerokość, naprawa pustej kolumny */
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage .fr-section-latest,
body.fr-home-active .fr-homepage .fr-latest {
width: 100% !important;
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid,
body.fr-home-active .fr-homepage .fr-latest-grid,
body.fr-home-active .fr-homepage .fr-latest-feed {
width: 100% !important;
max-width: 980px !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-latest .fr-section-head {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
max-width: 980px !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head a,
body.fr-home-active .fr-homepage .fr-latest .fr-section-head a {
white-space: nowrap !important;
}
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid article,
body.fr-home-active .fr-homepage .fr-latest-grid article {
display: grid !important;
grid-template-columns: minmax(280px, 35%) 1fr !important;
gap: 24px !important;
align-items: center !important;
}
}
/* ZADANIE 1: Warto przeczytać (Evergreen Section) */
.fr-home-worth-reading {
margin: 48px 0 !important;
}
.fr-home-worth-reading .fr-evergreen-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
.fr-home-worth-reading .fr-feature-card,
.fr-home-worth-reading article {
min-width: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.fr-home-worth-reading .fr-card-image {
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #eee !important;
margin-bottom: 10px !important;
}
.fr-home-worth-reading img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
.fr-home-worth-reading h3 {
display: -webkit-box !important;
margin: 6px 0 6px !important;
font-size: 18px !important;
line-height: 1.15 !important;
font-weight: 760 !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
color: #111 !important;
}
/* ZADANIE 2: CTA starsze artykuły */
.fr-older-posts {
display: flex !important;
justify-content: center !important;
width: 100% !important;
margin: 52px auto 60px !important;
}
.fr-older-posts a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 28px !important;
border: 2px solid #111 !important;
border-radius: 0 !important;
color: #111 !important;
background: transparent !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 760 !important;
text-decoration: none !important;
transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.fr-older-posts a:hover,
.fr-older-posts a:focus {
background: #111 !important;
color: #fff !important;
outline: none !important;
}
/* Mobilne korekty dla nowych elementów */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-latest .fr-section-head {
align-items: flex-start !important;
flex-direction: column !important;
gap: 10px !important;
}
.fr-home-worth-reading {
margin: 38px 0 !important;
}
.fr-home-worth-reading .fr-evergreen-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.fr-home-worth-reading h3 {
font-size: 19px !important;
line-height: 1.12 !important;
}
.fr-older-posts {
margin: 42px auto 48px !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
.fr-older-posts a {
width: 100% !important;
max-width: 360px !important;
}
}
/* =========================================================
HOMEPAGE — FINALNE POPRAWKI WIZUALNE (CHIŃSKIE MARKI, NAPĘDY, TESTY, RYNEK, PORADNIKI, NAJNOWSZE)
========================================================= */
/* 1. CHIŃSKIE MARKI — KOLOR BELEK PODKATEGORII */
.fr-layout-chinese {
--fr-color: #8B1E3F;
}
.fr-layout-chinese .fr-badge,
.fr-layout-chinese .fr-card-copy .fr-badge,
.fr-layout-chinese .fr-feature-card .fr-badge,
.fr-layout-chinese .fr-news-copy .fr-badge {
background: #8B1E3F !important;
color: #fff !important;
}
/* 2. CHIŃSKIE MARKI — UKŁAD DESKTOP 1 + 4 */
@media (min-width: 1025px) {
.fr-layout-chinese .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr) !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 14px 28px !important;
align-items: stretch !important;
}
.fr-layout-chinese .fr-feature-large {
grid-column: 1 !important;
grid-row: 1 / span 4 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
height: 100% !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-chinese .fr-feature-large .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-chinese .fr-feature-large .fr-card-copy {
padding: 16px 0 0 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--fr-border) !important;
box-sizing: border-box !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 128px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-badge {
margin: 0 0 2px !important;
padding: 4px 7px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-meta {
margin-top: auto !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
}
/* 5. NAPĘDY — DESKTOP 4 + 1, UKŁAD LUSTRZANY */
@media (min-width: 1025px) {
.fr-layout-drives .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(360px, .92fr) minmax(0, 1.45fr) !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 14px 28px !important;
align-items: stretch !important;
}
.fr-layout-drives .fr-feature-large {
grid-column: 2 !important;
grid-row: 1 / span 4 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
height: 100% !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-drives .fr-feature-large .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 16px 0 0 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
grid-column: 1 !important;
display: grid !important;
grid-template-columns: 142px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--fr-border) !important;
box-sizing: border-box !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 142px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge {
margin: 0 0 2px !important;
padding: 4px 7px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-meta {
margin-top: auto !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
}
/* 6. NAPĘDY — BOXY POD SEKCJĄ */
.fr-layout-drives .fr-shortcuts,
.fr-layout-drives .fr-shortcuts-yellow {
margin-top: 14px !important;
gap: 8px !important;
}
.fr-layout-drives .fr-shortcuts a,
.fr-layout-drives .fr-shortcuts-yellow a {
position: relative;
min-height: 32px !important;
padding: 6px 10px 6px 28px !important;
border: 1px solid #ead77a !important;
background: #fffdf0 !important;
color: #111 !important;
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 750 !important;
}
.fr-layout-drives .fr-shortcuts a::before,
.fr-layout-drives .fr-shortcuts-yellow a::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 9px;
height: 9px;
transform: translateY(-50%);
border-radius: 999px;
background: #FFC400;
box-shadow: 0 0 0 2px #fff;
}
.fr-layout-drives .fr-shortcuts a:hover,
.fr-layout-drives .fr-shortcuts-yellow a:hover {
border-color: #d1a900 !important;
background: #fff8cf !important;
}
/* 7. PORADNIKI — RÓWNE KARTY */
@media (min-width: 769px) {
.fr-layout-guides .fr-feature-grid {
align-items: stretch !important;
}
.fr-layout-guides .fr-feature-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.fr-layout-guides .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-guides .fr-card-copy {
flex: 1 1 auto !important;
padding: 12px 14px 14px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.fr-layout-guides .fr-meta {
margin-top: auto !important;
}
}
/* 8. RYNEK — 3 RÓWNE KARTY */
@media (min-width: 769px) {
.fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 24px !important;
}
.fr-layout-market .fr-feature-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.fr-layout-market .fr-feature-large {
grid-column: span 1 !important;
}
.fr-layout-market .fr-feature-large h3 {
font-size: 20px !important;
}
.fr-layout-market .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-market .fr-card-copy {
flex: 1 1 auto !important;
padding: 12px 14px 14px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.fr-layout-market .fr-meta {
margin-top: auto !important;
}
}
/* 9. NAJNOWSZE — PADDING TYTUŁÓW */
.fr-latest-grid .fr-card,
.fr-latest-grid article {
overflow: hidden !important;
}
.fr-latest-grid .fr-card-copy,
.fr-latest-grid article .fr-card-copy,
.fr-latest-grid .fr-news-copy {
padding: 10px 12px 12px !important;
box-sizing: border-box !important;
}
.fr-latest-grid h3 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 10. MOBILE — NIE ZMIENIAĆ UKŁADU CHIŃSKIE MARKI / NAPĘDY */
@media (max-width: 1024px) {
.fr-layout-chinese .fr-feature-grid,
.fr-layout-drives .fr-feature-grid {
display: grid;
}
.fr-layout-chinese .fr-feature-large,
.fr-layout-drives .fr-feature-large,
.fr-layout-chinese .fr-feature-card,
.fr-layout-drives .fr-feature-card {
grid-column: auto !important;
grid-row: auto !important;
}
}
/* =========================================================
ZADANIE: CHIŃSKIE MARKI — FEATURED TEXT + POPULARNE MARKI
========================================================= */
/* 1. TEKST POD DUŻYM ZDJĘCIEM — ODSUNIĘCIE OD LEWEJ KRAWĘDZI */
@media (min-width: 1025px) {
.fr-layout-chinese .fr-feature-large .fr-card-copy,
.fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 18px 22px 0 !important;
box-sizing: border-box !important;
}
.fr-layout-chinese .fr-feature-large .fr-badge,
.fr-layout-drives .fr-feature-large .fr-badge {
margin-left: 0 !important;
}
.fr-layout-chinese .fr-feature-large h3,
.fr-layout-chinese .fr-feature-large p,
.fr-layout-chinese .fr-feature-large .fr-meta,
.fr-layout-drives .fr-feature-large h3,
.fr-layout-drives .fr-feature-large p,
.fr-layout-drives .fr-feature-large .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 2 & 3. POPULARNE MARKI — ODSTĘP DO TESTÓW & UPORZĄDKOWANIE */
.fr-homepage .fr-layout-chinese.fr-section {
margin-bottom: 22px !important;
}
.fr-homepage .fr-layout-tests.fr-section {
margin-top: 22px !important;
}
.fr-layout-chinese .fr-brand-strip {
margin-top: 16px !important;
margin-bottom: 0 !important;
padding: 12px 16px !important;
border-top: 4px solid #8B1E3F !important;
border-bottom: 1px solid rgba(139, 30, 63, .18) !important;
background: #fffafb !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
/* 4. POPULARNE MARKI — WYGLĄD POD LOGOTYPY */
.fr-layout-chinese .fr-brand-strip > span,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts-label,
.fr-layout-chinese .fr-brand-label,
.fr-layout-chinese .fr-brand-strip-list .fr-brand-strip-label {
flex: 0 0 auto !important;
font-size: 18px !important;
line-height: 1.2 !important;
font-weight: 650 !important;
color: #111 !important;
margin-right: 0 !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts,
.fr-layout-chinese .fr-brand-list,
.fr-layout-chinese .fr-brand-strip-list {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
width: auto !important;
}
.fr-layout-chinese .fr-brand-strip a,
.fr-layout-chinese .fr-shortcuts a,
.fr-layout-chinese .fr-brand-list a,
.fr-layout-chinese .fr-brand-strip-list a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
min-height: 30px !important;
padding: 5px 9px 5px 8px !important;
border: 1px solid rgba(139, 30, 63, .18) !important;
background: #fff !important;
color: #111 !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 700 !important;
text-decoration: none !important;
box-sizing: border-box !important;
flex: 0 0 auto !important;
}
.fr-layout-chinese .fr-brand-strip a::before,
.fr-layout-chinese .fr-shortcuts a::before,
.fr-layout-chinese .fr-brand-list a::before,
.fr-layout-chinese .fr-brand-strip-list a::before {
content: "";
display: inline-block !important;
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #8B1E3F, #b44868) !important;
box-shadow: inset 0 0 0 2px #fff !important;
}
.fr-layout-chinese .fr-brand-strip a:hover,
.fr-layout-chinese .fr-shortcuts a:hover,
.fr-layout-chinese .fr-brand-list a:hover,
.fr-layout-chinese .fr-brand-strip-list a:hover {
border-color: #8B1E3F !important;
color: #8B1E3F !important;
background: #fffafb !important;
}
/* 6. MOBILE */
@media (max-width: 768px) {
.fr-layout-chinese .fr-brand-strip {
gap: 10px !important;
padding: 12px !important;
}
.fr-layout-chinese .fr-brand-strip > span,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts-label,
.fr-layout-chinese .fr-brand-label,
.fr-layout-chinese .fr-brand-strip-list .fr-brand-strip-label {
width: 100% !important;
font-size: 15px !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts,
.fr-layout-chinese .fr-brand-list,
.fr-layout-chinese .fr-brand-strip-list {
gap: 7px !important;
}
}
/* =========================================================
ZADANIE: POPULARNE MARKI + UKŁAD CHIŃSKIE MARKI / NAPĘDY NA MOBILE
========================================================= */
/* NADPISANIE UKRYWANIA WPISÓW NA MOBILE */
@media (max-width: 1024px) {
.fr-homepage .fr-layout-chinese .fr-feature-card:nth-of-type(n+4),
.fr-homepage .fr-layout-drives .fr-feature-card:nth-of-type(n+4),
.fr-layout-chinese .fr-feature-card:nth-of-type(n+4),
.fr-layout-drives .fr-feature-card:nth-of-type(n+4) {
display: grid !important;
}
}
/* 2. UKŁAD CHIŃSKIE MARKI — 1+4 TAKŻE NA MOBILE */
@media (max-width: 1024px) {
.fr-layout-chinese .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.fr-layout-chinese .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--fr-border) !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 112px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-badge {
padding: 4px 7px !important;
font-size: 10px !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-meta {
font-size: 11px !important;
line-height: 1.25 !important;
}
}
@media (max-width: 420px) {
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 10px !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 96px !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) h3 {
font-size: 14px !important;
line-height: 1.18 !important;
-webkit-line-clamp: 3 !important;
}
}
/* 3. UKŁAD NAPĘDY — 4+1 TAKŻE NA MOBILE */
@media (max-width: 1024px) {
.fr-layout-drives .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.fr-layout-drives .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
order: 5 !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
order: 1 !important;
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 0 0 12px !important;
border-bottom: 1px solid var(--fr-border) !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 112px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge {
padding: 4px 7px !important;
font-size: 10px !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-meta {
font-size: 11px !important;
line-height: 1.25 !important;
}
}
@media (max-width: 420px) {
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 10px !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 96px !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) h3 {
font-size: 14px !important;
line-height: 1.18 !important;
-webkit-line-clamp: 3 !important;
}
}
/* 4. BELKA „NAJPOPULARNIEJSZE CHIŃSKIE MARKI” NA MOBILE */
@media (max-width: 768px) {
.fr-layout-chinese .fr-brand-strip {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 12px !important;
}
.fr-layout-chinese .fr-brand-strip > span,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts-label,
.fr-layout-chinese .fr-brand-label,
.fr-layout-chinese .fr-brand-strip-list .fr-brand-strip-label {
width: 100% !important;
font-size: 15px !important;
line-height: 1.2 !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts,
.fr-layout-chinese .fr-brand-list,
.fr-layout-chinese .fr-brand-strip-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 7px !important;
width: 100% !important;
}
}
/* =========================================================
HOMEPAGE — FINALNE WYRÓWNANIE SEKCJI
========================================================= */
/* OGÓLNY PADDING TEKSTU W KARTACH */
.fr-homepage .fr-card-copy,
.fr-homepage .fr-news-copy {
box-sizing: border-box !important;
}
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3 {
overflow-wrap: normal !important;
word-break: normal !important;
}
/* CHIŃSKIE MARKI — PASEK POPULARNE MARKI */
.fr-layout-chinese .fr-brand-strip {
margin-top: 14px !important;
margin-bottom: 22px !important;
padding: 8px 12px !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts {
gap: 8px 14px !important;
margin-top: 0 !important;
}
.fr-layout-chinese .fr-brand-strip a,
.fr-layout-chinese .fr-shortcuts a {
min-height: 30px !important;
padding: 5px 8px !important;
font-size: 12px !important;
line-height: 1.1 !important;
}
/* NAPĘDY — ŻÓŁTE BOXY / SHORTCUTY */
.fr-layout-drives .fr-shortcuts,
.fr-layout-drives .fr-shortcuts-yellow {
margin-top: 14px !important;
gap: 8px !important;
}
.fr-layout-drives .fr-shortcuts a,
.fr-layout-drives .fr-shortcuts-yellow a {
position: relative;
min-height: 32px !important;
padding: 6px 10px 6px 28px !important;
border: 1px solid #ead77a !important;
background: #fffdf0 !important;
color: #111 !important;
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 750 !important;
}
.fr-layout-drives .fr-shortcuts a::before,
.fr-layout-drives .fr-shortcuts-yellow a::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 9px;
height: 9px;
transform: translateY(-50%);
border-radius: 999px;
background: #FFC400;
box-shadow: 0 0 0 2px #fff;
}
.fr-layout-drives .fr-shortcuts a:hover,
.fr-layout-drives .fr-shortcuts-yellow a:hover {
border-color: #d1a900 !important;
background: #fff8cf !important;
}
/* DESKTOP LAYOUTS */
@media (min-width: 1025px) {
/* CHIŃSKIE MARKI — DESKTOP 1 + 4 */
.fr-layout-chinese .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.45fr) minmax(340px, .9fr) !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 14px 28px !important;
align-items: stretch !important;
}
.fr-layout-chinese .fr-feature-large {
grid-column: 1 !important;
grid-row: 1 / span 4 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
height: 100% !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-chinese .fr-feature-large .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-chinese .fr-feature-large .fr-card-copy {
padding: 14px 0 0 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--fr-border) !important;
box-sizing: border-box !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 128px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-badge {
margin: 0 0 2px !important;
padding: 4px 7px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large) .fr-meta {
margin-top: auto !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
/* NAPĘDY — DESKTOP 4 + 1 */
.fr-layout-drives .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(340px, .9fr) minmax(0, 1.45fr) !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 14px 28px !important;
align-items: stretch !important;
}
.fr-layout-drives .fr-feature-large {
grid-column: 2 !important;
grid-row: 1 / span 4 !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
height: 100% !important;
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-drives .fr-feature-large .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 14px 0 0 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
grid-column: 1 !important;
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 0 10px !important;
border-bottom: 1px solid var(--fr-border) !important;
box-sizing: border-box !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 128px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
gap: 5px !important;
display: flex !important;
flex-direction: column !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge {
margin: 0 0 2px !important;
padding: 4px 7px !important;
font-size: 10px !important;
line-height: 1 !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) h3 {
margin: 0 !important;
font-size: 15px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-meta {
margin-top: auto !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
}
@media (min-width: 769px) {
/* TESTY SAMOCHODÓW */
.fr-layout-tests .fr-feature-grid {
align-items: stretch !important;
}
.fr-layout-tests .fr-feature-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.fr-layout-tests .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-tests .fr-card-copy {
flex: 1 1 auto !important;
padding: 12px 14px 14px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.fr-layout-tests .fr-meta {
margin-top: auto !important;
}
/* PORADNIKI */
.fr-layout-guides .fr-feature-grid {
align-items: stretch !important;
}
.fr-layout-guides .fr-feature-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.fr-layout-guides .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-guides .fr-card-copy {
flex: 1 1 auto !important;
padding: 10px 12px 12px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.fr-layout-guides .fr-meta {
margin-top: auto !important;
}
/* RYNEK */
.fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 24px !important;
}
.fr-layout-market .fr-feature-card {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.fr-layout-market .fr-feature-large {
grid-column: span 1 !important;
}
.fr-layout-market .fr-feature-large h3 {
font-size: 20px !important;
}
.fr-layout-market .fr-card-image {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
.fr-layout-market .fr-card-copy {
flex: 1 1 auto !important;
padding: 10px 12px 12px !important;
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
.fr-layout-market .fr-meta {
margin-top: auto !important;
}
}
/* TABLET FALLBACK */
@media (min-width: 769px) and (max-width: 1024px) {
.fr-layout-chinese .fr-feature-grid,
.fr-layout-drives .fr-feature-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
.fr-layout-chinese .fr-feature-large,
.fr-layout-drives .fr-feature-large,
.fr-layout-chinese .fr-feature-card,
.fr-layout-drives .fr-feature-card {
grid-column: auto !important;
grid-row: auto !important;
}
}
/* MOBILE HIDE EXTRA POSTS */
@media (max-width: 768px) {
.fr-layout-chinese .fr-feature-card:nth-of-type(n+4),
.fr-layout-drives .fr-feature-card:nth-of-type(n+4) {
display: none !important;
}
}
@media (hover: hover) and (pointer: fine) {
.fr-hero-card, .fr-feature-card, .fr-article-related-card, .fr-day-card,
.fr-homepage article, .fr-homepage .fr-card {
transition: transform .18s ease, box-shadow .18s ease;
}
.fr-hero-card:hover, .fr-feature-card:hover, .fr-article-related-card:hover, .fr-day-card:hover,
.fr-homepage article:hover, .fr-homepage .fr-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.fr-hero-card .fr-img, .fr-feature-card .fr-img, .fr-article-related-card .fr-article-related-thumb img, .fr-day-image .fr-img,
.fr-homepage article img, .fr-homepage .fr-card img {
transition: transform .22s ease;
}
.fr-hero-card:hover .fr-img, .fr-feature-card:hover .fr-img, .fr-article-related-card:hover .fr-article-related-thumb img, .fr-day-card:hover .fr-img,
.fr-homepage article:hover img, .fr-homepage .fr-card:hover img {
transform: scale(1.025);
}
}
/* --- DESKTOP HIDE NEW MOBILE MODULES --- */
@media (min-width: 769px) {}
@media (max-width: 1023px) {
.fr-day-card,
.fr-hero,
.fr-brief-list,
.fr-feature-grid,
.fr-latest-grid,
.fr-layout-tests .fr-feature-grid,
.fr-layout-chinese .fr-feature-grid,
.fr-layout-drives .fr-feature-grid,
.fr-layout-guides .fr-feature-grid,
.fr-layout-market .fr-feature-grid,
.fr-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fr-day-card,
.fr-hero-main,
.fr-feature-large,
.fr-layout-tests .fr-feature-large,
.fr-layout-chinese .fr-feature-large,
.fr-layout-drives .fr-feature-large,
.fr-layout-guides .fr-feature-large,
.fr-layout-market .fr-feature-large {
grid-column: 1 / -1;
grid-row: auto;
}
.fr-day-image {
display: none;
}
.fr-hero-side {
grid-template-columns: 1fr;
}
.fr-hero-side {
grid-column: 1 / -1;
}
.fr-hero-main .fr-hero-link {
min-height: 430px;
}
}
@media (max-width: 768px) {
.fr-homepage .fr-wrap {
width: calc(100% - 32px);
max-width: 100%;
}
.fr-ad {
margin: 28px 0 38px;
}
.fr-ad-box {
width: 100%;
max-width: 100%;
height: 280px;
min-height: 280px;
max-height: 280px;
}
.fr-hero-block,
.fr-section {
margin: 38px 0;
}
.fr-day-card,
.fr-hero,
.fr-hero-side,
.fr-latest-grid,
.fr-brief-list,
.fr-feature-grid,
.fr-layout-tests .fr-feature-grid,
.fr-layout-chinese .fr-feature-grid,
.fr-layout-drives .fr-feature-grid,
.fr-layout-ranking .fr-feature-grid,
.fr-layout-guides .fr-feature-grid,
.fr-layout-market .fr-feature-grid,
.fr-card-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.fr-homepage,
.fr-homepage .fr-wrap,
.fr-section,
.fr-hero-block,
.fr-feature-card,
.fr-brief-item,
.fr-day-card {
min-width: 0;
max-width: 100%;
}
.fr-day-card {
padding: 16px;
}
.fr-day-card h1 {
font-size: 25px;
line-height: 1.08;
}
.fr-hero-link,
.fr-hero-main .fr-hero-link {
min-height: 250px;
}
.fr-hero-main .fr-hero-copy strong {
font-size: 28px;
line-height: 1.08;
}
.fr-hero-copy strong {
font-size: 20px;
-webkit-line-clamp: 2;
}
.fr-section-head {
flex-wrap: wrap;
align-items: baseline;
gap: 10px 14px;
margin-bottom: 18px;
}
.fr-section-head h2 {
font-size: 26px;
}
.fr-section-head a {
max-width: 100%;
font-size: 13.5px;
line-height: 1.2;
}
.fr-latest-grid .fr-feature-card:nth-of-type(n+5) {
display: none;
}
.fr-news-row {
grid-template-columns: 1fr;
gap: 10px;
}
.fr-brand-strip {
padding: 14px;
gap: 10px;
}
.fr-brand-name {
white-space: normal;
}
.fr-news-row h3,
.fr-feature-card h3 {
font-size: 19px;
}
.fr-feature-large h3 {
font-size: 24px;
}
.fr-layout-chinese .fr-feature-card:not(.fr-feature-large),
.fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
grid-template-columns: 90px 1fr;
gap: 12px;
}
.fr-layout-chinese .fr-feature-card:nth-of-type(n+4),
.fr-layout-tests .fr-feature-card:nth-of-type(n+4),
.fr-layout-drives .fr-feature-card:nth-of-type(n+4),
.fr-layout-ranking .fr-feature-card:nth-of-type(n+4),
.fr-layout-guides .fr-feature-card:nth-of-type(n+4),
.fr-layout-market .fr-feature-card:nth-of-type(n+4) {
display: none;
}
}
/* --- MOBILE FIXES: AD PLACEHOLDER, GUIDES & RANKINGS --- */
@media (max-width: 768px) {.fr-homepage .fr-ad.fr-ad-top {
display: none !important;
}
/* Ad Placeholder Strict Dimensions */
.fr-homepage .fr-ad {
width: 100%;
max-width: 100%;
height: 280px;
min-height: 280px;
margin: 34px 0;
border: 1px solid #e5e5e5;
background: #f7f7f7;
box-sizing: border-box;
overflow: hidden;
display: block;
}
.fr-homepage .fr-ad .fr-ad-box {
width: 100%;
height: 100%;
min-height: 280px;
background: transparent;
border: none;
}
/* Warto przeczytać Box */
.fr-mobile-recommended {
display: block;
margin: 34px 0;
padding: 18px;
border: 1px solid #e5e5e5;
background: #fff;
}
.fr-mobile-recommended-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 22px;
line-height: 1.1;
font-weight: 800;
}
.fr-mobile-recommended-title::before {
content: "";
width: 4px;
height: 22px;
background: #E12626;
flex: 0 0 auto;
}
.fr-mobile-recommended-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px;
}
.fr-mobile-recommended-card {
min-width: 0;
display: flex;
flex-direction: column;
}
.fr-mobile-recommended-card img {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
object-fit: cover;
display: block;
background: #eee;
}
.fr-mobile-recommended-card-title {
margin: 8px 0 0;
font-size: 14.5px;
line-height: 1.25;
font-weight: 800;
}
.fr-mobile-recommended-card-label {
display: inline-block;
margin-top: 8px;
padding: 4px 6px;
color: #fff;
font-size: 10px;
line-height: 1;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.030em;
}
}
/* =========================================================
4RINGS FINAL — TESTY SAMOCHODÓW JAK RYNEK
Tylko sekcja .fr-layout-tests
Cel: 3 równe duże karty obok siebie na desktopie.
========================================================= */
@media (min-width: 1025px) {
.fr-homepage .fr-layout-tests .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
gap: 24px !important;
align-items: stretch !important;
}
.fr-homepage .fr-layout-tests .fr-feature-card,
.fr-homepage .fr-layout-tests .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
border: 0 !important;
border-bottom: 1px solid var(--fr-border, #e4e4e4) !important;
background: #fff !important;
box-shadow: none !important;
}
.fr-homepage .fr-layout-tests .fr-card-image,
.fr-homepage .fr-layout-tests .fr-feature-card .fr-card-image,
.fr-homepage .fr-layout-tests .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
overflow: hidden !important;
margin: 0 !important;
background: #eee !important;
}
.fr-homepage .fr-layout-tests .fr-card-image img,
.fr-homepage .fr-layout-tests .fr-feature-card .fr-card-image img,
.fr-homepage .fr-layout-tests .fr-feature-large .fr-card-image img,
.fr-homepage .fr-layout-tests .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
.fr-homepage .fr-layout-tests .fr-card-copy,
.fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy,
.fr-homepage .fr-layout-tests .fr-feature-large .fr-card-copy {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 7px !important;
padding: 12px 14px 14px !important;
box-sizing: border-box !important;
}
.fr-homepage .fr-layout-tests .fr-badge {
align-self: flex-start !important;
margin: 0 0 4px !important;
padding: 5px 8px !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 800 !important;
background: #1565C0 !important;
color: #fff !important;
border-color: #1565C0 !important;
}
.fr-homepage .fr-layout-tests h3,
.fr-homepage .fr-layout-tests .fr-feature-large h3,
.fr-homepage .fr-layout-tests .fr-feature-card h3 {
margin: 0 0 6px !important;
font-size: 20px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
letter-spacing: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-homepage .fr-layout-tests p,
.fr-homepage .fr-layout-tests .fr-card-excerpt {
margin: 0 0 8px !important;
color: #444 !important;
font-size: 14px !important;
line-height: 1.4 !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-homepage .fr-layout-tests .fr-meta {
margin-top: auto !important;
padding-top: 8px !important;
color: var(--fr-muted, #666) !important;
font-size: 13px !important;
line-height: 1.3 !important;
font-weight: 650 !important;
}
}
/* =========================================================
4RINGS — FINAL WCAG CONTRAST FIX
Badge i linki sekcyjne z poprawnym kontrastem
========================================================= */
/* Rankingi: Dostępny kontrast */
.fr-homepage .fr-badge.fr-cat-rankingi,
.fr-homepage .fr-cat-rankingi {
background: #176B34 !important;
color: #ffffff !important;
border-color: #176B34 !important;
}
/* Rynek: Dostępny kontrast */
.fr-homepage .fr-badge.fr-cat-rynek,
.fr-homepage .fr-cat-rynek {
background: #B84D00 !important;
color: #ffffff !important;
border-color: #B84D00 !important;
}
/* Napędy: Ciemny tekst na żółtym tle */
.fr-homepage .fr-badge.fr-cat-napedy,
.fr-homepage .fr-cat-napedy {
background: #FFC400 !important;
color: #111111 !important;
border-color: #FFC400 !important;
}
/* Linki sekcyjne ("Wszystkie rankingi", "Więcej z rynku", itp.) */
.fr-homepage .fr-section-head a {
color: #111111 !important;
}
.fr-homepage .fr-section-head a:hover {
color: #111111 !important;
text-decoration-color: var(--fr-color, #E12626) !important;
}
@media (min-width: 769px) and (max-width: 1024px) {
.fr-homepage .fr-layout-tests .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
gap: 20px !important;
align-items: stretch !important;
}
.fr-homepage .fr-layout-tests .fr-feature-card,
.fr-homepage .fr-layout-tests .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 0 !important;
}
}
/* =========================================================
4RINGS FINAL — RYNEK I PORADNIKI: RÓWNE KARTY
Tylko sekcje .fr-layout-market i .fr-layout-guides.
Cel: wyrównać wysokość i wielkość kart bez zmiany reszty homepage.
========================================================= */
@media (min-width: 1025px) {
/* RYNEK — 3 równe karty jak dotychczasowy układ, bez większego pierwszego boxa */
.fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
gap: 24px !important;
align-items: stretch !important;
}
.fr-homepage .fr-layout-market .fr-feature-card,
.fr-homepage .fr-layout-market .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
border: 0 !important;
border-bottom: 1px solid var(--fr-border, #e4e4e4) !important;
background: #fff !important;
box-shadow: none !important;
}
.fr-homepage .fr-layout-market .fr-card-image,
.fr-homepage .fr-layout-market .fr-feature-card .fr-card-image,
.fr-homepage .fr-layout-market .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
overflow: hidden !important;
margin: 0 !important;
background: #eee !important;
}
.fr-homepage .fr-layout-market .fr-card-image img,
.fr-homepage .fr-layout-market .fr-feature-card .fr-card-image img,
.fr-homepage .fr-layout-market .fr-feature-large .fr-card-image img,
.fr-homepage .fr-layout-market .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
.fr-homepage .fr-layout-market .fr-card-copy,
.fr-homepage .fr-layout-market .fr-feature-card .fr-card-copy,
.fr-homepage .fr-layout-market .fr-feature-large .fr-card-copy {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 7px !important;
padding: 18px 20px 16px !important;
box-sizing: border-box !important;
}
.fr-homepage .fr-layout-market h3,
.fr-homepage .fr-layout-market .fr-feature-card h3,
.fr-homepage .fr-layout-market .fr-feature-large h3 {
margin: 0 0 8px !important;
font-size: 20px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
letter-spacing: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-homepage .fr-layout-market p,
.fr-homepage .fr-layout-market .fr-card-excerpt {
display: none !important;
}
.fr-homepage .fr-layout-market .fr-meta {
margin-top: auto !important;
padding-top: 8px !important;
}
/* PORADNIKI — 4 równe karty, bez większego pierwszego boxa */
.fr-homepage .fr-layout-guides .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
gap: 20px !important;
align-items: stretch !important;
}
.fr-homepage .fr-layout-guides .fr-feature-card,
.fr-homepage .fr-layout-guides .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
width: auto !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
border: 0 !important;
border-bottom: 1px solid var(--fr-border, #e4e4e4) !important;
background: #fff !important;
box-shadow: none !important;
}
.fr-homepage .fr-layout-guides .fr-card-image,
.fr-homepage .fr-layout-guides .fr-feature-card .fr-card-image,
.fr-homepage .fr-layout-guides .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
overflow: hidden !important;
margin: 0 !important;
background: #eee !important;
}
.fr-homepage .fr-layout-guides .fr-card-image img,
.fr-homepage .fr-layout-guides .fr-feature-card .fr-card-image img,
.fr-homepage .fr-layout-guides .fr-feature-large .fr-card-image img,
.fr-homepage .fr-layout-guides .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
.fr-homepage .fr-layout-guides .fr-card-copy,
.fr-homepage .fr-layout-guides .fr-feature-card .fr-card-copy,
.fr-homepage .fr-layout-guides .fr-feature-large .fr-card-copy {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 7px !important;
padding: 14px 16px 14px !important;
box-sizing: border-box !important;
}
.fr-homepage .fr-layout-guides h3,
.fr-homepage .fr-layout-guides .fr-feature-card h3,
.fr-homepage .fr-layout-guides .fr-feature-large h3 {
margin: 0 0 8px !important;
font-size: 19px !important;
line-height: 1.16 !important;
font-weight: 760 !important;
letter-spacing: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.fr-homepage .fr-layout-guides p,
.fr-homepage .fr-layout-guides .fr-card-excerpt {
display: none !important;
}
.fr-homepage .fr-layout-guides .fr-meta {
margin-top: auto !important;
padding-top: 8px !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.fr-homepage .fr-layout-market .fr-feature-grid,
.fr-homepage .fr-layout-guides .fr-feature-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
align-items: stretch !important;
}
.fr-homepage .fr-layout-market .fr-feature-card,
.fr-homepage .fr-layout-market .fr-feature-large,
.fr-homepage .fr-layout-guides .fr-feature-card,
.fr-homepage .fr-layout-guides .fr-feature-large {
grid-column: auto !important;
grid-row: auto !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
}
/* =========================================================
4RINGS — MOBILE RANKINGS FINAL RESTORE
Przywraca 3 duże karty rankingów na mobile
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking {
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 22px !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
transform: none !important;
}
/* Mobile: tylko 3 pierwsze karty rankingów */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 16px !important;
position: static !important;
transform: none !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
position: static !important;
transform: none !important;
background: var(--badge-bg, #1E8E3E) !important;
color: var(--badge-fg, #ffffff) !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy h3 {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
font-size: 18px !important;
line-height: 1.20 !important;
font-weight: 740 !important;
margin: 0 0 9px !important;
padding: 0 0 0.08em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy p {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 0 10px !important;
color: #333333 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-meta {
display: block !important;
width: 100% !important;
max-width: 100% !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin: 6px 0 0 !important;
color: #666666 !important;
position: static !important;
transform: none !important;
}
/* Numery rankingów wewnątrz zdjęcia */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
transform: none !important;
}
/*
Ukrycie ewentualnych pseudo-linii / osi / markerów,
które robiły pionową przerywaną linię w rankingach mobile.
*/
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid::after {
display: none !important;
content: none !important;
}
}
/* =========================================================
4RINGS — FINAL WCAG CONTRAST FIX
Badge i linki sekcyjne z poprawnym kontrastem
========================================================= */
/* Rankingi: Dostępny kontrast */
.fr-homepage .fr-badge.fr-cat-rankingi,
.fr-homepage .fr-cat-rankingi {
background: #176B34 !important;
color: #ffffff !important;
border-color: #176B34 !important;
}
/* Rynek: Dostępny kontrast */
.fr-homepage .fr-badge.fr-cat-rynek,
.fr-homepage .fr-cat-rynek {
background: #B84D00 !important;
color: #ffffff !important;
border-color: #B84D00 !important;
}
/* Napędy: Ciemny tekst na żółtym tle */
.fr-homepage .fr-badge.fr-cat-napedy,
.fr-homepage .fr-cat-napedy {
background: #FFC400 !important;
color: #111111 !important;
border-color: #FFC400 !important;
}
/* Linki sekcyjne ("Wszystkie rankingi", "Więcej z rynku", itp.) */
.fr-homepage .fr-section-head a {
color: #111111 !important;
}
.fr-homepage .fr-section-head a:hover {
color: #111111 !important;
text-decoration-color: var(--fr-color, #E12626) !important;
}
/* =========================================================
4RINGS — WCAG BADGE CONTRAST SOURCE FIX BACKUP
========================================================= */
.fr-badge.fr-cat-rankingi {
--badge-bg: #176B34 !important;
--badge-fg: #ffffff !important;
background: #176B34 !important;
color: #ffffff !important;
border-color: #176B34 !important;
}
.fr-badge.fr-cat-rynek {
--badge-bg: #B84D00 !important;
--badge-fg: #ffffff !important;
background: #B84D00 !important;
color: #ffffff !important;
border-color: #B84D00 !important;
}
.fr-badge.fr-cat-napedy {
--badge-bg: #FFC400 !important;
--badge-fg: #111111 !important;
background: #FFC400 !important;
color: #111111 !important;
border-color: #FFC400 !important;
}
/* =========================================================
4rings.pl — HOTFIX: Chińskie marki copy padding + odstęp do Testów
Zakres: tylko tekst pod głównym boksem Chińskie marki oraz przerwa przed sekcją Testy.
========================================================= */
@media (min-width: 1025px) {
/* Odsunięcie tekstu pod dużym zdjęciem w sekcji Chińskie marki od lewej krawędzi */
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-card-copy {
padding: 20px 28px 0 !important;
box-sizing: border-box !important;
}
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-badge,
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-chinese .fr-feature-large p,
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Zmniejszenie pustej przestrzeni między belką marek a sekcją Testy */
.fr-homepage .fr-layout-chinese.fr-section,
.fr-homepage .fr-layout-chinese {
margin-bottom: 12px !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip,
.fr-homepage .fr-layout-chinese .fr-brand-strip-list {
margin-bottom: 0 !important;
}
.fr-homepage .fr-layout-tests.fr-section,
.fr-homepage .fr-layout-tests {
margin-top: 12px !important;
}
}
/* =========================================================
4rings.pl — FINAL HOTFIX: padding tekstu pod zdjęciami
Zakres: tylko odsunięcie treści od lewej/prawej krawędzi
w sekcjach Chińskie marki, Napędy, Rankingi i Rynek.
Układ sekcji pozostaje bez zmian.
========================================================= */
@media (min-width: 769px) {
/* Chińskie marki — tekst pod dużym zdjęciem */
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-card-copy,
.fr-layout-chinese .fr-feature-large .fr-card-copy {
padding-left: 18px !important;
padding-right: 18px !important;
box-sizing: border-box !important;
}
/* Napędy — tekst pod dużym zdjęciem */
.fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy,
.fr-layout-drives .fr-feature-large .fr-card-copy {
padding-left: 18px !important;
padding-right: 18px !important;
box-sizing: border-box !important;
}
/* Rankingi — tekst pod zdjęciami kart */
.fr-homepage .fr-layout-ranking .fr-card-copy,
.fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy,
.fr-homepage .fr-layout-rankings .fr-card-copy,
.fr-homepage .fr-layout-rankings .fr-feature-card .fr-card-copy,
.fr-layout-ranking .fr-card-copy,
.fr-layout-rankings .fr-card-copy {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
/* Rynek — tekst pod zdjęciami kart */
.fr-homepage .fr-layout-market .fr-card-copy,
.fr-homepage .fr-layout-market .fr-feature-card .fr-card-copy,
.fr-homepage .fr-layout-market .fr-feature-large .fr-card-copy,
.fr-layout-market .fr-card-copy {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
/* Zerowanie ewentualnych ujemnych/niestandardowych marginesów tytułów w tych sekcjach */
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-drives .fr-feature-large h3,
.fr-homepage .fr-layout-ranking h3,
.fr-homepage .fr-layout-rankings h3,
.fr-homepage .fr-layout-market h3,
.fr-layout-chinese .fr-feature-large h3,
.fr-layout-drives .fr-feature-large h3,
.fr-layout-ranking h3,
.fr-layout-rankings h3,
.fr-layout-market h3 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 768px) {
/* Mobile: delikatny padding tekstu w tych samych sekcjach bez zmiany układu */
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-card-copy,
.fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy,
.fr-homepage .fr-layout-ranking .fr-card-copy,
.fr-homepage .fr-layout-rankings .fr-card-copy,
.fr-homepage .fr-layout-market .fr-card-copy,
.fr-layout-chinese .fr-feature-large .fr-card-copy,
.fr-layout-drives .fr-feature-large .fr-card-copy,
.fr-layout-ranking .fr-card-copy,
.fr-layout-rankings .fr-card-copy,
.fr-layout-market .fr-card-copy {
padding-left: 12px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
}
}
/* =========================================================
4rings.pl — neutralne paski shortcutów: chińskie marki + napędy
Zakres: tylko belka marek i skróty napędów na homepage
========================================================= */
/* Chińskie marki: spokojna, neutralna belka zamiast koloru działu */
.fr-layout-chinese .fr-brand-strip {
margin-top: 14px !important;
margin-bottom: 0 !important;
padding: 14px 16px !important;
border: 1px solid #e7e7e7 !important;
border-top: 1px solid #dddddd !important;
background: #f7f7f7 !important;
box-shadow: none !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
flex-wrap: wrap !important;
}
.fr-layout-chinese .fr-brand-strip > span,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts-label,
.fr-layout-chinese .fr-brand-label,
.fr-layout-chinese .fr-brand-strip-list .fr-brand-strip-label {
flex: 0 0 auto !important;
margin: 0 4px 0 0 !important;
color: #111 !important;
font-size: 17px !important;
line-height: 1.2 !important;
font-weight: 750 !important;
text-align: center !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts,
.fr-layout-chinese .fr-brand-list,
.fr-layout-chinese .fr-brand-strip-list {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
width: auto !important;
}
.fr-layout-chinese .fr-brand-strip a,
.fr-layout-chinese .fr-shortcuts a,
.fr-layout-chinese .fr-brand-list a,
.fr-layout-chinese .fr-brand-strip-list a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
min-height: 30px !important;
padding: 5px 10px 5px 8px !important;
border: 1px solid #dedede !important;
background: #fff !important;
color: #111 !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 750 !important;
text-decoration: none !important;
box-sizing: border-box !important;
box-shadow: none !important;
flex: 0 0 auto !important;
}
/* Placeholder pod przyszłe logotypy — neutralny, nie bordowy */
.fr-layout-chinese .fr-brand-strip a::before,
.fr-layout-chinese .fr-shortcuts a::before,
.fr-layout-chinese .fr-brand-list a::before,
.fr-layout-chinese .fr-brand-strip-list a::before {
content: "" !important;
display: inline-block !important;
width: 16px !important;
height: 16px !important;
flex: 0 0 16px !important;
border-radius: 50% !important;
border: 1px solid #cfcfcf !important;
background: linear-gradient(180deg, #ffffff 0%, #eeeeee 100%) !important;
box-shadow: inset 0 0 0 3px #f9f9f9 !important;
}
.fr-layout-chinese .fr-brand-strip a:hover,
.fr-layout-chinese .fr-shortcuts a:hover,
.fr-layout-chinese .fr-brand-list a:hover,
.fr-layout-chinese .fr-brand-strip-list a:hover {
border-color: #bdbdbd !important;
background: #f4f4f4 !important;
color: #111 !important;
transform: none !important;
box-shadow: none !important;
}
/* Napędy: neutralne, lekkie belki zamiast mocnego żółtego wyróżnienia */
.fr-layout-drives .fr-shortcuts,
.fr-layout-drives .fr-shortcuts-yellow {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 14px !important;
}
.fr-layout-drives .fr-shortcuts a,
.fr-layout-drives .fr-shortcuts-yellow a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
min-height: 32px !important;
padding: 7px 11px 7px 29px !important;
border: 1px solid #dedede !important;
background: #f7f7f7 !important;
color: #111 !important;
font-size: 12px !important;
line-height: 1.1 !important;
font-weight: 750 !important;
text-decoration: none !important;
box-shadow: none !important;
}
.fr-layout-drives .fr-shortcuts a::before,
.fr-layout-drives .fr-shortcuts-yellow a::before {
content: "" !important;
position: absolute !important;
left: 10px !important;
top: 50% !important;
width: 11px !important;
height: 11px !important;
transform: translateY(-50%) !important;
background: #6d6d6d !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: .9 !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
}
.fr-layout-drives .fr-shortcuts a:hover,
.fr-layout-drives .fr-shortcuts-yellow a:hover {
border-color: #c7c7c7 !important;
background: #eeeeee !important;
color: #111 !important;
transform: none !important;
box-shadow: none !important;
}
@media (max-width: 768px) {
.fr-layout-chinese .fr-brand-strip {
justify-content: center !important;
gap: 10px !important;
padding: 12px !important;
}
.fr-layout-chinese .fr-brand-strip > span,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts-label,
.fr-layout-chinese .fr-brand-label,
.fr-layout-chinese .fr-brand-strip-list .fr-brand-strip-label {
width: 100% !important;
margin: 0 !important;
font-size: 15px !important;
text-align: center !important;
}
.fr-layout-chinese .fr-shortcuts,
.fr-layout-chinese .fr-brand-strip .fr-shortcuts,
.fr-layout-chinese .fr-brand-list,
.fr-layout-chinese .fr-brand-strip-list,
.fr-layout-drives .fr-shortcuts,
.fr-layout-drives .fr-shortcuts-yellow {
justify-content: center !important;
}
}
/* =========================================================
4rings.pl — FINAL: kolory plakietek kategorii na homepage
Zakres: tylko kolor plakietek/badge. Bez zmian układu sekcji.
Zasada:
- HERO + NAJNOWSZE: kolor z kategorii artykułu (--badge-bg / --badge-fg z PHP)
- CHIŃSKIE MARKI: wszystkie plakietki bordowe
- TESTY: wszystkie plakietki niebieskie
- NAPĘDY: wszystkie plakietki żółte z ciemnym tekstem
- RANKINGI: wszystkie plakietki zielone
- PORADNIKI: wszystkie plakietki fioletowe
- RYNEK: wszystkie plakietki pomarańczowe
========================================================= */
.fr-homepage .fr-badge {
background: var(--badge-bg, #E12626) !important;
color: var(--badge-fg, #fff) !important;
border-color: var(--badge-bg, #E12626) !important;
}
.fr-homepage .fr-badge:hover {
color: var(--badge-fg, #fff) !important;
text-decoration: none !important;
filter: brightness(.94);
}
/* HERO — kolor plakietki z kategorii artykułu */
.fr-homepage .fr-hero .fr-badge,
.fr-homepage .fr-hero-card .fr-badge,
.fr-homepage .fr-hero-copy .fr-badge,
.fr-homepage .fr-hero-main .fr-badge,
.fr-homepage .fr-hero-side .fr-badge {
background: var(--badge-bg, #E12626) !important;
color: var(--badge-fg, #fff) !important;
border-color: var(--badge-bg, #E12626) !important;
}
/* NAJNOWSZE — kolor plakietki z kategorii artykułu */
.fr-homepage .fr-latest-grid .fr-badge,
.fr-homepage .fr-layout-latest .fr-badge,
.fr-homepage .fr-section-latest .fr-badge,
.fr-homepage .fr-latest-grid .fr-card-copy .fr-badge,
.fr-homepage .fr-latest-grid .fr-news-copy .fr-badge {
background: var(--badge-bg, #E12626) !important;
color: var(--badge-fg, #fff) !important;
border-color: var(--badge-bg, #E12626) !important;
}
/* CHIŃSKIE MARKI — zawsze kolor działu */
.fr-homepage .fr-layout-chinese .fr-badge,
.fr-homepage .fr-layout-chinese .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-chinese .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-chinese .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-chinese .fr-feature-large .fr-badge {
background: var(--badge-bg, #8B1E3F) !important;
color: var(--badge-fg, #ffffff) !important;
border-color: var(--badge-bg, #8B1E3F) !important;
}
/* TESTY — zawsze kolor działu */
.fr-homepage .fr-layout-tests .fr-badge,
.fr-homepage .fr-layout-tests .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-tests .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-tests .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-tests .fr-feature-large .fr-badge {
background: var(--badge-bg, #1565C0) !important;
color: var(--badge-fg, #ffffff) !important;
border-color: var(--badge-bg, #1565C0) !important;
}
/* NAPĘDY — zawsze kolor działu */
.fr-homepage .fr-layout-drives .fr-badge,
.fr-homepage .fr-layout-drives .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-drives .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-drives .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-drives .fr-feature-large .fr-badge {
background: var(--badge-bg, #FFC400) !important;
color: var(--badge-fg, #111111) !important;
border-color: var(--badge-bg, #FFC400) !important;
}
/* RANKINGI — zawsze kolor działu */
.fr-homepage .fr-layout-rankings .fr-badge,
.fr-homepage .fr-layout-ranking .fr-badge,
.fr-homepage .fr-layout-rankings .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-ranking .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-rankings .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-ranking .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-rankings .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-ranking .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-rankings .fr-feature-large .fr-badge,
.fr-homepage .fr-layout-ranking .fr-feature-large .fr-badge {
background: var(--badge-bg, #1E8E3E) !important;
color: var(--badge-fg, #ffffff) !important;
border-color: var(--badge-bg, #1E8E3E) !important;
}
/* PORADNIKI — zawsze kolor działu */
.fr-homepage .fr-layout-guides .fr-badge,
.fr-homepage .fr-layout-guides .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-guides .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-guides .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-guides .fr-feature-large .fr-badge {
background: var(--badge-bg, #5B3CC4) !important;
color: var(--badge-fg, #ffffff) !important;
border-color: var(--badge-bg, #5B3CC4) !important;
}
/* RYNEK — zawsze kolor działu */
.fr-homepage .fr-layout-market .fr-badge,
.fr-homepage .fr-layout-market .fr-card-copy .fr-badge,
.fr-homepage .fr-layout-market .fr-news-copy .fr-badge,
.fr-homepage .fr-layout-market .fr-feature-card .fr-badge,
.fr-homepage .fr-layout-market .fr-feature-large .fr-badge {
background: var(--badge-bg, #F57C00) !important;
color: var(--badge-fg, #ffffff) !important;
border-color: var(--badge-bg, #F57C00) !important;
}
/* =========================================================
4rings.pl — HOTFIX: Napędy mobile — duży boks jako pierwszy
Zakres: wyłącznie kolejność kart w sekcji Napędy na mobile/tablet.
========================================================= */
@media (max-width: 1024px) {
.fr-homepage .fr-layout-drives .fr-feature-grid {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.fr-homepage .fr-layout-drives .fr-feature-large {
order: 1 !important;
width: 100% !important;
grid-column: auto !important;
grid-row: auto !important;
}
.fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
order: 2 !important;
width: 100% !important;
}
}.fr-homepage .fr-ad-box {
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
background: #f3f3f3 !important;
border: 1px solid #eeeeee !important;
box-sizing: border-box !important;
overflow: hidden !important;
}.fr-ad-top,
.fr-ad-mobile-mid,
.fr-ad-after-chinese,
.fr-ad-after-drives,
.fr-ad-before-market,
.fr-ad-footer {
display: none !important;
}
@media (min-width: 769px) {}
@media (max-width: 768px) {
.fr-homepage .fr-ad {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 28px auto !important;
padding: 0 !important;
}
.fr-homepage .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}}
/* =========================================================
HOTFIX — desktop placeholder above Hero
Visible only on desktop/tablet. Hidden on mobile to preserve the agreed mobile order.
========================================================= */
@media (max-width: 768px) {
.fr-homepage .fr-ad-before-hero {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
}
/* =========================================================
4rings.pl — HOMEPAGE DESKTOP WIDTH HARD FIX
Tylko strona główna / page 39740
========================================================= */
@media (min-width: 1024px) {
body.home,
body.front-page,
body.page-id-39740 {
overflow-x: hidden;
}
body.home .site-content,
body.front-page .site-content,
body.page-id-39740 .site-content,
body.home .site-content.grid-container,
body.front-page .site-content.grid-container,
body.page-id-39740 .site-content.grid-container,
body.home #page,
body.front-page #page,
body.page-id-39740 #page,
body.home #content,
body.front-page #content,
body.page-id-39740 #content,
body.home #primary,
body.front-page #primary,
body.page-id-39740 #primary,
body.home #main,
body.front-page #main,
body.page-id-39740 #main,
body.home article#post-39740,
body.front-page article#post-39740,
body.page-id-39740 article#post-39740,
body.home article#post-39740 .inside-article,
body.front-page article#post-39740 .inside-article,
body.page-id-39740 article#post-39740 .inside-article,
body.home article#post-39740 .entry-content,
body.front-page article#post-39740 .entry-content,
body.page-id-39740 article#post-39740 .entry-content {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
}
body.home article#post-39740 .fr-homepage,
body.front-page article#post-39740 .fr-homepage,
body.page-id-39740 article#post-39740 .fr-homepage {
width: 100% !important;
max-width: none !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-homepage > .fr-wrap,
body.front-page article#post-39740 .fr-homepage > .fr-wrap,
body.page-id-39740 article#post-39740 .fr-homepage > .fr-wrap {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-today-bar,
body.front-page article#post-39740 .fr-today-bar,
body.page-id-39740 article#post-39740 .fr-today-bar,
body.home article#post-39740 .fr-hero-block,
body.front-page article#post-39740 .fr-hero-block,
body.page-id-39740 article#post-39740 .fr-hero-block,
body.home article#post-39740 .fr-top-grid,
body.front-page article#post-39740 .fr-top-grid,
body.page-id-39740 article#post-39740 .fr-top-grid,
body.home article#post-39740 .fr-section,
body.front-page article#post-39740 .fr-section,
body.page-id-39740 article#post-39740 .fr-section,
body.home article#post-39740 .fr-section-inner,
body.front-page article#post-39740 .fr-section-inner,
body.page-id-39740 article#post-39740 .fr-section-inner {
width: 100% !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-hero-block.fr-top-grid,
body.front-page article#post-39740 .fr-hero-block.fr-top-grid,
body.page-id-39740 article#post-39740 .fr-hero-block.fr-top-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr) !important;
gap: 16px !important;
width: 100% !important;
max-width: 1240px !important;
}
body.home article#post-39740 .fr-ad,
body.front-page article#post-39740 .fr-ad,
body.page-id-39740 article#post-39740 .fr-ad,
body.home article#post-39740 .fr-ad-box,
body.front-page article#post-39740 .fr-ad-box,
body.page-id-39740 article#post-39740 .fr-ad-box,
body.home article#post-39740 .fr-ad-placeholder,
body.front-page article#post-39740 .fr-ad-placeholder,
body.page-id-39740 article#post-39740 .fr-ad-placeholder {
width: min(970px, 100%) !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (min-width: 1440px) {
body.home article#post-39740 .fr-homepage > .fr-wrap,
body.front-page article#post-39740 .fr-homepage > .fr-wrap,
body.page-id-39740 article#post-39740 .fr-homepage > .fr-wrap,
body.home article#post-39740 .fr-today-bar,
body.front-page article#post-39740 .fr-today-bar,
body.page-id-39740 article#post-39740 .fr-today-bar,
body.home article#post-39740 .fr-hero-block,
body.front-page article#post-39740 .fr-hero-block,
body.page-id-39740 article#post-39740 .fr-hero-block,
body.home article#post-39740 .fr-top-grid,
body.front-page article#post-39740 .fr-top-grid,
body.page-id-39740 article#post-39740 .fr-top-grid,
body.home article#post-39740 .fr-section,
body.front-page article#post-39740 .fr-section,
body.page-id-39740 article#post-39740 .fr-section,
body.home article#post-39740 .fr-section-inner,
body.front-page article#post-39740 .fr-section-inner,
body.page-id-39740 article#post-39740 .fr-section-inner {
width: min(1320px, calc(100vw - 96px)) !important;
max-width: 1320px !important;
}
}
/* =========================================================
4rings.pl — HERO WIDTH FINAL FIX DESKTOP
Poszerza tylko moduł hero na stronie głównej
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-hero-block,
body.front-page article#post-39740 .fr-homepage .fr-hero-block,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-block,
body.home article#post-39740 .fr-homepage .fr-top-grid,
body.front-page article#post-39740 .fr-homepage .fr-top-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-top-grid {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid,
body.front-page article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
gap: 18px !important;
align-items: stretch !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-main,
body.front-page article#post-39740 .fr-homepage .fr-hero-main,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-main {
width: 100% !important;
max-width: none !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-side,
body.front-page article#post-39740 .fr-homepage .fr-hero-side,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side {
width: 100% !important;
max-width: none !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-main img,
body.front-page article#post-39740 .fr-homepage .fr-hero-main img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-main img,
body.home article#post-39740 .fr-homepage .fr-hero-side img,
body.front-page article#post-39740 .fr-homepage .fr-hero-side img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* =========================================================
4rings.pl — HERO WIDTH FINAL FIX DESKTOP
Poszerza tylko moduł hero na stronie głównej
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-hero-block,
body.front-page article#post-39740 .fr-homepage .fr-hero-block,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-block,
body.home article#post-39740 .fr-homepage .fr-top-grid,
body.front-page article#post-39740 .fr-homepage .fr-top-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-top-grid {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid,
body.front-page article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-block.fr-top-grid {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
gap: 18px !important;
align-items: stretch !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-main,
body.front-page article#post-39740 .fr-homepage .fr-hero-main,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-main {
width: 100% !important;
max-width: none !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-side,
body.front-page article#post-39740 .fr-homepage .fr-hero-side,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side {
width: 100% !important;
max-width: none !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-main img,
body.front-page article#post-39740 .fr-homepage .fr-hero-main img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-main img,
body.home article#post-39740 .fr-homepage .fr-hero-side img,
body.front-page article#post-39740 .fr-homepage .fr-hero-side img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
/* =========================================================
4rings.pl — REAL HERO WIDTH FIX
Realny wrapper z DOM: .fr-hero
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-hero,
body.front-page article#post-39740 .fr-homepage .fr-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
gap: 18px !important;
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
align-items: stretch !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-main,
body.front-page article#post-39740 .fr-homepage .fr-hero-main,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-main,
body.home article#post-39740 .fr-homepage .fr-main-hero,
body.front-page article#post-39740 .fr-homepage .fr-main-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-side,
body.front-page article#post-39740 .fr-homepage .fr-hero-side,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side,
body.home article#post-39740 .fr-homepage .fr-side-grid,
body.front-page article#post-39740 .fr-homepage .fr-side-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-side-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-card,
body.front-page article#post-39740 .fr-homepage .fr-hero-card,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-card,
body.home article#post-39740 .fr-homepage .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-link {
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link {
min-height: 430px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link {
min-height: 206px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero img,
body.front-page article#post-39740 .fr-homepage .fr-hero img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero img,
body.home article#post-39740 .fr-homepage .fr-img,
body.front-page article#post-39740 .fr-homepage .fr-img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
}
@media (min-width: 1440px) {
body.home article#post-39740 .fr-homepage .fr-hero,
body.front-page article#post-39740 .fr-homepage .fr-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero {
width: min(1320px, calc(100vw - 96px)) !important;
max-width: 1320px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-link {
min-height: 460px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-link {
min-height: 221px !important;
}
}
/* =========================================================
4rings.pl — HERO PROPORTION FIX AFTER WIDTH EXPAND
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-hero,
body.front-page article#post-39740 .fr-homepage .fr-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr) !important;
gap: 18px !important;
align-items: stretch !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero,
body.front-page article#post-39740 .fr-homepage .fr-main-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero {
height: 440px !important;
min-height: 440px !important;
max-height: 440px !important;
overflow: hidden !important;
}
body.home article#post-39740 .fr-homepage .fr-side-grid,
body.front-page article#post-39740 .fr-homepage .fr-side-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-side-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
height: 440px !important;
min-height: 440px !important;
max-height: 440px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small,
body.front-page article#post-39740 .fr-homepage .fr-hero-small,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small {
height: 211px !important;
min-height: 211px !important;
max-height: 211px !important;
overflow: hidden !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-link,
body.front-page article#post-39740 .fr-homepage .fr-hero-link,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-link {
position: relative !important;
display: block !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
body.home article#post-39740 .fr-homepage .fr-hero img,
body.front-page article#post-39740 .fr-homepage .fr-hero img,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy {
left: 28px !important;
right: 28px !important;
bottom: 26px !important;
max-width: 760px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(34px, 2.7vw, 48px) !important;
line-height: 0.98 !important;
letter-spacing: -.018em !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 22px !important;
line-height: 1.02 !important;
letter-spacing: -.014em !important;
}
}
@media (min-width: 1440px) {
body.home article#post-39740 .fr-homepage .fr-hero,
body.front-page article#post-39740 .fr-homepage .fr-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero {
width: min(1320px, calc(100vw - 96px)) !important;
max-width: 1320px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero,
body.front-page article#post-39740 .fr-homepage .fr-main-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero,
body.home article#post-39740 .fr-homepage .fr-side-grid,
body.front-page article#post-39740 .fr-homepage .fr-side-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-side-grid {
height: 460px !important;
min-height: 460px !important;
max-height: 460px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small,
body.front-page article#post-39740 .fr-homepage .fr-hero-small,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small {
height: 221px !important;
min-height: 221px !important;
max-height: 221px !important;
}
}
/* =========================================================
4rings.pl — HERO FINAL POLISH
Zmniejsza pustą przestrzeń i naprawia ucinany tytuł
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-ad-before-hero,
body.front-page article#post-39740 .fr-homepage .fr-ad-before-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-ad-before-hero {
margin-bottom: 44px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero,
body.front-page article#post-39740 .fr-homepage .fr-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero {
margin-top: 0 !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero,
body.front-page article#post-39740 .fr-homepage .fr-main-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero,
body.home article#post-39740 .fr-homepage .fr-side-grid,
body.front-page article#post-39740 .fr-homepage .fr-side-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-side-grid {
height: 420px !important;
min-height: 420px !important;
max-height: 420px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small,
body.front-page article#post-39740 .fr-homepage .fr-hero-small,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small {
height: 201px !important;
min-height: 201px !important;
max-height: 201px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy {
left: 28px !important;
right: 28px !important;
bottom: 28px !important;
max-width: 720px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(32px, 2.25vw, 42px) !important;
line-height: 1.02 !important;
letter-spacing: -.018em !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-badge,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-badge,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-badge {
margin-bottom: 10px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy {
left: 16px !important;
right: 16px !important;
bottom: 14px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 20px !important;
line-height: 1.04 !important;
}
}
/* =========================================================
4rings.pl — HERO TEXT FINAL FIX
Naprawa ucinania tytułu i meta w głównym hero
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-main-hero,
body.front-page article#post-39740 .fr-homepage .fr-main-hero,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero {
height: 450px !important;
min-height: 450px !important;
max-height: 450px !important;
overflow: hidden !important;
}
body.home article#post-39740 .fr-homepage .fr-side-grid,
body.front-page article#post-39740 .fr-homepage .fr-side-grid,
body.page-id-39740 article#post-39740 .fr-homepage .fr-side-grid {
height: 450px !important;
min-height: 450px !important;
max-height: 450px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small,
body.front-page article#post-39740 .fr-homepage .fr-hero-small,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small {
height: 216px !important;
min-height: 216px !important;
max-height: 216px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy {
left: 28px !important;
right: 28px !important;
bottom: 42px !important;
max-width: 760px !important;
transform: none !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: clamp(34px, 2.45vw, 46px) !important;
line-height: 1.04 !important;
letter-spacing: -.018em !important;
max-height: none !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-meta,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-meta,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-meta {
display: block !important;
margin-top: 10px !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
}
/* =========================================================
4rings.pl — HERO TITLE DESCENDERS FIX
Naprawa minimalnego ucinania liter typu y/g/j/p
========================================================= */
@media (min-width: 1024px) {
body.home article#post-39740 .fr-homepage .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-copy {
overflow: visible !important;
padding-bottom: 4px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-hero-copy strong {
line-height: 1.08 !important;
padding-bottom: 4px !important;
margin-bottom: 2px !important;
}
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-hero-copy strong {
line-height: 1.09 !important;
padding-bottom: 4px !important;
margin-bottom: 2px !important;
}
body.home article#post-39740 .fr-homepage .fr-main-hero .fr-meta,
body.front-page article#post-39740 .fr-homepage .fr-main-hero .fr-meta,
body.page-id-39740 article#post-39740 .fr-homepage .fr-main-hero .fr-meta,
body.home article#post-39740 .fr-homepage .fr-hero-small .fr-meta,
body.front-page article#post-39740 .fr-homepage .fr-hero-small .fr-meta,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-small .fr-meta {
line-height: 1.35 !important;
padding-bottom: 2px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE FULLER TITLES
Mniej agresywne skracanie tytułów
========================================================= */
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.18 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3 a,
body.fr-home-active .fr-homepage .fr-news-copy h3 a,
body.fr-home-active .fr-homepage .fr-feature-card h3 a,
body.fr-home-active .fr-homepage .fr-hero-copy strong a {
line-height: inherit !important;
padding-bottom: 0.08em !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.22 !important;
padding-bottom: 0.10em !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE CONTROLLED TITLES
Pełniejsze tytuły, ale bez rozwalania małych kart
========================================================= */
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.18 !important;
padding-bottom: 0.08em !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.22 !important;
padding-bottom: 0.10em !important;
}
}
/* =========================================================
4RINGS — RANKINGS NUMBER BADGES INSIDE IMAGES
Numery 1–4 wewnątrz lewego górnego narożnika zdjęć
========================================================= */
/* Wyłączamy stare numerki wychodzące poza zdjęcia, powiązane z całym boksem */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::before {
display: none !important;
content: none !important;
}
/* Przenosimy generowanie numerów (jeśli są dodawane przez CSS) stricte do kontenera zdjęcia */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card {
counter-increment: ranking-counter;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image {
position: relative !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img {
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before {
content: counter(ranking-counter) !important;
}
/* Łapiemy wszystkie formaty numerków (wygenerowane CSS-em oraz wstawione przez HTML) i przypinamy w 0/0 kontenera obrazka */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
margin: 0 !important;
transform: none !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number {
top: 0 !important;
left: 0 !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
font-size: 12px !important;
line-height: 1 !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;
}
}
/* =========================================================
4RINGS — RANKING FEATURED CONTENT PADDING
Odsunięcie treści pod głównym zdjęciem w sekcji Rankingi
========================================================= */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 18px !important;
padding-right: 18px !important;
padding-bottom: 18px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
4RINGS — MOBILE TESTS SECTION FIX
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge {
font-size: 9px !important;
padding: 4px 6px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
}
}
/* =========================================================
4RINGS — MOBILE DRIVES SMALL CARDS FIX
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* =========================================================
4RINGS — MOBILE RANKING LIST FIX
Pierwszy duży, pozycje 2–4 jako lista z kontrolą tytułów
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
font-size: 9px !important;
padding: 4px 6px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
}
}
/* =========================================================
4RINGS — MOBILE GUIDES FEATURED LAYOUT
1 duży + 3 mniejsze
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* =========================================================
4RINGS — MOBILE MARKET FEATURED LAYOUT
1 duży + 2 mniejsze
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* =========================================================
4RINGS — DRIVE CHIPS LIGHT FINAL
Napędy: subtelna belka bez ciężkich żółtych boxów
========================================================= */
.fr-layout-drives .fr-drive-strip {
margin-top: 14px !important;
padding: 10px 0 0 !important;
border-top: 1px solid #eeeeee !important;
overflow: hidden !important;
}
.fr-layout-drives .fr-drive-strip__inner {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
}
.fr-layout-drives .fr-drive-chip {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
height: auto !important;
flex: 1 1 calc(25% - 8px) !important;
padding: 6px 9px !important;
border: 1px solid #e6e6e6 !important;
border-bottom: 2px solid #FFC400 !important;
background: #ffffff !important;
color: #111111 !important;
text-decoration: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition: border-color .16s ease, background-color .16s ease !important;
}
.fr-layout-drives .fr-drive-chip:hover {
border-color: #d8b300 !important;
background: #fffdf3 !important;
color: #111111 !important;
transform: none !important;
}
.fr-layout-drives .fr-drive-chip__code {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
padding: 2px 5px !important;
background: transparent !important;
color: #111111 !important;
border-left: 3px solid #FFC400 !important;
font-size: 10.5px !important;
line-height: 1 !important;
font-weight: 760 !important;
letter-spacing: 0.040em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
}
.fr-layout-drives .fr-drive-chip__label {
min-width: 0 !important;
flex: 1 1 auto !important;
color: #111111 !important;
font-size: 12.5px !important;
line-height: 1.15 !important;
font-weight: 650 !important;
white-space: normal !important;
}
.fr-layout-drives .fr-drive-chip__arrow {
flex: 0 0 auto !important;
color: #8a6d00 !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 700 !important;
margin-left: auto !important;
opacity: .75 !important;
}
/* wyłącz stare kropki/ikony i duże żółte pola */
.fr-layout-drives .fr-drive-chip::before,
.fr-layout-drives .fr-shortcuts a::before,
.fr-layout-drives .fr-shortcuts-yellow a::before {
content: none !important;
display: none !important;
}
/* fallback dla starych shortcutów */
.fr-layout-drives .fr-shortcuts,
.fr-layout-drives .fr-shortcuts-yellow {
margin-top: 14px !important;
gap: 8px !important;
}
.fr-layout-drives .fr-shortcuts a,
.fr-layout-drives .fr-shortcuts-yellow a {
min-height: 36px !important;
padding: 6px 9px !important;
border: 1px solid #e6e6e6 !important;
border-bottom: 2px solid #FFC400 !important;
background: #ffffff !important;
color: #111111 !important;
font-size: 12.5px !important;
font-weight: 650 !important;
box-shadow: none !important;
}
.fr-layout-drives .fr-shortcuts a:hover,
.fr-layout-drives .fr-shortcuts-yellow a:hover {
border-color: #d8b300 !important;
background: #fffdf3 !important;
color: #111111 !important;
transform: none !important;
}
@media (max-width: 768px) {
.fr-layout-drives .fr-drive-strip {
margin-top: 12px !important;
padding: 8px 0 2px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.fr-layout-drives .fr-drive-strip::-webkit-scrollbar {
display: none !important;
}
.fr-layout-drives .fr-drive-strip__inner {
flex-wrap: nowrap !important;
gap: 8px !important;
width: max-content !important;
min-width: 100% !important;
}
.fr-layout-drives .fr-drive-chip {
flex: 0 0 164px !important;
width: 164px !important;
min-height: 40px !important;
padding: 6px 8px !important;
}
.fr-layout-drives .fr-drive-chip__code {
font-size: 10px !important;
padding: 2px 4px !important;
border-left-width: 3px !important;
}
.fr-layout-drives .fr-drive-chip__label {
font-size: 12px !important;
line-height: 1.15 !important;
}
.fr-layout-drives .fr-drive-chip__arrow {
font-size: 11px !important;
}
}
@media (min-width: 769px) and (max-width: 1120px) {
.fr-layout-drives .fr-drive-chip {
flex-basis: calc(50% - 8px) !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE UPGRADE 2026
Najnowsze feed / Chinese premium hub / Evergreen block
========================================================= */
/* --- ZADANIE 5: Ostre krawędzie --- */
body.fr-home-active .fr-homepage img,
body.fr-home-active .fr-homepage .fr-card,
body.fr-home-active .fr-homepage .fr-feature-card,
body.fr-home-active .fr-homepage .fr-hero-card,
body.fr-home-active .fr-homepage .fr-img {
border-radius: 0 !important;
}
/* --- ZADANIE 1: Najnowsze jako Newsowy Feed --- */
/* Wymuszamy max 6 wpisów (jeśli PHP renderuje więcej) */
body.fr-home-active .fr-homepage .fr-latest-grid > *:nth-child(n+7) {
display: none !important;
}
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-latest-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card,
body.fr-home-active .fr-homepage .fr-latest-grid article {
display: grid !important;
grid-template-columns: 320px 1fr !important;
gap: 24px !important;
align-items: center !important;
padding-bottom: 22px !important;
border-bottom: 1px solid #eaeaea !important;
border-radius: 0 !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card:last-child,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card:last-child,
body.fr-home-active .fr-homepage .fr-latest-grid article:last-child {
border-bottom: none !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card-image,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-news-image {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
margin: 0 !important;
border-radius: 0 !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-news-copy {
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid h3 {
font-size: 22px !important;
line-height: 1.25 !important;
margin: 8px 0 !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid p,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-excerpt {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 15px !important;
line-height: 1.45 !important;
color: #555 !important;
margin: 0 0 8px !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
body.fr-home-active .fr-homepage .fr-latest-grid {
grid-template-columns: 1fr !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card,
body.fr-home-active .fr-homepage .fr-latest-grid article {
display: grid !important;
grid-template-columns: 240px 1fr !important;
gap: 20px !important;
align-items: center !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #eaeaea !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card,
body.fr-home-active .fr-homepage .fr-latest-grid article {
display: flex !important;
flex-direction: column !important;
padding-bottom: 18px !important;
border-bottom: 1px solid #eaeaea !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid h3 {
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid p {
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
}
/* --- ZADANIE 2: Chińskie marki jako Premium Dark Hub --- */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
background: #121212 !important;
color: #f5f5f5 !important;
padding: 44px 0 !important;
margin: 48px 0 !important;
box-shadow: 0 0 0 100vmax #121212 !important;
clip-path: inset(0 -100vmax) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head h2 {
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head a {
color: #ffffff !important;
opacity: 0.8 !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head a:hover {
opacity: 1 !important;
color: #8B1E3F !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:last-child,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese h3,
body.fr-home-active .fr-homepage .fr-layout-chinese h3 a {
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese p,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,0.7) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-badge {
background: #8B1E3F !important;
color: #ffffff !important;
border-color: #8B1E3F !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
background: transparent !important;
border: none !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
margin-top: 24px !important;
padding-top: 24px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip > span {
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.15) !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover {
background: rgba(255,255,255,0.1) !important;
border-color: #8B1E3F !important;
border-bottom-color: #8B1E3F !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding: 32px 0 !important;
margin: 36px 0 !important;
}
}
/* --- ZADANIE 3: Warto przeczytać (Evergreen Section) --- */
.fr-evergreen-section { margin: 48px 0 !important; }
.fr-evergreen-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 24px !important; align-items: stretch !important; }
.fr-evergreen-card { display: flex !important; flex-direction: column !important; border: none !important; background: #fff !important; border-bottom: 1px solid #eaeaea !important; padding-bottom: 16px !important; border-radius: 0 !important; }
.fr-evergreen-card .fr-card-image { width: 100% !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; margin-bottom: 12px !important; border-radius: 0 !important; }
.fr-evergreen-card .fr-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
.fr-evergreen-card .fr-card-copy { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; padding: 0 4px !important; }
.fr-evergreen-card h3 { font-size: 17px !important; line-height: 1.25 !important; font-weight: 800 !important; margin: 0 0 8px !important; color: #111 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
@media (min-width: 769px) and (max-width: 1024px) { .fr-evergreen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 768px) { .fr-evergreen-grid { grid-template-columns: 1fr !important; gap: 20px !important; } .fr-evergreen-card { display: grid !important; grid-template-columns: 116px minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; padding: 12px 0 !important; border-bottom: 1px solid #eeeeee !important; } .fr-evergreen-card .fr-card-image { margin: 0 !important; width: 116px !important; height: 78px !important; } .fr-evergreen-card .fr-card-copy { padding: 0 !important; } .fr-evergreen-card h3 { font-size: 14px !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; margin: 0 0 6px !important; } }
/* --- ZADANIE 4: Zobacz starsze artykuły --- */
.fr-older-posts { display: flex !important; justify-content: center !important; margin: 56px 0 !important; width: 100% !important; }
.fr-older-posts a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; padding: 0 32px !important; border: 2px solid #111 !important; background: transparent !important; color: #111 !important; font-size: 15px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.040em !important; text-decoration: none !important; border-radius: 0 !important; transition: background-color 0.2s ease, color 0.2s ease !important; }
.fr-older-posts a:hover, .fr-older-posts a:focus { background: #111 !important; color: #fff !important; outline: none !important; }
@media (max-width: 768px) { .fr-older-posts { margin: 40px 0 !important; padding: 0 16px !important; box-sizing: border-box !important; } .fr-older-posts a { width: 100% !important; max-width: 360px !important; } }
/* =========================================================
4RINGS — HOMEPAGE VERTICAL RHYTHM COMPACT v68
Zakres: tylko strona główna / odstępy pionowe między sekcjami.
Cel: skasować nadmiar wolnego miejsca bez ruszania układów kart,
headera, mobile menu, single, archiwów ani reklamowych wymiarów.
Zasada: reklamy/placeholdery zachowują stabilne wymiary, tniemy
tylko marginesy i paddingi wokół sekcji.
========================================================= */
@media (min-width: 769px) {
/* 1) HERO bliżej górnego placeholdera */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-top {
margin-bottom: 18px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
/* 2) HERO -> placeholder nad Najnowsze */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
/* 3) Placeholder -> Najnowsze */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest + .fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section {
margin-bottom: 18px !important;
padding-bottom: 0 !important;
}
/* 4) Najnowsze -> placeholder po Najnowsze -> Chińskie marki */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest {
margin-top: 14px !important;
margin-bottom: 14px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest + .fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-chinese {
margin-top: 0 !important;
}
/* 5) Sam dark hub Chińskie marki — utrzymujemy naprawę z v67 */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding-top: 12px !important;
padding-block-start: 12px !important;
padding-bottom: 34px !important;
padding-block-end: 34px !important;
margin-bottom: 20px !important;
}
html body.fr-home-active .fr-homepage .fr-layout-chinese > .fr-section-head {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 18px !important;
}
/* 6) Chińskie marki -> Warto przeczytać */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-layout-chinese + .fr-home-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading {
margin-top: 20px !important;
padding-top: 0 !important;
margin-bottom: 20px !important;
}
/* 7) Warto przeczytać -> placeholder -> Testy samochodów */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading + .fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 22px !important;
}
/* 8) Testy samochodów -> Napędy */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-layout-tests + .fr-layout-drives,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives {
margin-top: 20px !important;
padding-top: 0 !important;
margin-bottom: 22px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
/* 9) Placeholder -> Rankingi */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives + .fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 22px !important;
}
/* 10) Rankingi -> Poradniki */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-rankings-fresh + .fr-layout-guides,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides {
margin-top: 20px !important;
padding-top: 0 !important;
margin-bottom: 20px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides {
margin-top: 18px !important;
margin-bottom: 18px !important;
}
/* 11) Placeholder -> Rynek */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides + .fr-layout-market,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 26px !important;
}
/* 12) Nagłówki sekcji ciaśniej, bez zmiany typografii */
html body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) > .fr-section-head {
margin-bottom: 18px !important;
}
html body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) > .fr-section-head h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
@media (max-width: 768px) {
/* Mobile — ostrożniej, żeby nie skleić kart */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-top {
margin-bottom: 14px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides {
margin-top: 14px !important;
margin-bottom: 14px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market {
margin-top: 16px !important;
margin-bottom: 18px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding-top: 14px !important;
padding-block-start: 14px !important;
padding-bottom: 28px !important;
padding-block-end: 28px !important;
margin-top: 14px !important;
margin-bottom: 18px !important;
}
html body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) > .fr-section-head {
margin-bottom: 14px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE VERTICAL RHYTHM COMPACT v68
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE FINAL ETAP 1/2 PATCH v68
Zakres: bez rewolucji wizualnej.
Cel:
- zabezpieczenie siatek, gdy staging ma chwilowo mniej wpisów w kategorii,
- brak zmiany typografii,
- brak ruszania finalnego bloku Rankingi mobile final.
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
grid-auto-flow: row !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card {
align-self: stretch !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE FINAL ETAP 1/2 PATCH v68
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE CONTENT GUTTER FIX v70
Zakres: tylko mobile homepage.
Cel:
- sekcje Najnowsze, Warto przeczytać, Testy, Napędy,
Rankingi, Poradniki i Rynek nie dotykają krawędzi ekranu,
- zachować zwarte odstępy z v69,
- nie ruszać desktopu, headera, menu, single, archiwów,
- nie łamać finalnego bloku Rankingi mobile final.
========================================================= */
@media (max-width: 768px) {
/* Globalny bezpieczny gutter dla głównych sekcji homepage */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section:not(.fr-hero-block):not(.fr-layout-chinese),
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market {
width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Wewnętrzne gridy/listy nie mogą wychodzić poza zwężoną sekcję */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section:not(.fr-hero-block):not(.fr-layout-chinese) > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides > *,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Placeholdery reklamowe również mają ten sam gutter co sekcje */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-top,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides {
width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Ciemny hub Chińskie marki zostaje pełniejszy wizualnie, ale nie może wystawać */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Hero zostawiamy jak był, ale pilnujemy, żeby nie wystawał poza ekran */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block {
width: calc(100% - 28px) !important;
max-width: calc(100% - 28px) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
}
/* Bardzo wąskie telefony — odrobinę mniejszy gutter */
@media (max-width: 380px) {
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section:not(.fr-hero-block):not(.fr-layout-chinese),
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad,
html body.fr-home-active .fr-homepage .fr-wrap > div[class*="fr-ad"] {
width: calc(100% - 22px) !important;
max-width: calc(100% - 22px) !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE MOBILE CONTENT GUTTER FIX v70
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE VERTICAL RHYTHM + AD WIDTH FIX v69
Zakres: tylko mobile homepage.
Cel:
- ciaśniejsze odstępy między sekcjami na mobile,
- placeholdery reklamowe nie wystają poza kolumnę / boxy treści,
- bez zmian desktopu, headera, menu, single, archiwów,
- bez ruszania finalnego bloku Rankingi mobile final.
========================================================= */
@media (max-width: 768px) {
/* Mobilna kolumna homepage — wspólna szerokość dla sekcji i reklam */
html body.fr-home-active .fr-homepage .fr-wrap {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Wszystkie mobilne sekcje mają trzymać tę samą szerokość kolumny */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > div[class*="fr-ad"] {
box-sizing: border-box !important;
max-width: 100% !important;
}
/* Placeholdery reklamowe — nie mogą wystawać poza kolumnę */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-top,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Jeżeli reklama ma wewnętrzny kontener / pseudo-box, też pilnujemy szerokości */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad *,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad::before,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad::after {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* HERO bliżej górnego placeholdera */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-top {
margin-top: 8px !important;
margin-bottom: 10px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block {
margin-top: 0 !important;
margin-bottom: 12px !important;
}
/* Placeholder pod HERO i wejście w Najnowsze */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest {
margin-top: 10px !important;
margin-bottom: 12px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-before-latest + .fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Główne sekcje mobile — ciaśniej między blokami */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-latest-section,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-home-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-drives,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-guides,
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-layout-market {
margin-top: 10px !important;
margin-bottom: 12px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Reklamy między sekcjami — zostają stabilne, ale bez nadmiaru marginesów */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides {
margin-top: 10px !important;
margin-bottom: 12px !important;
}
/* Placeholder -> sekcja po nim */
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-latest + .fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-worth-reading + .fr-layout-tests,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-drives + .fr-rankings-fresh,
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad-after-guides + .fr-layout-market {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Chińskie marki — utrzymujemy naprawę czarnej pustej przestrzeni */
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
margin-top: 10px !important;
margin-bottom: 12px !important;
padding-top: 10px !important;
padding-block-start: 10px !important;
padding-bottom: 24px !important;
padding-block-end: 24px !important;
}
html body.fr-home-active .fr-homepage .fr-layout-chinese > .fr-section-head {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 12px !important;
}
html body.fr-home-active .fr-homepage .fr-layout-chinese > .fr-section-head h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Nagłówki sekcji ciaśniej */
html body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) > .fr-section-head {
margin-top: 0 !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
}
html body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) > .fr-section-head h2 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Dolny przycisk / końcówka rynku bez dużego oddechu */
html body.fr-home-active .fr-homepage .fr-layout-market {
margin-bottom: 16px !important;
}
}
/* Bardzo wąskie telefony — dodatkowa asekuracja przed wystawaniem reklam */
@media (max-width: 420px) {
html body.fr-home-active .fr-homepage .fr-wrap > .fr-ad,
html body.fr-home-active .fr-homepage .fr-wrap > div[class*="fr-ad"] {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE MOBILE VERTICAL RHYTHM + AD WIDTH FIX v69
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE SECONDARY TITLES FINAL v7
Cel: delikatniejsze tytuły tylko w drugorzędnych sekcjach
Zakres: Warto przeczytać / Testy / Poradniki / Rynek; bez Hero,
bez Najnowszych, bez Chińskich marek, bez Napędów i bez Rankingi mobile final.
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-home-worth-reading :is(h3,.fr-card-title,.fr-post-title),
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy :is(h3,.fr-card-title,.fr-post-title),
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy :is(h3,.fr-card-title,.fr-post-title),
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy :is(h3,.fr-card-title,.fr-post-title) {
font-weight: 650 !important;
letter-spacing: -0.006em !important;
line-height: 1.22 !important;
}
body.fr-home-active .fr-homepage .fr-home-worth-reading :is(h3,.fr-card-title,.fr-post-title) {
font-size: 16.5px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy :is(h3,.fr-card-title,.fr-post-title),
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy :is(h3,.fr-card-title,.fr-post-title),
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy :is(h3,.fr-card-title,.fr-post-title) {
font-size: 17px !important;
}
}
/* =========================================================
RANKINGI MOBILE FINAL LOCK
Testy samochodów: 2 duże karty na mobile
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card {
display: block !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 0 18px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:nth-child(n+3) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3 {
font-size: 18px !important;
line-height: 1.18 !important;
font-weight: 760 !important;
margin: 0 0 7px !important;
padding-bottom: 0.08em !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta {
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 5px !important;
color: #666666 !important;
}
}
/* =========================================================
4RINGS — MOBILE LOWER SECTIONS READABILITY FIX
Testy / Poradniki / Rynek
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-market .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-market .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — MOBILE DRIVES SMALL CARDS FIX
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — MOBILE RANKING LIST FIX
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — MOBILE LOWER SECTIONS READABILITY FIX
Testy / Napędy / Rankingi / Poradniki / Rynek
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-market .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-market .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE TITLE DESCENDER SAFE FIX
Bez zmiany layoutu kart
========================================================= */
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-day-card h1,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
text-rendering: auto !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-hero-copy strong {
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-day-card h1,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.18 !important;
padding-bottom: 0.08em !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE BADGES FINAL LOCK
Ujednolicenie plakietek kategorii na homepage
========================================================= */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-hero-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage span[class*="fr-cat-"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-width: 0 !important;
min-height: 20px !important;
height: auto !important;
padding: 5px 8px !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10.5px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: 0.035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
transform: none !important;
}
/* HERO — lekko większa plakietka, ale nadal ten sam styl */
body.fr-home-active .fr-homepage .fr-hero-copy .fr-badge {
min-height: 22px !important;
padding: 6px 9px !important;
font-size: 11px !important;
font-weight: 750 !important;
}
/* MOBILE — bez pogrubiania i bez różnic między sekcjami */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage span[class*="fr-cat-"] {
min-height: 20px !important;
padding: 5px 8px !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: 0.035em !important;
}
}
/* Kolory kategorii — dostępne warianty WCAG */
body.fr-home-active .fr-homepage .fr-cat-aktualnosci,
body.fr-home-active .fr-homepage .fr-cat-premiery-samochodow,
body.fr-home-active .fr-homepage .fr-cat-przepisy-drogowe,
body.fr-home-active .fr-homepage .fr-cat-faceliftingi,
body.fr-home-active .fr-homepage .fr-cat-producenci-i-firmy {
--badge-bg: #E12626 !important;
--badge-fg: #ffffff !important;
background: #E12626 !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-cat-testy,
body.fr-home-active .fr-homepage .fr-cat-testy-samochodow {
--badge-bg: #1565C0 !important;
--badge-fg: #ffffff !important;
background: #1565C0 !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-cat-rankingi,
body.fr-home-active .fr-homepage .fr-cat-do-30-tys,
body.fr-home-active .fr-homepage .fr-cat-rodzinne {
--badge-bg: #176B34 !important;
--badge-fg: #ffffff !important;
background: #176B34 !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-cat-poradniki,
body.fr-home-active .fr-homepage .fr-cat-jak-wybrac-auto {
--badge-bg: #5B3CC4 !important;
--badge-fg: #ffffff !important;
background: #5B3CC4 !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-cat-napedy {
--badge-bg: #FFC400 !important;
--badge-fg: #111111 !important;
background: #FFC400 !important;
color: #111111 !important;
}
body.fr-home-active .fr-homepage .fr-cat-rynek {
--badge-bg: #B84D00 !important;
--badge-fg: #ffffff !important;
background: #B84D00 !important;
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-cat-chinskie-marki,
body.fr-home-active .fr-homepage .fr-cat-byd,
body.fr-home-active .fr-homepage .fr-cat-omoda-jaecoo,
body.fr-home-active .fr-homepage .fr-cat-omoda,
body.fr-home-active .fr-homepage .fr-cat-jaecoo,
body.fr-home-active .fr-homepage .fr-cat-mg,
body.fr-home-active .fr-homepage .fr-cat-gwm,
body.fr-home-active .fr-homepage .fr-cat-nio,
body.fr-home-active .fr-homepage .fr-cat-xpeng,
body.fr-home-active .fr-homepage .fr-cat-geely,
body.fr-home-active .fr-homepage .fr-cat-chery {
--badge-bg: #8B1E3F !important;
--badge-fg: #ffffff !important;
background: #8B1E3F !important;
color: #ffffff !important;
}
/* Dziedziczenie koloru wewnątrz badge */
body.fr-home-active .fr-homepage .fr-badge *,
body.fr-home-active .fr-homepage span[class*="fr-cat-"] * {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-transform: inherit !important;
}
/* Usunięcie przypadkowych obramowań/efektów na plakietkach */
body.fr-home-active .fr-homepage .fr-badge::before,
body.fr-home-active .fr-homepage .fr-badge::after,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::before,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::after {
box-shadow: none !important;
}
/* =========================================================
4RINGS — MOBILE RANKINGS 3 LARGE CARDS FINAL
Rankingi mobile: 1, 2, 3 jako duże pionowe karty
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking {
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
/* Wymuszenie na wszystkich kartach pionowego układu! Nadpisuje wszystkie :not(.fr-feature-large) z wyższych linii */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 20px !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
}
/* Na mobile pokazujemy tylko 3 karty rankingów */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(n+4) {
display: none !important;
}
/* Każda karta ma zdjęcie na całą szerokość */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
overflow: hidden !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Copy zawsze pod zdjęciem, nigdy po prawej */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 14px !important;
margin: 0 !important;
overflow: visible !important;
position: static !important;
transform: none !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
font-size: 18px !important;
line-height: 1.20 !important;
font-weight: 740 !important;
margin: 0 0 8px !important;
padding: 0 0 0.08em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card p,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) p {
display: -webkit-box !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 0 10px !important;
color: #333333 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin: 6px 0 0 !important;
color: #666666 !important;
position: static !important;
transform: none !important;
}
/* Numery wewnątrz zdjęcia */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-rank-number {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
margin: 0 !important;
transform: none !important;
}
/* Renumeracja 1, 2, 3 na mobile na wypadek wyrw w strukturze HTML */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-image::before { content: "1" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number::after { content: "1" !important; font-size: 16px !important; line-height: 1 !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-image::before { content: "2" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number::after { content: "2" !important; font-size: 16px !important; line-height: 1 !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-image::before { content: "3" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank::after, body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number::after { content: "3" !important; font-size: 16px !important; line-height: 1 !important; }
}
/* =========================================================
4RINGS — MOBILE RANKINGS FINAL FIX
Tylko sekcja Rankingi na mobile
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card {
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large {
display: block !important;
padding: 0 0 16px !important;
border-bottom: 1px solid #eeeeee !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-img {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-height: 98px !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
position: relative !important;
z-index: 1 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-img {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.24 !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.08em !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
padding-bottom: 0.08em !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin: 0 0 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
color: #666666 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking [class*="rank"],
body.fr-home-active .fr-homepage .fr-layout-ranking [class*="Rank"] {
line-height: 1 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-ranking-number {
position: absolute !important;
top: 8px !important;
left: 0 !important;
z-index: 5 !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 12px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-hero-copy strong {
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-day-card h1,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.22 !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3 a,
body.fr-home-active .fr-homepage .fr-news-copy h3 a,
body.fr-home-active .fr-homepage .fr-feature-card h3 a {
line-height: inherit !important;
padding-bottom: 0.10em !important;
}
}
/* =========================================================
4RINGS — MOBILE RANKINGS THREE FEATURED CARDS
Rankingi mobile: 3 duże boxy jak pierwszy
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking {
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 22px !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
transform: none !important;
}
/* Na mobile pokazujemy tylko 3 pierwsze karty rankingów */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(n+4) {
display: none !important;
}
/* Każda karta — zdjęcie na całą szerokość, jak w pierwszym boxie */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
padding: 0 !important;
overflow: hidden !important;
position: relative !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* Treść zawsze pod zdjęciem i odsunięta od krawędzi */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 16px !important;
position: static !important;
transform: none !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy h3 {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
font-size: 18px !important;
line-height: 1.20 !important;
font-weight: 740 !important;
margin: 0 0 9px !important;
padding: 0 0 0.08em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy p {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 0 10px !important;
color: #333333 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-meta {
display: block !important;
width: 100% !important;
max-width: 100% !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin: 6px 0 0 !important;
color: #666666 !important;
position: static !important;
transform: none !important;
}
/* Numerek wewnątrz zdjęcia */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
transform: none !important;
}
/* Wizualna numeracja 1, 2, 3 */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number {
font-size: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number::after {
content: "1" !important;
font-size: 16px !important;
line-height: 1 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number::after {
content: "2" !important;
font-size: 16px !important;
line-height: 1 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number::after {
content: "3" !important;
font-size: 16px !important;
line-height: 1 !important;
}
}
/* =========================================================
4RINGS — MOBILE TESTS AND RANKINGS FINAL LAYOUT
Testy: 2 duże karty
Rankingi: 3 duże karty
========================================================= */
@media (max-width: 768px) {
/* =========================
TESTY SAMOCHODÓW — 2 DUŻE KARTY
========================= */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 18px !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:nth-child(n+3),
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:nth-of-type(n+3) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
overflow: hidden !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) .fr-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
position: static !important;
transform: none !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
font-size: 18px !important;
line-height: 1.20 !important;
font-weight: 740 !important;
margin: 0 0 7px !important;
padding: 0 0 0.08em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin: 5px 0 0 !important;
color: #666666 !important;
position: static !important;
transform: none !important;
}
/* =========================
RANKINGI — 3 DUŻE KARTY
========================= */
body.fr-home-active .fr-homepage .fr-layout-ranking {
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 20px !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 12px !important;
overflow: hidden !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 14px !important;
margin: 0 !important;
position: static !important;
transform: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
font-size: 10px !important;
line-height: 1 !important;
padding: 5px 8px !important;
margin: 0 0 8px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
display: -webkit-box !important;
width: 100% !important;
max-width: 100% !important;
font-size: 18px !important;
line-height: 1.20 !important;
font-weight: 740 !important;
margin: 0 0 8px !important;
padding: 0 0 0.08em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy p,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) p {
display: -webkit-box !important;
font-size: 14px !important;
line-height: 1.45 !important;
margin: 0 0 10px !important;
color: #333333 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin: 6px 0 0 !important;
color: #666666 !important;
position: static !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-rank-number {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
margin: 0 !important;
transform: none !important;
}
/* Wizualna numeracja 1, 2, 3 dla pierwszych trzech kart */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-image::before { content: "1" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(1) .fr-ranking-number::after { content: "1" !important; font-size: 16px !important; line-height: 1 !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-image::before { content: "2" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(2) .fr-ranking-number::after { content: "2" !important; font-size: 16px !important; line-height: 1 !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number { font-size: 0 !important; content: "" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-image::before { content: "3" !important; font-size: 16px !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-rank-number::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-card-rank::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(3) .fr-ranking-number::after { content: "3" !important; font-size: 16px !important; line-height: 1 !important; }
}
/* =========================================================
4RINGS — RANKING FEATURED CONTENT PADDING
Odsunięcie treści pod głównym zdjęciem w sekcji Rankingi
========================================================= */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 18px !important;
padding-right: 18px !important;
padding-bottom: 18px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
4RINGS — RANKINGS NUMBER BADGES 2-4
Numery 2–4 przypięte do miniatur jak numer 1
========================================================= */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image {
position: relative !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-img {
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large)::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-ranking-number {
position: absolute !important;
top: -12px !important;
left: -12px !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
margin: 0 !important;
transform: none !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image {
position: relative !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large)::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-ranking-number {
top: -8px !important;
left: -8px !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
font-size: 12px !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;
}
}
/* =========================================================
4RINGS — RANKING FEATURED CONTENT PADDING
Odsunięcie treści pod głównym zdjęciem w sekcji Rankingi
========================================================= */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 18px !important;
padding-right: 18px !important;
padding-bottom: 18px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card.fr-feature-large .fr-card-copy {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
}
/* =========================================================
4RINGS — MOBILE LIST LAYOUT FOR SMALL SECTIONS
Testy / Poradniki / Rynek
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.22 !important;
font-weight: 730 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-market .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-meta,
body.fr-home-active .fr-homepage .fr-layout-market .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — MOBILE RANKING LIST FIX
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3 {
font-size: 14px !important;
line-height: 1.22 !important;
font-weight: 730 !important;
margin: 5px 0 5px !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.2 !important;
font-weight: 760 !important;
margin: 8px 0 6px !important;
padding-bottom: 0.10em !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
font-size: 9px !important;
line-height: 1 !important;
padding: 4px 6px !important;
margin-bottom: 4px !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
font-size: 10px !important;
line-height: 1.25 !important;
margin-top: 4px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE POLISH 2026
After premium homepage upgrade
========================================================= */
/* ZADANIE 1: Warto przeczytać (Evergreen Section) - Dopieszczenie */
body.fr-home-active .fr-homepage .fr-evergreen-section {
margin-block: 48px !important;
border-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-card {
display: flex !important;
flex-direction: column !important;
border: 0 !important;
border-bottom: 1px solid #eaeaea !important;
padding-bottom: 16px !important;
background: transparent !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-card img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
border-radius: 0 !important;
margin-bottom: 12px !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-title {
font-size: 17px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
margin: 0 0 8px !important;
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
color: #111 !important;
}
@media (max-width: 1024px) {
body.fr-home-active .fr-homepage .fr-evergreen-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE TYPOGRAPHY TEST 2026
System Font Stack UI / compact news homepage
========================================================= */
.fr-homepage {
--fr-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-text: #111111;
--fr-home-body-text: #2D3748;
--fr-home-muted: #667085;
--fr-home-tight: -0.035em;
--fr-home-tighter: -0.055em;
}
/* Bazowy font homepage */
.fr-homepage,
.fr-homepage p,
.fr-homepage span,
.fr-homepage li,
.fr-homepage .fr-meta,
.fr-homepage .fr-card-copy p {
font-family: var(--fr-font-body);
text-align: left;
}
/* Nagłówki i UI */
.fr-homepage h1,
.fr-homepage h2,
.fr-homepage h3,
.fr-homepage strong,
.fr-homepage .fr-section-head,
.fr-homepage .fr-section-head a,
.fr-homepage .fr-badge,
.fr-homepage .fr-today-label,
.fr-homepage .fr-today-bar a,
.fr-homepage .fr-older-posts a,
.fr-homepage .fr-drive-chip,
.fr-homepage .fr-brand-chip {
font-family: var(--fr-font-heading);
}
/* Hero */
.fr-homepage .fr-hero-copy strong {
font-family: var(--fr-font-heading);
font-weight: 800;
letter-spacing: var(--fr-home-tighter);
line-height: .98;
}
.fr-homepage .fr-hero-main .fr-hero-copy strong {
font-size: clamp(34px, 4vw, 54px);
line-height: .96;
}
.fr-homepage .fr-hero-small .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-copy strong {
font-size: clamp(17px, 1.7vw, 22px);
line-height: 1.02;
letter-spacing: -.025em;
}
/* Nagłówki sekcji */
.fr-homepage .fr-section-head {
margin-bottom: 24px;
}
.fr-homepage .fr-section-head h2 {
font-family: var(--fr-font-heading);
font-size: clamp(27px, 3vw, 38px);
line-height: .98;
font-weight: 800;
letter-spacing: var(--fr-home-tighter);
color: var(--fr-home-text);
}
.fr-homepage .fr-section-head a {
font-size: 13px;
line-height: 1;
font-weight: 800;
letter-spacing: -.006em;
text-transform: none;
}
/* Tytuły kart — ogólnie */
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3,
.fr-homepage .fr-news-row h3 {
font-family: var(--fr-font-heading);
color: var(--fr-home-text);
font-weight: 800;
letter-spacing: -.018em;
line-height: 1.08;
}
/* Tytuły małych kart i list */
.fr-homepage .fr-news-row h3,
.fr-homepage .fr-feature-card:not(.fr-feature-large) h3,
.fr-homepage .fr-card:not(.fr-feature-large) h3 {
font-size: clamp(16px, 1.45vw, 20px);
line-height: 1.12;
}
/* Tytuły dużych kart */
.fr-homepage .fr-feature-large h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-drives .fr-feature-large h3,
.fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: clamp(24px, 2.7vw, 34px);
line-height: 1.02;
letter-spacing: -.025em;
}
/* Warto przeczytać / karty 4-kolumnowe */
.fr-homepage .fr-home-worth-reading h3,
.fr-homepage .fr-layout-tests .fr-feature-card h3,
.fr-homepage .fr-layout-guides .fr-feature-card h3,
.fr-homepage .fr-layout-market .fr-feature-card h3 {
font-size: clamp(17px, 1.55vw, 21px);
line-height: 1.1;
letter-spacing: -.018em;
}
/* Excerpty / opisy */
.fr-homepage .fr-card-copy p,
.fr-homepage .fr-feature-card p {
color: var(--fr-home-body-text);
font-family: var(--fr-font-body);
font-size: 14px;
line-height: 1.42;
font-weight: 450;
letter-spacing: 0;
text-align: left;
}
/* Meta */
.fr-homepage .fr-meta {
color: var(--fr-home-muted);
font-size: 12px;
line-height: 1.35;
font-weight: 650;
letter-spacing: -.01em;
}
/* Badge */
.fr-homepage .fr-badge {
padding: 5px 8px;
font-size: 10.5px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.015em;
text-transform: uppercase;
}
/* Dziś na 4rings */
.fr-homepage .fr-today-label {
font-size: 12px;
font-weight: 760;
letter-spacing: 0.020em;
}
.fr-homepage .fr-today-bar a {
font-size: 13px;
font-weight: 700;
letter-spacing: -.006em;
}
/* Najnowsze — bardziej newsroomowe */
.fr-homepage .fr-latest-section .fr-news-row h3,
.fr-homepage .fr-latest-grid h3 {
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.12;
letter-spacing: -.018em;
}
.fr-homepage .fr-latest-section .fr-meta,
.fr-homepage .fr-latest-grid .fr-meta {
font-size: 11.5px;
}
/* Chińskie marki dark hub */
.fr-homepage .fr-layout-chinese .fr-section-head h2,
.fr-homepage .fr-layout-chinese .fr-feature-card h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3 {
color: #ffffff;
}
.fr-homepage .fr-layout-chinese .fr-card-copy p {
color: rgba(255,255,255,.78);
}
.fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,.62);
}
/* Przyciski/chipy */
.fr-homepage .fr-drive-chip,
.fr-homepage .fr-brand-chip,
.fr-homepage .fr-shortcuts a {
font-family: var(--fr-font-heading);
font-weight: 750;
letter-spacing: -.006em;
}
/* CTA starsze artykuły */
.fr-homepage .fr-older-posts a {
font-family: var(--fr-font-heading);
font-size: 14px;
font-weight: 760;
letter-spacing: -.006em;
}
/* Mobile typography */
@media (max-width: 768px) {
.fr-homepage .fr-hero-main .fr-hero-copy strong {
font-size: clamp(25px, 8vw, 32px);
line-height: .98;
letter-spacing: -.025em;
}
.fr-homepage .fr-hero-small .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-copy strong {
font-size: clamp(17px, 5.2vw, 22px);
line-height: 1.02;
}
.fr-homepage .fr-section-head {
margin-bottom: 18px;
}
.fr-homepage .fr-section-head h2 {
font-size: clamp(24px, 7vw, 30px);
line-height: 1;
letter-spacing: -.025em;
}
.fr-homepage .fr-section-head a {
font-size: 12px;
white-space: nowrap;
}
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3,
.fr-homepage .fr-news-row h3 {
font-size: clamp(17px, 5vw, 21px);
line-height: 1.08;
letter-spacing: -.018em;
}
.fr-homepage .fr-feature-large h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-drives .fr-feature-large h3,
.fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: clamp(22px, 7vw, 29px);
line-height: 1.02;
}
.fr-homepage .fr-card-copy p,
.fr-homepage .fr-feature-card p {
font-size: 13.5px;
line-height: 1.38;
}
.fr-homepage .fr-meta {
font-size: 11.5px;
}
.fr-homepage .fr-badge {
font-size: 10px;
padding: 4px 7px;
}
}
/* Desktop refinement */
@media (min-width: 1025px) {
.fr-homepage .fr-feature-card:not(.fr-feature-large) h3 {
-webkit-line-clamp: 3;
}
.fr-homepage .fr-layout-guides .fr-feature-card h3,
.fr-homepage .fr-layout-market .fr-feature-card h3,
.fr-homepage .fr-home-worth-reading h3 {
-webkit-line-clamp: 2;
}
}
/* =========================================================
4RINGS — HOMEPAGE TYPOGRAPHY UNIFICATION FINAL
One visual system for homepage UI
========================================================= */
.fr-homepage {
--fr-font-heading: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-type-text: #111111;
--fr-type-body: #2D3748;
--fr-type-muted: #667085;
--fr-type-tight: -0.035em;
--fr-type-tighter: -0.052em;
}
/* Global homepage type reset */
.fr-homepage,
.fr-homepage p,
.fr-homepage span,
.fr-homepage li,
.fr-homepage .fr-meta,
.fr-homepage .fr-card-copy p,
.fr-homepage .fr-feature-card p {
font-family: var(--fr-font-body) !important;
text-align: left !important;
}
/* Headline / UI font */
.fr-homepage h1,
.fr-homepage h2,
.fr-homepage h3,
.fr-homepage strong,
.fr-homepage .fr-section-head,
.fr-homepage .fr-section-head a,
.fr-homepage .fr-badge,
.fr-homepage .fr-today-label,
.fr-homepage .fr-today-bar a,
.fr-homepage .fr-older-posts a,
.fr-homepage .fr-drive-chip,
.fr-homepage .fr-brand-chip,
.fr-homepage .fr-shortcuts a,
.fr-homepage .fr-card-copy h3,
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-news-row h3 {
font-family: var(--fr-font-heading) !important;
}
/* Hero typography */
.fr-homepage .fr-hero-copy strong {
font-family: var(--fr-font-heading) !important;
font-weight: 800 !important;
letter-spacing: var(--fr-type-tighter) !important;
line-height: 1.0 !important;
}
.fr-homepage .fr-hero-main .fr-hero-copy strong {
font-size: clamp(34px, 4vw, 52px) !important;
line-height: .98 !important;
}
.fr-homepage .fr-hero-small .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-copy strong {
font-size: clamp(17px, 1.7vw, 22px) !important;
line-height: 1.04 !important;
letter-spacing: -.025em !important;
}
/* Section headings */
.fr-homepage .fr-section-head {
margin-bottom: 24px;
}
.fr-homepage .fr-section-head h2 {
font-family: var(--fr-font-heading) !important;
font-size: clamp(27px, 3vw, 38px) !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: var(--fr-type-tighter) !important;
color: var(--fr-type-text) !important;
}
/* Keep section accent bars */
.fr-homepage .fr-section-head h2::before {
width: 5px;
background: var(--fr-color);
}
/* Section right links: “Wszystkie…” */
.fr-homepage .fr-section-head a {
font-family: var(--fr-font-heading) !important;
font-size: 12.5px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -.006em !important;
text-transform: none !important;
color: var(--fr-color, #E12626) !important;
white-space: nowrap;
}
.fr-homepage .fr-section-head a::after {
content: "\2192";
display: inline-block;
margin-left: 5px;
font-family: var(--fr-font-heading) !important;
font-weight: 800 !important;
transition: transform .16s ease;
}
.fr-homepage .fr-section-head a:hover::after {
transform: translateX(3px);
}
/* Card titles — base */
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3,
.fr-homepage .fr-news-row h3 {
font-family: var(--fr-font-heading) !important;
color: var(--fr-type-text) !important;
font-weight: 800 !important;
letter-spacing: var(--fr-type-tight) !important;
line-height: 1.1 !important;
}
/* Small/list card titles */
.fr-homepage .fr-news-row h3,
.fr-homepage .fr-feature-card:not(.fr-feature-large) h3,
.fr-homepage .fr-card:not(.fr-feature-large) h3 {
font-size: clamp(16px, 1.45vw, 20px) !important;
line-height: 1.12 !important;
}
/* Large card titles */
.fr-homepage .fr-feature-large h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-drives .fr-feature-large h3,
.fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: clamp(24px, 2.7vw, 34px) !important;
line-height: 1.03 !important;
letter-spacing: -.025em !important;
}
/* 4-column cards: Warto przeczytać, Testy, Poradniki, Rynek */
.fr-homepage .fr-home-worth-reading h3,
.fr-homepage .fr-layout-tests .fr-feature-card h3,
.fr-homepage .fr-layout-guides .fr-feature-card h3,
.fr-homepage .fr-layout-market .fr-feature-card h3 {
font-size: clamp(17px, 1.55vw, 21px) !important;
line-height: 1.1 !important;
letter-spacing: -.018em !important;
}
/* Excerpts / descriptions */
.fr-homepage .fr-card-copy p,
.fr-homepage .fr-feature-card p {
color: var(--fr-type-body) !important;
font-family: var(--fr-font-body) !important;
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 450 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
/* Meta: date + reading time */
.fr-homepage .fr-meta {
color: var(--fr-type-muted) !important;
font-family: var(--fr-font-body) !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
}
/* =========================================================
BADGES — ONE SYSTEM
========================================================= */
.fr-homepage .fr-badge,
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge,
.fr-homepage article .fr-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-height: 18px !important;
padding: 4px 7px !important;
font-family: var(--fr-font-heading) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
border-radius: 0 !important;
color: var(--badge-fg) !important;
background: var(--badge-bg) !important;
white-space: nowrap !important;
}
/* Badge spacing inside cards */
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge {
margin: 0 0 6px !important;
}
/* Category color fallback classes */
.fr-homepage .fr-cat-aktualnosci {
--badge-bg: #E12626;
--badge-fg: #ffffff;
}
.fr-homepage .fr-cat-testy {
--badge-bg: #1565C0;
--badge-fg: #ffffff;
}
.fr-homepage .fr-cat-rankingi {
--badge-bg: #1E8E3E;
--badge-fg: #ffffff;
}
.fr-homepage .fr-cat-poradniki {
--badge-bg: #5B3CC4;
--badge-fg: #ffffff;
}
.fr-homepage .fr-cat-napedy {
--badge-bg: #FFC400;
--badge-fg: #111111;
}
.fr-homepage .fr-cat-rynek {
--badge-bg: #F57C00;
--badge-fg: #ffffff;
}
.fr-homepage .fr-cat-chinskie {
--badge-bg: #8B1E3F;
--badge-fg: #ffffff;
}
/* Do not allow old badge styles to change font case */
.fr-homepage .fr-badge * {
font-family: inherit !important;
text-transform: inherit !important;
}
/* Today bar */
.fr-homepage .fr-today-label {
font-family: var(--fr-font-heading) !important;
font-size: 12px !important;
font-weight: 760 !important;
letter-spacing: 0.020em !important;
text-transform: uppercase !important;
}
.fr-homepage .fr-today-bar a {
font-family: var(--fr-font-heading) !important;
font-size: 13px !important;
font-weight: 750 !important;
letter-spacing: -.006em !important;
}
/* Najnowsze */
.fr-homepage .fr-latest-section .fr-news-row h3,
.fr-homepage .fr-latest-grid h3 {
font-size: clamp(16px, 1.35vw, 19px) !important;
line-height: 1.12 !important;
letter-spacing: -.018em !important;
}
.fr-homepage .fr-latest-section .fr-meta,
.fr-homepage .fr-latest-grid .fr-meta {
font-size: 11.5px !important;
}
/* Dark hub: Chińskie marki */
.fr-homepage .fr-layout-chinese .fr-section-head h2,
.fr-homepage .fr-layout-chinese .fr-feature-card h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3 {
color: #ffffff !important;
}
.fr-homepage .fr-layout-chinese .fr-card-copy p {
color: rgba(255,255,255,.78) !important;
}
.fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,.62) !important;
}
/* Przyciski/chipy */
.fr-homepage .fr-drive-chip,
.fr-homepage .fr-brand-chip,
.fr-homepage .fr-shortcuts a,
.fr-homepage .fr-drive-strip a,
.fr-homepage .fr-brand-strip a {
font-family: var(--fr-font-heading) !important;
font-weight: 750 !important;
letter-spacing: -.006em !important;
}
/* CTA */
.fr-homepage .fr-older-posts a {
font-family: var(--fr-font-heading) !important;
font-size: 14px !important;
font-weight: 760 !important;
letter-spacing: -.006em !important;
}
/* Mobile typography */
@media (max-width: 768px) {
.fr-homepage .fr-hero-main .fr-hero-copy strong {
font-size: clamp(25px, 8vw, 32px) !important;
line-height: .99 !important;
letter-spacing: -.025em !important;
}
.fr-homepage .fr-hero-small .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-copy strong {
font-size: clamp(17px, 5.2vw, 22px) !important;
line-height: 1.03 !important;
}
.fr-homepage .fr-section-head {
margin-bottom: 18px;
}
.fr-homepage .fr-section-head h2 {
font-size: clamp(24px, 7vw, 30px) !important;
line-height: 1 !important;
letter-spacing: -.025em !important;
}
.fr-homepage .fr-section-head a {
font-size: 12px !important;
}
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3,
.fr-homepage .fr-news-row h3 {
font-size: clamp(17px, 5vw, 21px) !important;
line-height: 1.08 !important;
letter-spacing: -.018em !important;
}
.fr-homepage .fr-feature-large h3,
.fr-homepage .fr-layout-chinese .fr-feature-large h3,
.fr-homepage .fr-layout-drives .fr-feature-large h3,
.fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: clamp(22px, 7vw, 29px) !important;
line-height: 1.02 !important;
}
.fr-homepage .fr-card-copy p,
.fr-homepage .fr-feature-card p {
font-size: 13.5px !important;
line-height: 1.38 !important;
}
.fr-homepage .fr-meta {
font-size: 11.5px !important;
}
.fr-homepage .fr-badge,
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge {
min-height: 17px !important;
padding: 4px 7px !important;
font-size: 9.8px !important;
letter-spacing: 0.025em !important;
}
}
/* Desktop refinement */
@media (min-width: 1025px) {
.fr-homepage .fr-feature-card:not(.fr-feature-large) h3 {
-webkit-line-clamp: 3;
}
.fr-homepage .fr-layout-guides .fr-feature-card h3,
.fr-homepage .fr-layout-market .fr-feature-card h3,
.fr-homepage .fr-home-worth-reading h3 {
-webkit-line-clamp: 2;
}
}
/* =========================================================
4RINGS — HOMEPAGE FINAL POLISH
Latest / CTA / spacing only
========================================================= */
/* Najnowsze — spokojniejsze wykorzystanie szerokości */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-latest,
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage .fr-section-latest {
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid,
body.fr-home-active .fr-homepage .fr-latest-feed,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid {
max-width: 900px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
body.fr-home-active .fr-homepage .fr-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-section-latest .fr-section-head {
max-width: 900px !important;
margin-left: 0 !important;
margin-right: auto !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid article,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-latest-feed article {
transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.fr-home-active .fr-homepage .fr-latest-grid article:hover,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card:hover,
body.fr-home-active .fr-homepage .fr-latest-feed article:hover {
background: #fff;
box-shadow: 0 10px 28px rgba(0,0,0,.055);
transform: translateY(-1px);
}
}
/* Najnowsze mobile — bez zmian układu, tylko oddech */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest-grid article,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-latest-feed article {
padding-bottom: 14px !important;
}
}
/* Reklamy — zachowaj wymiary, popraw tylko rytm */
.fr-homepage .fr-ad {
margin-top: 34px !important;
margin-bottom: 42px !important;
}
.fr-homepage .fr-ad-box {
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
background: #f5f5f5 !important;
border: 0 !important;
}
/* Mobile reklamy — finalny standard */
@media (max-width: 768px) {
.fr-homepage .fr-ad {
margin-top: 30px !important;
margin-bottom: 36px !important;
padding-left: 16px !important;
padding-right: 16px !important;
box-sizing: border-box !important;
}
.fr-homepage .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}
}
/* CTA “Zobacz starsze artykuły” — lekko premium */
.fr-homepage .fr-older-posts {
margin-top: 54px !important;
margin-bottom: 64px !important;
}
.fr-homepage .fr-older-posts a {
min-height: 46px !important;
padding: 0 30px !important;
border: 1.5px solid #111 !important;
background: #fff !important;
color: #111 !important;
font-size: 13px !important;
font-weight: 760 !important;
letter-spacing: 0.015em !important;
text-transform: uppercase !important;
}
.fr-homepage .fr-older-posts a:hover,
.fr-homepage .fr-older-posts a:focus {
background: #111 !important;
color: #fff !important;
border-color: #111 !important;
}
/* Mobile CTA */
@media (max-width: 768px) {
.fr-homepage .fr-older-posts {
margin-top: 42px !important;
margin-bottom: 52px !important;
padding: 0 16px !important;
}
.fr-homepage .fr-older-posts a {
width: 100% !important;
max-width: 360px !important;
min-height: 48px !important;
}
}
/* Minimalny rytm między dolnymi sekcjami */
.fr-homepage .fr-layout-guides,
.fr-homepage .fr-layout-market {
margin-top: 52px !important;
}
@media (max-width: 768px) {
.fr-homepage .fr-layout-guides,
.fr-homepage .fr-layout-market {
margin-top: 42px !important;
}
}
/* =========================================================
4RINGS — HERO EDITORIAL v27 FINAL MICRO-TUNE
Zakres: szerokość zdjęcia desktop, mniejsze plakietki,
właściwy kolor paska, mobile placeholder i miniatury.
DODANE PRZED RANKINGI MOBILE FINAL LOCK — nie przenosić za lock.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
grid-template-columns: minmax(0, 2.24fr) minmax(250px, .88fr) !important;
gap: 18px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 390px !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
padding: 8px 0 8px 2px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
font-size: clamp(27px, 2.25vw, 36px) !important;
line-height: 1.20 !important;
font-weight: 760 !important;
padding-bottom: .28em !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-excerpt-v22 {
font-size: clamp(13px, .98vw, 15px) !important;
line-height: 1.50 !important;
}
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
min-height: 11px !important;
margin: 0 0 5px !important;
padding: 1px 3px !important;
border-left-width: 2px !important;
border-left-style: solid !important;
border-left-color: var(--fr-badge-accent, #E12626) !important;
border-radius: 0 !important;
background: #f4f5f6 !important;
color: #111 !important;
font-size: 5.6px !important;
line-height: 1.10 !important;
font-weight: 680 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
box-shadow: -2px 0 6px color-mix(in srgb, var(--fr-badge-accent, #E12626) 34%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-aktualnosci,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-aktualnosci[style] {
--fr-badge-accent: #E12626 !important;
border-left-color: #E12626 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-testy,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-testy[style] {
--fr-badge-accent: #1565C0 !important;
border-left-color: #1565C0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rankingi,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rankingi[style] {
--fr-badge-accent: #1E8E3E !important;
border-left-color: #1E8E3E !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-poradniki,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-poradniki[style] {
--fr-badge-accent: #5B3CC4 !important;
border-left-color: #5B3CC4 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-napedy,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-napedy[style] {
--fr-badge-accent: #FFC400 !important;
border-left-color: #FFC400 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rynek,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rynek[style] {
--fr-badge-accent: #F57C00 !important;
border-left-color: #F57C00 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-chinskie,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-chinskie[style] {
--fr-badge-accent: #8B1E3F !important;
border-left-color: #8B1E3F !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
line-height: 1.42 !important;
font-weight: 600 !important;
padding-bottom: .32em !important;
overflow: visible !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
padding: 14px !important;
overflow: hidden !important;
}body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 14px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 {
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 11px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 {
width: 116px !important;
min-height: 88px !important;
height: 100% !important;
aspect-ratio: auto !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 {
padding: 8px 9px 9px 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
min-height: 10px !important;
margin-bottom: 5px !important;
padding: 1px 3px !important;
border-left-width: 2px !important;
border-left-color: var(--fr-badge-accent, #E12626) !important;
font-size: 5.5px !important;
line-height: 1.10 !important;
font-weight: 670 !important;
box-shadow: -2px 0 6px color-mix(in srgb, var(--fr-badge-accent, #E12626) 34%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
font-size: 13px !important;
line-height: 1.34 !important;
font-weight: 620 !important;
padding-bottom: .22em !important;
}
}
/* =========================================================
4RINGS — CHIŃSKIE MARKI DARK HUB TOP PADDING FIX v67
Zakres: tylko czarny blok sekcji „Chińskie marki”.
Cel: skasować pustą czarną przestrzeń NAD nagłówkiem „Chińskie marki”.
Nie rusza placeholdera reklamy, Najnowsze, innych sekcji ani Rankingi mobile final.
========================================================= */
@media (min-width: 769px) {
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding-top: 12px !important;
padding-block-start: 12px !important;
padding-bottom: 40px !important;
padding-block-end: 40px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese > .fr-section-head,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese > .fr-section-head,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section > .fr-section-head {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 22px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese > .fr-section-head h2,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese > .fr-section-head h2,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section > .fr-section-head h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
@media (max-width: 768px) {
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding-top: 14px !important;
padding-block-start: 14px !important;
padding-bottom: 30px !important;
padding-block-end: 30px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese > .fr-section-head,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese > .fr-section-head,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section > .fr-section-head {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 16px !important;
}
html body.fr-home-active .fr-homepage .fr-wrap > section.fr-section.fr-layout-chinese > .fr-section-head h2,
html body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese > .fr-section-head h2,
html body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section > .fr-section-head h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* =========================================================
KONIEC — CHIŃSKIE MARKI DARK HUB TOP PADDING FIX v67
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE ADS FINAL CLEANUP 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: wyłącznie sloty reklamowe na homepage.
Finalne ustalenia:
- pierwszy slot reklamowy jest nad całym hero,
- nie ma slotu między dużym kaflem hero a trzema kafelkami,
- desktop/tablet: stabilny wrapper 970×300,
- mobile: stabilny wrapper 100%×280.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad {
display: block !important;
visibility: visible !important;
position: relative !important;
clear: both !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 38px auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box {
display: block !important;
visibility: visible !important;
position: relative !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad::before,
body.fr-home-active .fr-homepage .fr-ad::after,
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top {
display: block !important;
margin-top: 16px !important;
margin-bottom: 52px !important;
}@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 30px auto !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top {
margin-top: 14px !important;
margin-bottom: 36px !important;
}
body.fr-home-active .fr-homepage .fr-hero-block.fr-editorial-hero-v22 {
margin-top: 0 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE ADS FINAL CLEANUP 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE ADS FINAL ORDER 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko reklamy homepage na mobile.
Finalny układ mobile:
- 1. placeholder: przed całym hero,
- 2. placeholder: po całym hero, przed sekcją Najnowsze,
- zero slotów wewnątrz hero.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-wrap {
display: block !important;
}
/* Pierwsza jednostka na samej górze przed hero. */
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top {
display: block !important;
visibility: visible !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 14px auto 26px !important;
padding: 0 !important;
overflow: hidden !important;
clear: both !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Drugą jednostkę pokazujemy dopiero po CAŁYM hero, przed Najnowsze. */
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest {
display: block !important;
visibility: visible !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 30px auto 34px !important;
padding: 0 !important;
overflow: hidden !important;
clear: both !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}body.fr-home-active .fr-homepage .fr-ad.fr-ad-top::before,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top::after,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top .fr-ad-box::after,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest::before,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest::after,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest .fr-ad-box::after {
content: none !important;
display: none !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE MOBILE ADS FINAL ORDER 2026-06-10
========================================================= */
@media (max-width: 768px) {
html body .fr-homepage .fr-ad.fr-ad-top,
html body .fr-homepage .fr-ad.fr-ad-before-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-top,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-before-latest {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
z-index: 5 !important;
}
html body .fr-homepage .fr-ad.fr-ad-top,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-top {
margin-top: 14px !important;
margin-bottom: 34px !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-before-latest {
margin-top: 30px !important;
margin-bottom: 34px !important;
}
html body .fr-homepage .fr-ad.fr-ad-top > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-top > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box[aria-hidden="true"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
}
html body .fr-homepage .fr-ad.fr-ad-top [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-before-latest [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-top .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderOnnetwork {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body .fr-homepage .fr-ad.fr-ad-top .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-top [class*="placeholderPlug"],
html body .fr-homepage .fr-ad.fr-ad-before-latest [class*="placeholderPlug"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}}
/* =========================================================
KONIEC — HOMEPAGE MOBILE ADS UNHIDE FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE REMOVE TOP AD FINAL 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko homepage mobile.
Decyzja finalna:
- usuwamy / ukrywamy slot nad hero: .fr-ad-top,
- zostaje slot po całym hero przed Najnowsze: .fr-ad-before-latest,
- nie ruszamy desktopu, hero, typografii ani Rankingi mobile final.
========================================================= */
@media (max-width: 768px) {
html body .fr-homepage .fr-ad.fr-ad-top,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-top {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
html body .fr-homepage .fr-ad.fr-ad-top .fr-ad-box,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-top .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-top [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-top .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-top .placeholderPlug {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-before-latest {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin-top: 30px !important;
margin-bottom: 34px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
z-index: 5 !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-before-latest > .fr-ad-box {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderOnnetwork {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-before-latest [class*="placeholderPlug"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}}
/* =========================================================
KONIEC — HOMEPAGE MOBILE REMOVE TOP AD FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE CHINESE AD GAP FINAL 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko homepage mobile.
Naprawa:
- reklama nad sekcją Chińskie marki (.fr-ad-after-latest) nie może nachodzić na sekcję,
- slot ma stabilne 280px wysokości,
- wrapper OptAd360 jest ograniczony do 280px,
- pod slotem zostaje bezpieczny odstęp przed kolejną sekcją.
========================================================= */
@media (max-width: 768px) {
html body .fr-homepage .fr-ad.fr-ad-after-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-latest {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin-top: 28px !important;
margin-bottom: 46px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
z-index: 2 !important;
}
html body .fr-homepage .fr-ad.fr-ad-after-latest > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-after-latest > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-latest > .fr-ad-box {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
}
html body .fr-homepage .fr-ad.fr-ad-after-latest [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-after-latest .placeholderOnnetwork {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: 280px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
html body .fr-homepage .fr-ad.fr-ad-after-latest .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-after-latest [class*="placeholderPlug"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Bezpieczny start sekcji po reklamie — zabezpieczenie przed nachodzeniem na Chińskie marki */
html body .fr-homepage .fr-ad.fr-ad-after-latest + *,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-latest + * {
clear: both !important;
position: relative !important;
z-index: 3 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE MOBILE CHINESE AD GAP FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE MOBILE SECTION ADS FINAL 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko homepage mobile i tylko reklamy między sekcjami.
Decyzja:
- slot nad hero (.fr-ad-top) zostaje ukryty na mobile,
- widoczne sloty międzysekcyjne:
.fr-ad-before-latest,
.fr-ad-after-latest,
.fr-ad-after-worth-reading,
.fr-ad-after-drives,
.fr-ad-after-guides,
- realne reklamy OptAd360 potrafią mieć ok. 325px, więc slot mobile ma 340px,
- .placeholderPlug z napisem "ad" jest ukryty.
========================================================= */
@media (max-width: 768px) {
/* Usuwamy mobile reklamę nad hero, bo zsuwa HERO za nisko */
html body .fr-homepage .fr-ad.fr-ad-top,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-top,
html body .fr-homepage .fr-ad.fr-ad-top .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-top [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-top .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-top .placeholderPlug {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
max-width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* Widoczne reklamy mobile pomiędzy sekcjami */
html body .fr-homepage .fr-ad.fr-ad-before-latest,
html body .fr-homepage .fr-ad.fr-ad-after-latest,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading,
html body .fr-homepage .fr-ad.fr-ad-after-drives,
html body .fr-homepage .fr-ad.fr-ad-after-guides,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-before-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-latest,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-worth-reading,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-drives,
html body .fr-homepage > .fr-wrap > .fr-ad.fr-ad-after-guides {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
height: 340px !important;
min-height: 340px !important;
max-height: 340px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
z-index: 2 !important;
}
html body .fr-homepage .fr-ad.fr-ad-before-latest {
margin-top: 30px !important;
margin-bottom: 40px !important;
}
html body .fr-homepage .fr-ad.fr-ad-after-latest,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading,
html body .fr-homepage .fr-ad.fr-ad-after-drives,
html body .fr-homepage .fr-ad.fr-ad-after-guides {
margin-top: 34px !important;
margin-bottom: 46px !important;
}
/* Wewnętrzne pudełko 4rings-core */
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-after-latest > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-after-drives > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-after-guides > .fr-ad-box,
html body .fr-homepage .fr-ad.fr-ad-before-latest > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage .fr-ad.fr-ad-after-latest > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage .fr-ad.fr-ad-after-drives > .fr-ad-box[aria-hidden="true"],
html body .fr-homepage .fr-ad.fr-ad-after-guides > .fr-ad-box[aria-hidden="true"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 340px !important;
min-height: 340px !important;
max-height: 340px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
position: relative !important;
}
/* Wrapper OptAd360 — część kreacji ma ok. 325px, dlatego nie tniemy do 280px */
html body .fr-homepage .fr-ad.fr-ad-before-latest [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-after-latest [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-after-drives [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-after-guides [data-dest="placeholder"],
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-after-latest .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-after-drives .placeholderOnnetwork,
html body .fr-homepage .fr-ad.fr-ad-after-guides .placeholderOnnetwork {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
height: 340px !important;
min-height: 340px !important;
max-height: 340px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* Usunięcie napisu / fallbacku "ad" */
html body .fr-homepage .fr-ad.fr-ad-before-latest .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-after-latest .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-after-drives .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-after-guides .placeholderPlug,
html body .fr-homepage .fr-ad.fr-ad-before-latest [class*="placeholderPlug"],
html body .fr-homepage .fr-ad.fr-ad-after-latest [class*="placeholderPlug"],
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading [class*="placeholderPlug"],
html body .fr-homepage .fr-ad.fr-ad-after-drives [class*="placeholderPlug"],
html body .fr-homepage .fr-ad.fr-ad-after-guides [class*="placeholderPlug"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}/* Zabezpieczenie, żeby sekcja po reklamie nie wchodziła pod slot */
html body .fr-homepage .fr-ad.fr-ad-before-latest + *,
html body .fr-homepage .fr-ad.fr-ad-after-latest + *,
html body .fr-homepage .fr-ad.fr-ad-after-worth-reading + *,
html body .fr-homepage .fr-ad.fr-ad-after-drives + *,
html body .fr-homepage .fr-ad.fr-ad-after-guides + * {
clear: both !important;
position: relative !important;
z-index: 3 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE MOBILE SECTION ADS FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — MOBILE ADS OPTAD360 IFRAME SAFE HEIGHT FINAL 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko mobilne reklamy Google/OptAd360 na homepage.
Cel:
- dopasować widoczny slot do realnego iframe reklamy 412x343,
- pokazać pełny podpis „Ads by optAd360”,
- nie używać szerokiego selektora .fr-ad,
- nie dotykać headera, menu, hero, kart, PHP ani Rankingi mobile final.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage iframe[id^="google_ads_iframe_"] {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 343px !important;
min-height: 343px !important;
max-height: 343px !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
vertical-align: bottom !important;
}
body.fr-home-active .fr-homepage div:has(> iframe[id^="google_ads_iframe_"]) {
height: 365px !important;
min-height: 365px !important;
max-height: 365px !important;
overflow: visible !important;
}
}
/* =========================================================
KONIEC — MOBILE ADS OPTAD360 IFRAME SAFE HEIGHT FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE TOP AD RHYTHM FINAL 2026-06-10
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: górna reklama na homepage po hero / przed Najnowsze.
Cel:
- odsunąć reklamę od hero,
- dać oddech przed sekcją Najnowsze,
- nie ruszać działania OptAd360,
- nie ruszać typografii, kart, menu ani Rankingi mobile final.
========================================================= */
/* Górna jednostka po hero / przed Najnowsze */
body.fr-home-active .fr-homepage .fr-ad-before-latest,
body.home .fr-homepage .fr-ad-before-latest,
body.home .fr-ad-before-latest {
margin-top: 48px !important;
margin-bottom: 54px !important;
}
/* Jeżeli ad siedzi bezpośrednio po hero — dodatkowy bezpieczny oddech. */
body.fr-home-active .fr-homepage .fr-hero-block + .fr-ad-before-latest,
body.home .fr-homepage .fr-hero-block + .fr-ad-before-latest {
margin-top: 52px !important;
}
/* Jeżeli po reklamie od razu idzie Najnowsze, nie może dotykać reklamy. */
body.fr-home-active .fr-homepage .fr-ad-before-latest + .fr-section,
body.fr-home-active .fr-homepage .fr-ad-before-latest + .fr-latest,
body.fr-home-active .fr-homepage .fr-ad-before-latest + .fr-layout-latest,
body.home .fr-homepage .fr-ad-before-latest + .fr-section,
body.home .fr-homepage .fr-ad-before-latest + .fr-latest,
body.home .fr-homepage .fr-ad-before-latest + .fr-layout-latest {
margin-top: 0 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-before-latest,
body.home .fr-homepage .fr-ad-before-latest,
body.home .fr-ad-before-latest {
margin-top: 34px !important;
margin-bottom: 38px !important;
}
body.fr-home-active .fr-homepage .fr-hero-block + .fr-ad-before-latest,
body.home .fr-homepage .fr-hero-block + .fr-ad-before-latest {
margin-top: 36px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE TOP AD RHYTHM FINAL 2026-06-10
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE ADS CLEAN NORMALIZATION FINAL 2026-06-11
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres:
- tylko placeholdery reklamowe na homepage,
- bez starego slota wewnątrz hero,
- bez zmian w typografii, headerze, kartach i Rankingi mobile final.
Finalny standard:
- desktop/tablet: 970 × 300,
- mobile: 100% × 300,
- placeholdery puste wizualnie: bez szarego tła, ramki i napisu,
- zostawione miejsce na podpis optAd360, żeby nie był ucinany.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad {
display: block !important;
position: relative !important;
clear: both !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 30px auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad > .fr-ad-box {
display: block !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad::before,
body.fr-home-active .fr-homepage .fr-ad::after,
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-ad .placeholderPlug,
body.fr-home-active .fr-homepage .fr-ad [class*="placeholderPlug"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
body.fr-home-active .fr-homepage .fr-ad + .fr-section,
body.fr-home-active .fr-homepage .fr-ad + section,
body.fr-home-active .fr-homepage .fr-ad + div {
clear: both !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top {
margin-top: 18px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest {
margin-top: 34px !important;
margin-bottom: 36px !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-latest,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-guides {
margin-top: 34px !important;
margin-bottom: 36px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad {
width: 100% !important;
max-width: 100% !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 28px auto 38px !important;
padding: 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad > .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-top {
margin-top: 18px !important;
margin-bottom: 30px !important;
}
body.fr-home-active .fr-homepage .fr-ad.fr-ad-before-latest,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-latest,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad.fr-ad-after-guides {
margin-top: 30px !important;
margin-bottom: 40px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE ADS CLEAN NORMALIZATION FINAL 2026-06-11
========================================================= */
/* =========================================================
4RINGS — RANKINGI MOBILE FINAL LOCK
DO NOT REMOVE. DO NOT MOVE.
This must remain the last effective block in homepage.css.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-home-rankings-final {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-card {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
margin: 0 0 20px 0 !important;
padding: 0 0 20px 0 !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-card:nth-child(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-thumb {
display: block !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #f3f3f3 !important;
border-radius: 0 !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-thumb img,
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-card img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-body {
display: block !important;
width: 100% !important;
padding: 0 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-title {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin: 6px 0 6px !important;
font-size: 20px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
color: #111 !important;
text-align: left !important;
padding-bottom: 0.1em !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.35 !important;
color: #666 !important;
margin-top: 6px !important;
}
/* Neutralizacja starych klas / markerów dla pewności i zachowania czystości */
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-home-rankings-final-card::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-rank-number,
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-home-rankings-final .fr-card-rank {
display: none !important;
content: none !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE 4 FIXES (2026 TEST)
========================================================= */
/* ZADANIE 1: Wymuszenie sekcji Warto Przeczytać (jeśli jest w HTML) */
body.fr-home-active .fr-homepage .fr-evergreen-section {
display: block !important;
width: 100% !important;
clear: both !important;
}
/* ZADANIE 2: Najnowsze - Poprawa pustej kolumny na desktopie */
body.fr-home-active .fr-homepage .fr-layout-latest {
width: 100% !important;
max-width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
width: 100% !important;
}
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-layout-latest .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-card,
body.fr-home-active .fr-homepage .fr-layout-latest article {
display: grid !important;
grid-template-columns: minmax(280px, 35%) 1fr !important;
gap: 24px !important;
align-items: center !important;
}
}
/* ZADANIE 3: Usunięcie żółtej belki/tagów pod Napędy */
body.fr-home-active .fr-homepage .fr-layout-drives .fr-drive-strip,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-shortcuts-yellow,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-shortcuts,
body.fr-home-active .fr-homepage .fr-layout-drives::after,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section::after {
display: none !important;
content: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section,
body.fr-home-active .fr-homepage .fr-layout-drives {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* =========================================================
4RINGS — HOMEPAGE FINAL POLISH
Worth reading / Latest width / Older posts CTA
========================================================= */
/* ZADANIE 2: Najnowsze — pełniejsza szerokość */
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage .fr-section-latest,
body.fr-home-active .fr-homepage .fr-latest {
width: 100% !important;
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
}
body.fr-home-active .fr-homepage .fr-latest-grid,
body.fr-home-active .fr-homepage .fr-latest-feed {
width: 100% !important;
max-width: 980px !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-latest .fr-section-head {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
max-width: 980px !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head a,
body.fr-home-active .fr-homepage .fr-latest .fr-section-head a {
white-space: nowrap !important;
}
/* ZADANIE 1: Warto przeczytać */
.fr-home-worth-reading {
margin: 48px 0 !important;
}
.fr-home-worth-reading .fr-evergreen-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
.fr-home-worth-reading .fr-feature-card,
.fr-home-worth-reading .fr-evergreen-card,
.fr-home-worth-reading article {
min-width: 0 !important;
border-radius: 0 !important;
overflow: hidden !important;
}
.fr-home-worth-reading .fr-card-image,
.fr-home-worth-reading .fr-evergreen-thumb,
.fr-home-worth-reading .fr-feature-card > a > div:first-child {
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #eee !important;
}
.fr-home-worth-reading img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
.fr-home-worth-reading h3,
.fr-home-worth-reading .fr-card-title,
.fr-home-worth-reading .fr-evergreen-title {
display: -webkit-box !important;
margin: 8px 0 6px !important;
font-size: 18px !important;
line-height: 1.15 !important;
font-weight: 760 !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
color: #111 !important;
}
/* ZADANIE 3: CTA starsze artykuły */
.fr-older-posts {
display: flex !important;
justify-content: center !important;
margin: 52px auto 60px !important;
width: 100% !important;
}
.fr-older-posts a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 48px !important;
padding: 0 28px !important;
border: 2px solid #111 !important;
border-radius: 0 !important;
color: #111 !important;
background: transparent !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 760 !important;
text-decoration: none !important;
transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
}
.fr-older-posts a:hover,
.fr-older-posts a:focus {
background: #111 !important;
color: #fff !important;
outline: none !important;
}
/* Mobile dla nowych sekcji */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest,
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage .fr-latest-section,
body.fr-home-active .fr-homepage .fr-latest-grid,
body.fr-home-active .fr-homepage .fr-latest-feed {
max-width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-latest .fr-section-head,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-section-head {
align-items: flex-start !important;
}
.fr-home-worth-reading {
margin: 38px 0 !important;
}
.fr-home-worth-reading .fr-evergreen-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.fr-home-worth-reading h3,
.fr-home-worth-reading .fr-card-title,
.fr-home-worth-reading .fr-evergreen-title {
font-size: 19px !important;
line-height: 1.12 !important;
}
.fr-older-posts {
margin: 42px auto 48px !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
.fr-older-posts a {
width: 100% !important;
max-width: 360px !important;
}
}
/* =========================================================
4RINGS — RANKINGI MOBILE FINAL LOCK
Do not remove. Must remain the last effective mobile block.
========================================================= */
@media (max-width: 768px) {
.fr-layout-ranking,
.fr-rankingi,
.fr-section-rankingi,
.fr-home-rankingi,
section[data-section="rankingi"] {
display: block !important;
overflow: visible !important;
}
.fr-layout-ranking .fr-feature-grid,
.fr-layout-ranking .fr-grid,
.fr-rankingi .fr-grid,
.fr-rankingi-grid,
.fr-section-rankingi .fr-grid,
.fr-home-rankingi .fr-grid,
section[data-section="rankingi"] .fr-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
counter-reset: fr-ranking-mobile !important;
}
.fr-layout-ranking .fr-feature-card,
.fr-layout-ranking .fr-feature-large,
.fr-layout-ranking .fr-card,
.fr-layout-ranking article,
.fr-rankingi .fr-card,
.fr-section-rankingi .fr-card,
.fr-home-rankingi .fr-card,
.fr-rankingi-card,
section[data-section="rankingi"] .fr-card {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 0 20px !important;
margin: 0 !important;
border-bottom: 1px solid #eeeeee !important;
border-radius: 0 !important;
overflow: hidden !important;
position: relative !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
counter-increment: fr-ranking-mobile !important;
}
/* UKRYJ 4 I KAŻDY KOLEJNY WPIS */
.fr-layout-ranking .fr-feature-card:nth-child(n+4),
.fr-layout-ranking .fr-feature-large:nth-child(n+4),
.fr-layout-ranking .fr-card:nth-child(n+4),
.fr-layout-ranking article:nth-child(n+4),
.fr-layout-ranking .fr-feature-card:nth-of-type(n+4),
.fr-rankingi .fr-card:nth-child(n+4),
.fr-section-rankingi .fr-card:nth-child(n+4),
.fr-home-rankingi .fr-card:nth-child(n+4),
.fr-rankingi-card:nth-child(n+4),
section[data-section="rankingi"] .fr-card:nth-child(n+4) {
display: none !important;
}
/* OBRAZEK 16:9 NA GÓRZE */
.fr-layout-ranking .fr-card-image,
.fr-layout-ranking .fr-img,
.fr-layout-ranking .fr-feature-card .fr-card-image,
.fr-rankingi .fr-card img,
.fr-section-rankingi .fr-card img,
.fr-home-rankingi .fr-card img,
.fr-rankingi-card img,
section[data-section="rankingi"] .fr-card img {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
border-radius: 0 !important;
margin: 0 0 12px !important;
float: none !important;
position: relative !important;
}
/* KONTENER TEKSTU POD ZDJĘCIEM */
.fr-layout-ranking .fr-card-copy,
.fr-layout-ranking .fr-feature-card .fr-card-copy,
.fr-rankingi .fr-card-content,
.fr-section-rankingi .fr-card-content,
.fr-home-rankingi .fr-card-content,
.fr-rankingi-card-content,
section[data-section="rankingi"] .fr-card-content {
display: block !important;
width: 100% !important;
padding: 0 16px !important;
margin: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
/* TYTUŁ KARTY */
.fr-layout-ranking h3,
.fr-layout-ranking .fr-feature-card h3,
.fr-rankingi .fr-card-title,
.fr-section-rankingi .fr-card-title,
.fr-home-rankingi .fr-card-title,
.fr-rankingi-card-title,
section[data-section="rankingi"] .fr-card-title {
font-size: 20px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
margin: 0 0 8px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-align: left !important;
width: 100% !important;
}
/* ZEROWANIE STARYCH BADGE'Y / NUMERKÓW PIONOWYCH LUB NA BOKU */
.fr-layout-ranking .fr-feature-card::before,
.fr-layout-ranking .fr-feature-large::before,
.fr-layout-ranking .fr-rank-number,
.fr-layout-ranking .fr-card-rank,
.fr-layout-ranking .fr-ranking-number {
display: none !important;
}
/* BADGE / NUMER 1,2,3 W ZDJĘCIU NA MOBILE */
.fr-layout-ranking .fr-feature-card .fr-card-image::before {
counter-increment: fr-ranking-mobile !important;
content: counter(fr-ranking-mobile) !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 800 !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
border-radius: 0 !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-evergreen-section {
margin-block: 36px !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-card {
display: grid !important;
grid-template-columns: 120px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 12px 0 !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-card img {
margin-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-evergreen-title {
font-size: 15px !important;
}
}
/* ZADANIE 2: Najnowsze - Optymalizacja prawej strony */
body.fr-home-active .fr-homepage .fr-layout-latest.fr-section .fr-section-head {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
}
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid {
width: 100% !important;
max-width: 100% !important; /* Pełna dostępna szerokość kontenera */
}
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid .fr-card,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-latest-grid article {
grid-template-columns: minmax(280px, 35%) 1fr !important; /* Lepsze wypełnienie prawej kolumny tekstem */
}
}
/* ZADANIE 3: Chińskie Marki - Dark Hub Polish */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
background: #15181E !important; /* Premium grafit/granat */
padding: 56px 0 !important;
margin-block: 48px !important;
color: #f8f9fa !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head h2 {
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card h3 {
color: #ffffff !important;
line-height: 1.25 !important;
margin-bottom: 8px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,0.6) !important;
}
/* Paski brandów pod sekcją */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner {
flex-wrap: wrap !important;
overflow-x: hidden !important;
justify-content: flex-start !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
padding: 40px 0 !important;
margin-block: 36px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip {
flex: 1 1 calc(50% - 6px) !important; /* Dwa równe przyciski obok siebie, brak scrolla */
min-width: 0 !important;
width: auto !important;
}
}
/* ZADANIE 4: Rytm Reklam (bez zmian wielkości) */
body.fr-home-active .fr-homepage .fr-ad {
margin-block: 44px !important;
clear: both !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad {
margin-block: 36px !important;
}
}
/* ZADANIE 5: Zobacz starsze artykuły - przycisk archiwum */
body.fr-home-active .fr-homepage .fr-older-posts {
display: flex !important;
justify-content: center !important;
margin: 56px 0 64px !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-older-posts a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 52px !important;
padding: 0 36px !important;
border: 2px solid #111 !important;
background: transparent !important;
color: #111 !important;
font-size: 15px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.040em !important;
text-decoration: none !important;
border-radius: 0 !important;
transition: all 0.2s ease !important;
}
body.fr-home-active .fr-homepage .fr-older-posts a:hover,
body.fr-home-active .fr-homepage .fr-older-posts a:focus {
background: #111 !important;
color: #fff !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-older-posts {
margin: 40px 0 48px !important;
padding: 0 16px !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-older-posts a {
width: 100% !important;
max-width: 380px !important;
}
}
/* ZADANIE 7: Usunięcie pustej belki pod Napędy */
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section::after,
body.fr-home-active .fr-homepage .fr-layout-drives::after,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-section-inner::after,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-drive-strip::after {
display: none !important;
content: none !important;
border: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section {
border-bottom: 0 !important;
margin-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-drive-strip {
border-bottom: 0 !important;
}
/* =========================================================
4RINGS — RANKINGI MOBILE FINAL LOCK
Do not remove. Must remain the last effective mobile block.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking {
display: block !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
align-items: start !important;
}
/* ZADANIE 8: 3 DUŻE PIONOWE KARTY (Wymuszony Layout) */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card,
body.fr-home-active .fr-homepage .fr-layout-ranking article {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
padding: 0 0 20px !important;
margin: 0 !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
/* UKRYWAMY 4 I KOLEJNE WPISY */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card:nth-of-type(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking article:nth-of-type(n+4) {
display: none !important;
}
/* ZDJĘCIA NA PEŁNĄ SZEROKOŚĆ (16:9) */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking article .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 14px !important;
overflow: hidden !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
display: block !important;
}
/* TREŚĆ POD ZDJĘCIEM */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
display: inline-flex !important;
width: auto !important;
font-size: 11px !important;
padding: 5px 8px !important;
margin: 0 0 10px !important;
background: #1E8E3E !important;
color: #ffffff !important;
border-color: #1E8E3E !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card h3 {
width: 100% !important;
font-size: 20px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
margin: 0 0 10px !important;
padding-bottom: 0.1em !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-align: left !important;
color: #111 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 6px !important;
color: #666666 !important;
}
/* NUMERKI W ZDJĘCIU */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image::before {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}
/* Twarde mapowanie numerów dla widocznych trzech elementów */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(1) .fr-card-image::before { content: "1" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(2) .fr-card-image::before { content: "2" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(3) .fr-card-image::before { content: "3" !important; }
/* Ukrycie starej numeracji tekstowej z HTML jeśli istniała */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card::before {
display: none !important;
content: none !important;
}
}
/* =========================================================
ZADANIE 1: PASEK "DZIŚ NA 4RINGS"
========================================================= */
.fr-today-bar {
display: flex !important;
align-items: center !important;
gap: 18px !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
.fr-today-label {
border-left: none !important;
padding-left: 0 !important;
}
.fr-today-label,
.fr-today-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #111 !important;
font-weight: 760 !important;
text-decoration: none !important;
line-height: 1 !important;
}
.fr-today-label::before,
.fr-today-link::before {
content: "" !important;
display: inline-block !important;
width: 4px !important;
height: 20px !important;
background: #E12626 !important;
flex: 0 0 auto !important;
}
.fr-today-link--aktualnosci::before { background: #E12626 !important; }
.fr-today-link--testy::before { background: #1565C0 !important; }
.fr-today-link--rankingi::before { background: #1E8E3E !important; }
.fr-today-link--poradniki::before { background: #5B3CC4 !important; }
.fr-today-link--napedy::before { background: #FFC400 !important; }
.fr-today-link--rynek::before { background: #F57C00 !important; }
.fr-today-link--chinskie::before,
.fr-today-link--chinskie-marki::before { background: #8B1E3F !important; }
@media (max-width: 768px) {
.fr-today-bar {
gap: 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.fr-today-bar::-webkit-scrollbar {
display: none !important;
}
.fr-today-label::before,
.fr-today-link::before {
width: 4px !important;
height: 18px !important;
}
}
/* =========================================================
ZADANIE 2: BELKA MAREK CHIŃSKICH (BEZ KÓŁEK I NAGŁÓWKA)
========================================================= */
.fr-homepage .fr-layout-chinese .fr-brand-strip,
.fr-brand-strip {
margin-top: 18px !important;
padding: 14px 16px !important;
border: 1px solid #eeeeee !important;
background: #fafafa !important;
display: block !important;
}
.fr-brand-logo-list {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px 12px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip,
.fr-brand-chip {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
min-height: 38px !important;
padding: 8px 14px !important;
border: 1px solid #dddddd !important;
background: #ffffff !important;
color: #111111 !important;
font-size: 13px !important;
line-height: 1 !important;
font-weight: 760 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease !important;
box-shadow: none !important;
}
/* Usunięcie starych pseudo-kółek/gradientów z chińskich marek */
.fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip::before,
.fr-brand-chip::before {
content: none !important;
display: none !important;
}
.fr-brand-chip img {
display: block !important;
max-width: 76px !important;
max-height: 22px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
.fr-brand-chip span {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
.fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip:hover,
.fr-brand-chip:hover {
border-color: #8B1E3F !important;
background: #fff !important;
transform: translateY(-1px) !important;
}
}
@media (max-width: 768px) {
.fr-homepage .fr-layout-chinese .fr-brand-strip,
.fr-brand-strip {
margin-top: 16px !important;
padding: 12px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
}
.fr-brand-logo-list {
justify-content: flex-start !important;
flex-wrap: nowrap !important;
width: max-content !important;
min-width: 100% !important;
gap: 10px !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip,
.fr-brand-chip {
min-height: 36px !important;
padding: 8px 12px !important;
font-size: 13px !important;
}
}
/* =========================================================
ZADANIE 1: PASKI KATEGORII W "DZIŚ NA 4RINGS"
========================================================= */
.fr-homepage .fr-today-bar {
display: flex !important;
align-items: center !important;
gap: 18px !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
.fr-homepage .fr-today-label,
.fr-homepage .fr-today-bar .fr-today-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #111 !important;
font-weight: 760 !important;
text-decoration: none !important;
line-height: 1 !important;
}
.fr-homepage .fr-today-label::before,
.fr-homepage .fr-today-bar .fr-today-link::before {
content: "" !important;
display: inline-block !important;
width: 4px !important;
height: 20px !important;
background: #E12626 !important;
flex: 0 0 auto !important;
margin-right: 2px !important;
}
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--aktualnosci::before { background-color: #E12626 !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--testy::before { background-color: #1565C0 !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--rankingi::before { background-color: #1E8E3E !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--poradniki::before { background-color: #5B3CC4 !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--napedy::before { background-color: #FFC400 !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--rynek::before { background-color: #F57C00 !important; }
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--chinskie-marki::before,
.fr-homepage .fr-today-bar .fr-today-link.fr-today-link--chinskie::before { background-color: #8B1E3F !important; }
@media (max-width: 768px) {
.fr-homepage .fr-today-label::before,
.fr-homepage .fr-today-bar .fr-today-link::before {
height: 18px !important;
}
}
/* =========================================================
ZADANIE 2: WYMUSZENIE WIDOCZNOŚCI KART NA DESKTOPIE
========================================================= */
@media (min-width: 1025px) {
.fr-homepage .fr-layout-chinese .fr-feature-card,
.fr-homepage .fr-layout-tests .fr-feature-card,
.fr-homepage .fr-layout-drives .fr-feature-card,
.fr-homepage .fr-layout-ranking .fr-feature-card,
.fr-homepage .fr-layout-guides .fr-feature-card,
.fr-homepage .fr-layout-market .fr-feature-card {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
}
.fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large),
.fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) {
display: grid !important;
}
/* Testy: Zmieniamy układ na 4 równe karty na desktopie */
.fr-homepage .fr-layout-tests .fr-feature-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* =========================================================
ZADANIE: NAPRAWA SEKCJI RANKINGI HOMEPAGE
========================================================= */
@media (min-width: 1025px) {
.fr-homepage .fr-layout-ranking {
width: min(1320px, calc(100vw - 96px)) !important;
max-width: 1320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
gap: 16px 28px !important;
align-items: stretch !important;
}
/* Główna karta rankingu (lewa) */
.fr-homepage .fr-layout-ranking .fr-feature-large {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 0 !important;
border: 0 !important;
overflow: visible !important;
background: transparent !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 16px 0 !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy {
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
height: auto !important;
}
/* Małe karty rankingu po prawej (2-4) */
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
grid-column: 2 !important;
display: grid !important;
grid-template-columns: 180px minmax(0, 1fr) !important;
gap: 18px !important;
align-items: center !important;
padding: 0 0 20px !important;
border-bottom: 1px solid #e5e5e5 !important;
margin: 0 !important;
overflow: visible !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large):last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image {
display: block !important;
width: 180px !important;
max-width: 180px !important;
height: 130px !important;
min-height: 130px !important;
aspect-ratio: 16 / 11 !important;
margin: 0 !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) .fr-card-image img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy {
padding: 0 !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card *,
.fr-homepage .fr-layout-ranking .fr-feature-large * {
min-width: 0 !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: 26px !important;
line-height: 1.15 !important;
margin: 10px 0 12px !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large .fr-badge {
margin-bottom: 8px !important;
align-self: flex-start !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) h3 {
font-size: 18px !important;
line-height: 1.2 !important;
margin: 0 0 6px !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) p {
display: none !important;
}
.fr-homepage .fr-layout-ranking .fr-feature-large p {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
margin-bottom: 12px !important;
font-size: 15px !important;
line-height: 1.45 !important;
}
}
/* Odblokowanie ukrytych kart na urządzeniach mobilnych / tabletach */
@media (max-width: 1024px) {
.fr-homepage .fr-layout-tests .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-guides .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-drives .fr-feature-card:nth-of-type(n) {
display: flex !important;
}
.fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large):nth-of-type(n) {
display: grid !important;
}
/* Całkowite odblokowanie ukrytych kart przez reguły nth-of-type we wszystkich sekcjach i na każdym ekranie */
.fr-homepage .fr-layout-chinese .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-drives .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-tests .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-guides .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(n),
.fr-homepage .fr-layout-market .fr-feature-card:nth-of-type(n) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
}
.fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large):nth-of-type(n),
.fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large):nth-of-type(n) {
display: grid !important;
}
/* Testy: Gwarancja 4 kolumn (wymuszony pełny rządek) na desktopie */
.fr-homepage .fr-layout-tests .fr-feature-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
}
/* =========================================================
4RINGS — TODAY BAR LIGHTER TYPOGRAPHY
========================================================= */
.fr-today-label {
font-weight: 720 !important;
letter-spacing: 0.005em !important;
}
.fr-today-link,
.fr-today-bar a {
font-weight: 600 !important;
letter-spacing: 0 !important;
}
@media (max-width: 768px) {
.fr-today-label {
font-weight: 700 !important;
}
.fr-today-link,
.fr-today-bar a {
font-weight: 600 !important;
}
}
/* =========================================================
4RINGS — FINAL MOBILE HOMEPAGE SECTION LAYOUT
Hero / Najnowsze / Testy / Napędy / Rankingi / Poradniki / Rynek
========================================================= */
/* HOMEPAGE CONTROLLED TITLES - DESKTOP & GLOBAL */
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
line-height: 1.12 !important;
padding-bottom: 0.08em !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.18 !important;
padding-bottom: 0.08em !important;
}
@media (max-width: 768px) {
/* HOMEPAGE CONTROLLED TITLES - MOBILE */
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-main-hero .fr-hero-copy strong {
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
max-height: none !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
line-height: 1.15 !important;
padding-bottom: 0.10em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.22 !important;
padding-bottom: 0.10em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
/* Bezpieczny clamp i line-height dla dolnych sekcji */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy h3 {
line-height: 1.24 !important;
padding-bottom: 0.08em !important;
}
/* WSPÓLNA SIATKA (TESTY, NAPĘDY-MAŁE, RANKINGI-MAŁE, PORADNIKI-MAŁE, RYNEK-MAŁE) */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* DUŻE KARTY (RANKINGI, PORADNIKI, RYNEK) */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child {
display: block !important;
padding-bottom: 16px !important;
border-bottom: 1px solid #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 10px !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:first-child .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:first-child .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:first-child .fr-card-copy h3 {
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 740 !important;
margin: 8px 0 6px !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* MAŁE KARTY */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child),
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
position: relative !important;
padding: 12px 0 !important;
border-bottom: 1px solid #eeeeee !important;
min-width: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-image {
width: 116px !important;
max-width: 116px !important;
height: 78px !important;
margin: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-img {
width: 116px !important;
height: 78px !important;
max-width: 116px !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-copy {
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-card:not(.fr-feature-large) .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(:first-child):not(.fr-feature-large) .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card:not(:first-child) .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card:not(:first-child) .fr-card-copy h3 {
font-size: 14px !important;
font-weight: 720 !important;
margin: 5px 0 5px !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
/* =========================================================
4RINGS — CHINESE BRANDS LOGO STRIP FINAL
========================================================= */
.fr-homepage .fr-layout-chinese .fr-brand-strip {
display: block !important;
margin: 26px 0 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
width: 100% !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip__inner {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: stretch !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-chip {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 1 calc(16.666% - 12px) !important;
min-width: 130px !important;
max-width: 100% !important;
min-height: 68px !important;
padding: 12px 18px !important;
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-bottom: 3px solid transparent !important;
border-radius: 4px !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
.fr-homepage .fr-layout-chinese .fr-brand-chip:hover {
border-color: #d8d8d8 !important;
border-bottom-color: #8B1E3F !important;
background: #fafafa !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.03) !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-chip:hover .fr-brand-chip__logo {
opacity: 1 !important;
transform: scale(1.03) !important;
}
}
.fr-homepage .fr-layout-chinese .fr-brand-chip:active {
background: #fafafa !important;
border-bottom-color: #8B1E3F !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-chip__logo {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 130px !important;
max-height: 34px !important;
object-fit: contain !important;
margin: 0 auto !important;
opacity: 0.88 !important;
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
/* Kasowanie starych reguł tekstowych i reliktów */
.fr-homepage .fr-layout-chinese .fr-brand-chip::before,
.fr-homepage .fr-layout-chinese .fr-brand-strip a::before,
.fr-homepage .fr-layout-chinese .fr-brand-chip span {
display: none !important;
content: none !important;
}
@media (max-width: 1024px) {
.fr-homepage .fr-layout-chinese .fr-brand-chip {
flex: 1 1 calc(25% - 11px) !important;
}
}
@media (max-width: 768px) {
.fr-homepage .fr-layout-chinese .fr-brand-strip {
margin: 20px 0 0 !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip__inner {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
gap: 12px !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-strip__inner::-webkit-scrollbar {
display: none !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-chip {
flex: 0 0 auto !important;
width: 140px !important;
min-width: 140px !important;
max-width: 140px !important;
min-height: 60px !important;
padding: 10px 14px !important;
border-bottom-width: 2px !important;
transform: none !important;
}
.fr-homepage .fr-layout-chinese .fr-brand-chip__logo {
max-height: 30px !important;
}
}
/* =========================================================
4RINGS — DRIVES STRIP / CHIPS FINAL
Zadanie: elegancki moduł skrótów dla Napędów
========================================================= */
.fr-homepage .fr-layout-drives .fr-drive-strip {
display: block !important;
margin: 26px 0 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
width: 100% !important;
}
.fr-homepage .fr-layout-drives .fr-drive-strip__inner {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: stretch !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip {
display: flex !important;
align-items: center !important;
flex: 1 1 calc(25% - 11px) !important;
min-width: 220px !important;
max-width: 100% !important;
min-height: 62px !important;
padding: 12px 16px !important;
background: #ffffff !important;
border: 1px solid #e8e8e8 !important;
border-bottom: 3px solid transparent !important;
border-radius: 4px !important;
text-decoration: none !important;
box-sizing: border-box !important;
transition: all 0.2s ease !important;
box-shadow: none !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip:hover {
border-color: #d8d8d8 !important;
border-bottom-color: #FFC400 !important;
background: #fafafa !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 14px rgba(0,0,0,0.03) !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip__code {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 24px !important;
background: #FFC400 !important;
color: #111111 !important;
font-size: 11px !important;
font-weight: 760 !important;
border-radius: 2px !important;
margin-right: 12px !important;
letter-spacing: 0.020em !important;
flex-shrink: 0 !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip__label {
flex: 1 1 auto !important;
color: #111111 !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip__arrow {
color: #aaaaaa !important;
font-size: 16px !important;
margin-left: 8px !important;
transition: transform 0.2s ease, color 0.2s ease !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip:hover .fr-drive-chip__arrow {
transform: translateX(4px) !important;
color: #111111 !important;
}
@media (max-width: 768px) {
.fr-homepage .fr-layout-drives .fr-drive-strip {
margin: 20px 0 0 !important;
}
.fr-homepage .fr-layout-drives .fr-drive-strip__inner {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 4px !important;
gap: 12px !important;
}
.fr-homepage .fr-layout-drives .fr-drive-strip__inner::-webkit-scrollbar {
display: none !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip {
flex: 0 0 auto !important;
min-width: 210px !important;
width: auto !important;
min-height: 58px !important;
padding: 10px 14px !important;
border-bottom-width: 2px !important;
transform: none !important;
}
.fr-homepage .fr-layout-drives .fr-drive-chip:hover {
transform: none !important;
box-shadow: none !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE RESCUE FINAL 2026
Typography + badges + isolated rankings + MG logo
DO NOT ADD ANYTHING BELOW THIS BLOCK
========================================================= */
body.fr-home-active,
body.fr-home-active .fr-homepage {
background: #F8F8F6 !important;
color: #222222 !important;
--fr-font-heading-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-body-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-soft-bg: #F8F8F6;
--fr-soft-card: #FFFFFF;
--fr-soft-text: #222222;
--fr-soft-muted: #667085;
--fr-soft-border: #E6E6E3;
--fr-soft-ad: #F1F1EF;
--fr-brand-red: #E12626;
--fr-badge-mono-bg: #1A1A1A;
--fr-badge-mono-fg: #FFFFFF;
}
/* One typography system */
body.fr-home-active .fr-homepage,
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-homepage span,
body.fr-home-active .fr-homepage li,
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-card-copy p,
body.fr-home-active .fr-homepage .fr-feature-card p {
font-family: var(--fr-font-body-final) !important;
text-align: left !important;
}
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage strong,
body.fr-home-active .fr-homepage .fr-section-head,
body.fr-home-active .fr-homepage .fr-section-head a,
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage .fr-older-posts a,
body.fr-home-active .fr-homepage .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-drive-chip,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a,
body.fr-home-active .fr-homepage .fr-home-rankings-final-title {
font-family: var(--fr-font-heading-final) !important;
}
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-card h3 {
color: #222222 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
}
body.fr-home-active .fr-homepage .fr-meta {
color: #667085 !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
}
/* Monochrome badges: identical everywhere */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage article .fr-badge,
body.fr-home-active .fr-homepage .fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage .fr-cat-aktualnosci,
body.fr-home-active .fr-homepage .fr-cat-testy,
body.fr-home-active .fr-homepage .fr-cat-rankingi,
body.fr-home-active .fr-homepage .fr-cat-poradniki,
body.fr-home-active .fr-homepage .fr-cat-napedy,
body.fr-home-active .fr-homepage .fr-cat-rynek,
body.fr-home-active .fr-homepage .fr-cat-chinskie {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-height: 18px !important;
padding: 4px 7px !important;
margin: 0 0 6px !important;
border: 0 !important;
border-radius: 0 !important;
background: #1A1A1A !important;
color: #FFFFFF !important;
--badge-bg: #1A1A1A !important;
--badge-fg: #FFFFFF !important;
font-family: var(--fr-font-heading-final) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
box-shadow: none !important;
}
/* Section headings and links */
body.fr-home-active .fr-homepage .fr-section-head h2 {
font-family: var(--fr-font-heading-final) !important;
font-size: clamp(26px, 3vw, 36px) !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
color: #222222 !important;
}
body.fr-home-active .fr-homepage .fr-section-head h2::before {
content: "" !important;
width: 5px !important;
background: var(--fr-color, #E12626) !important;
}
body.fr-home-active .fr-homepage .fr-section-head a {
font-family: var(--fr-font-heading-final) !important;
color: var(--fr-color, #E12626) !important;
font-size: 12.5px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -.006em !important;
text-transform: none !important;
white-space: nowrap !important;
}
body.fr-home-active .fr-homepage .fr-section-head a::after {
content: "\2192" !important;
display: inline-block !important;
margin-left: 5px !important;
}
/* Hero */
body.fr-home-active .fr-homepage .fr-hero-copy strong {
font-family: var(--fr-font-heading-final) !important;
color: #FFFFFF !important;
font-weight: 800 !important;
letter-spacing: -.025em !important;
line-height: 1 !important;
}
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong {
font-size: clamp(34px, 4vw, 52px) !important;
line-height: .98 !important;
}
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong {
font-size: clamp(17px, 1.7vw, 22px) !important;
line-height: 1.04 !important;
}
/* Generic card title rhythm */
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-mobile-recommended-card-title {
font-family: var(--fr-font-heading-final) !important;
color: #222222 !important;
font-size: clamp(16px, 1.45vw, 20px) !important;
line-height: 1.12 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
}
body.fr-home-active .fr-homepage .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3 {
font-size: clamp(24px, 2.7vw, 34px) !important;
line-height: 1.03 !important;
letter-spacing: -.025em !important;
}
/* Equal desktop titles for card sections */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card h3 {
font-size: 18px !important;
line-height: 1.12 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
}
}
/* Soft light surface */
body.fr-home-active .fr-homepage .fr-news-row,
body.fr-home-active .fr-homepage .fr-feature-card,
body.fr-home-active .fr-homepage .fr-card,
body.fr-home-active .fr-homepage article,
body.fr-home-active .fr-homepage .fr-brief-item,
body.fr-home-active .fr-homepage .fr-shortcuts a {
border-color: #E6E6E3 !important;
}
body.fr-home-active .fr-homepage .fr-ad-box {
background: #F1F1EF !important;
border-color: transparent !important;
}
/* Chinese dark hub contrast */
body.fr-home-active .fr-homepage .fr-layout-chinese {
background: #101114 !important;
color: #FFFFFF !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese h2,
body.fr-home-active .fr-homepage .fr-layout-chinese h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese a {
color: #FFFFFF !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese p,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-card-copy p {
color: rgba(255,255,255,.78) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,.62) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-news-row {
border-color: rgba(255,255,255,.11) !important;
}
/* Brand chips / MG logo safety */
body.fr-home-active .fr-homepage .fr-brand-strip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
background: rgba(255,255,255,.045) !important;
border-color: rgba(255,255,255,.14) !important;
}
body.fr-home-active .fr-homepage .fr-brand-strip__inner {
display: grid !important;
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-brand-chip {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 38px !important;
min-height: 38px !important;
padding: 6px 10px !important;
background: #FFFFFF !important;
border: 1px solid rgba(255,255,255,.18) !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-brand-chip img {
display: block !important;
width: 100% !important;
max-width: 92px !important;
height: 24px !important;
max-height: 24px !important;
object-fit: contain !important;
object-position: center !important;
filter: none !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-brand-strip__inner {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.fr-home-active .fr-homepage .fr-brand-chip {
height: 34px !important;
min-height: 34px !important;
padding: 5px 8px !important;
}
body.fr-home-active .fr-homepage .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-brand-chip img {
max-width: 78px !important;
height: 20px !important;
max-height: 20px !important;
}
}
/* =========================================================
4RINGS — ISOLATED RANKINGS FINAL LOCK
This section must stay last.
========================================================= */
body.fr-home-active .fr-homepage .fr-home-rankings-final,
body.fr-home-active .fr-homepage .fr-layout-ranking {
--fr-color: #1E8E3E !important;
counter-reset: none !important;
counter-increment: none !important;
}
/* kill every old number source */
body.fr-home-active .fr-homepage .fr-home-rankings-final *,
body.fr-home-active .fr-homepage .fr-layout-ranking * {
counter-reset: none !important;
counter-increment: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final *::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final *::after,
body.fr-home-active .fr-homepage .fr-layout-ranking *::before,
body.fr-home-active .fr-homepage .fr-layout-ranking *::after {
counter-reset: none !important;
counter-increment: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card::after,
body.fr-home-active .fr-homepage .fr-home-rankings-final-link::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final-link::after,
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-image::after,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-rank {
content: none !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.38fr) minmax(320px, .9fr) !important;
grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
gap: 16px 24px !important;
align-items: stretch !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card {
display: block !important;
min-width: 0 !important;
border-bottom: 1px solid #E6E6E3 !important;
background: transparent !important;
padding: 0 0 12px !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card:not(.fr-home-rankings-final-card-main) {
grid-column: 2 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-link {
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
width: 100% !important;
color: #222222 !important;
text-decoration: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-link {
display: flex !important;
flex-direction: column !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb {
display: block !important;
width: 128px !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-thumb {
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb img,
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb .fr-img {
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
filter: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-body {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
min-width: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-body {
padding-top: 14px !important;
gap: 7px !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-title {
display: -webkit-box !important;
margin: 0 !important;
font-family: var(--fr-font-heading-final) !important;
color: #222222 !important;
font-size: 15px !important;
line-height: 1.16 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-title {
font-size: clamp(24px, 2.7vw, 34px) !important;
line-height: 1.03 !important;
letter-spacing: -.025em !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-excerpt {
display: -webkit-box !important;
color: #2D3748 !important;
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 450 !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-meta {
color: #667085 !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
}
/* legacy fallback for old PHP */
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.38fr) minmax(320px, .9fr) !important;
grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
gap: 16px 24px !important;
counter-reset: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
grid-column: 1 !important;
grid-row: 1 / span 3 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:not(.fr-feature-large) {
grid-column: 2 !important;
display: grid !important;
grid-template-columns: 128px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-home-rankings-final-grid,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
gap: 22px !important;
width: 100% !important;
max-width: 100% !important;
counter-reset: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large {
display: block !important;
grid-column: auto !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 0 18px !important;
border-bottom: 1px solid #E6E6E3 !important;
background: transparent !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-card:nth-child(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-child(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-link,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-link,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card > a,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image + .fr-card-copy {
display: block !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-thumb,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-thumb,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-body,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-body,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-copy {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
width: 100% !important;
padding: 10px 0 0 !important;
gap: 6px !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-title,
body.fr-home-active .fr-homepage .fr-home-rankings-final-card-main .fr-home-rankings-final-title,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-large h3 {
font-size: 20px !important;
line-height: 1.08 !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
-webkit-line-clamp: 3 !important;
}
body.fr-home-active .fr-homepage .fr-home-rankings-final-excerpt,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card p {
display: none !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE FINAL SAFE STATE WITHOUT RANKINGS
Scope: remove old rankings module, fix brand chips, spacing.
DO NOT append future rules below this block unless intentionally replacing it.
========================================================= */
/* 1) Rankingi: temporarily removed. Hide every old/stale ranking markup from cache. */
body.fr-home-active .fr-homepage .fr-layout-ranking,
body.fr-home-active .fr-homepage .fr-home-rankings-final,
body.fr-home-active .fr-homepage .fr-ad-after-rankings {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking *,
body.fr-home-active .fr-homepage .fr-home-rankings-final * {
counter-reset: none !important;
counter-increment: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking *::before,
body.fr-home-active .fr-homepage .fr-layout-ranking *::after,
body.fr-home-active .fr-homepage .fr-home-rankings-final *::before,
body.fr-home-active .fr-homepage .fr-home-rankings-final *::after {
content: none !important;
display: none !important;
}
/* 2) Warto przeczytać: odsuń tytuły od lewej krawędzi na desktopie. */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading article .fr-card-copy {
padding: 10px 12px 14px !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-badge,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 3) Chińskie marki: brand chips must link normally and never turn grey after tap/click. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner {
-webkit-tap-highlight-color: transparent !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-shortcuts a {
background: #ffffff !important;
color: #222222 !important;
border-color: rgba(255,255,255,.18) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
text-decoration: none !important;
outline: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:visited,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:active,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a:visited,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a:focus,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a:active {
background: #ffffff !important;
color: #222222 !important;
border-color: rgba(255,255,255,.28) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 120px !important;
max-height: 42px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
opacity: .86 !important;
filter: none !important;
}
/* 4) Napędy mobile: odsuń plakietkę pod dużym zdjęciem od obrazu i wyrównaj do lewej. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 14px 16px 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy > .fr-badge {
margin: 0 0 10px 0 !important;
align-self: flex-start !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large p,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* 5) Safety: keep post-card badges consistent, but do not touch typography scale. */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage article .fr-badge {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
min-height: 18px !important;
padding: 4px 7px !important;
border-radius: 0 !important;
white-space: nowrap !important;
}
/* =========================================================
4RINGS — HOMEPAGE NO-RANKINGS POLISH V2
Badge alignment / brand links visual state / latest mobile
This intentionally replaces the previous final safe-state refinements.
========================================================= */
/* 1) Warto przeczytać — desktop: badge/title/meta align to image edge and sit closer to image. */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading article .fr-card-copy {
padding: 7px 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-badge,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-badge {
margin-top: 0 !important;
margin-bottom: 6px !important;
}
}
/* 2) Testy samochodów — badges/titles closer to image and aligned to image edge. */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding: 7px 0 12px !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-tests h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge {
margin-top: 0 !important;
margin-bottom: 6px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding-top: 6px !important;
}
}
/* 3) Napędy — large card badge aligned to left edge of main image on desktop and mobile. */
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 9px 0 0 !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy > .fr-badge {
margin: 0 0 9px 0 !important;
align-self: flex-start !important;
transform: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large p,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 10px 0 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy > .fr-badge {
margin-bottom: 8px !important;
}
}
/* 4) Najnowsze mobile — badge/title/meta aligned with the image edge. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest-section .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-section .fr-news-copy,
body.fr-home-active .fr-homepage .fr-latest-grid article .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-grid article .fr-news-copy,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card .fr-card-copy {
padding: 7px 0 12px !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-latest-section .fr-badge,
body.fr-home-active .fr-homepage .fr-latest-section h3,
body.fr-home-active .fr-homepage .fr-latest-section .fr-meta,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-badge,
body.fr-home-active .fr-homepage .fr-latest-grid h3,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-meta {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.fr-home-active .fr-homepage .fr-latest-section .fr-badge,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-badge {
margin-top: 0 !important;
margin-bottom: 6px !important;
}
}
/* 5) Chinese brand chips — prevent grey tap/active state and keep logos readable. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip {
-webkit-tap-highlight-color: transparent !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:link,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:visited,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:active {
background: #ffffff !important;
color: #222222 !important;
border-color: rgba(255,255,255,.24) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
outline: none !important;
text-decoration: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 120px !important;
max-height: 42px !important;
object-fit: contain !important;
object-position: center center !important;
margin: 0 auto !important;
opacity: .9 !important;
filter: none !important;
}
/* 6) No rankings safety — keep stale/cached ranking markup hidden until a new isolated module is built. */
body.fr-home-active .fr-homepage .fr-layout-ranking,
body.fr-home-active .fr-homepage .fr-home-rankings-final,
body.fr-home-active .fr-homepage .fr-ad-after-rankings {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
4RINGS — NO RANKINGS POLISH V3
Mobile/card alignment + brand tag archive safety
========================================================= */
/* Mobile: Najnowsze — title/copy slightly away from the left edge. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest-section .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-section .fr-news-copy,
body.fr-home-active .fr-homepage .fr-latest-grid article .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-grid article .fr-news-copy,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-feature-card .fr-card-copy {
padding: 7px 10px 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
}
/* Mobile: Warto przeczytać — prevent titles from touching the left edge. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading article .fr-card-copy {
padding: 7px 10px 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
}
/* Desktop: Warto przeczytać — title/badge/meta away from the image edge, but still aligned. */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading article .fr-card-copy {
padding: 7px 10px 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
}
/* Testy: badges closer to images, titles safely away from left edge. */
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding: 5px 10px 12px !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy > .fr-badge {
margin-top: 0 !important;
margin-bottom: 6px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding: 4px 10px 12px !important;
}
}
/* Chińskie marki: main-card badge under the first image aligned to image edge on mobile. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large .fr-card-copy {
padding: 10px 0 0 !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large .fr-card-copy > .fr-badge {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
align-self: flex-start !important;
transform: none !important;
}
}
/* Napędy: main-card title/copy away from the left edge; badge remains aligned and separated from image. */
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 9px 12px 0 !important;
margin: 0 !important;
align-items: flex-start !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy > .fr-badge {
margin: 0 0 9px 0 !important;
align-self: flex-start !important;
transform: none !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large .fr-card-copy {
padding: 10px 12px 0 !important;
}
}
/* Mobile: Poradniki and Rynek card titles/copy away from left edge. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-guides .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-guides .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-market .fr-feature-card .fr-card-copy {
padding: 8px 10px 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
}
/* Chinese brand chips: never use grey active state; keep link target visible/real. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:link,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:visited,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:active {
background: #ffffff !important;
color: #222222 !important;
border-color: rgba(255,255,255,.24) !important;
opacity: 1 !important;
filter: none !important;
box-shadow: none !important;
transform: none !important;
outline: none !important;
text-decoration: none !important;
-webkit-tap-highlight-color: transparent !important;
}
/* =========================================================
4RINGS — FINAL MICROFIX V4
NIO link handled in PHP / mobile Testy title offset
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding-left: 14px !important;
padding-right: 12px !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3 a {
margin-left: 0 !important;
padding-left: 0 !important;
text-indent: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy > .fr-badge {
margin-top: 0 !important;
margin-left: 0 !important;
margin-bottom: 6px !important;
align-self: flex-start !important;
}
}
/* No rankings safety — keep stale/cached ranking markup hidden until the new module is built from scratch. */
body.fr-home-active .fr-homepage .fr-layout-ranking,
body.fr-home-active .fr-homepage .fr-home-rankings-final,
body.fr-home-active .fr-homepage .fr-ad-after-rankings {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* =========================================================
4RINGS — RANKINGI FRESH V2 / STABLE TYPOGRAPHY
Isolated module. No old counters. No global typography changes.
========================================================= */
/* Keep old/cached ranking layouts hidden, but allow the new fresh module. */
body.fr-home-active .fr-homepage .fr-layout-ranking,
body.fr-home-active .fr-homepage .fr-home-rankings-final,
body.fr-home-active .fr-homepage .fr-ad-after-rankings {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh,
body.fr-home-active .fr-homepage .fr-rankings-fresh *,
body.fr-home-active .fr-homepage .fr-rankings-fresh *::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh *::after {
box-sizing: border-box !important;
counter-reset: none !important;
counter-increment: none !important;
}
/* Kill only numeric pseudo-elements inside the isolated ranking module. */
body.fr-home-active .fr-homepage .fr-rankings-fresh-card::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh-card::after,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image::after,
body.fr-home-active .fr-homepage .fr-rankings-fresh-copy::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh-copy::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh {
--fr-color: #1E8E3E;
margin-top: 52px !important;
margin-bottom: 56px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh .fr-section-head h2::before {
display: block !important;
content: "" !important;
background: #1E8E3E !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh .fr-section-head a {
color: #1E8E3E !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh .fr-section-head a::after {
display: inline-block !important;
content: "\2192" !important;
margin-left: 5px !important;
}
/* Desktop: large card left + four compact cards right. */
body.fr-home-active .fr-homepage .fr-rankings-fresh-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.42fr) minmax(330px, .86fr) !important;
gap: 28px !important;
align-items: stretch !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-list {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
min-width: 0 !important;
padding: 0 0 10px !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #E6E6E3 !important;
background: transparent !important;
box-shadow: none !important;
position: static !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-main {
display: block !important;
padding: 0 0 16px !important;
border-bottom: 1px solid #E6E6E3 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-image {
display: block !important;
width: 100% !important;
aspect-ratio: 16 / 9 !important;
overflow: hidden !important;
background: #eee !important;
position: relative !important;
z-index: 1 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card:not(.fr-rankings-fresh-main) .fr-rankings-fresh-image {
width: 132px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-image img,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image .fr-img {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border: 0 !important;
filter: none !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-copy {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-copy {
padding: 12px 12px 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: fit-content !important;
min-height: 18px !important;
padding: 4px 7px !important;
border-radius: 0 !important;
background: #1A1A1A !important;
color: #FFFFFF !important;
font-family: inherit !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-title {
display: -webkit-box !important;
margin: 0 !important;
color: #222222 !important;
font-family: inherit !important;
font-size: 15px !important;
line-height: 1.13 !important;
font-weight: 800 !important;
letter-spacing: inherit !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
color: inherit !important;
font: inherit !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title {
font-size: clamp(21px, 2.2vw, 29px) !important;
line-height: 1.05 !important;
-webkit-line-clamp: 3 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-excerpt {
display: -webkit-box !important;
margin: 0 !important;
color: #2D3748 !important;
font-size: 14px !important;
line-height: 1.42 !important;
font-weight: 450 !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-meta {
color: #667085 !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
}
/* Mobile: show exactly four boxes total: main + three side cards. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-rankings-fresh {
margin-top: 42px !important;
margin-bottom: 46px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-grid,
body.fr-home-active .fr-homepage .fr-rankings-fresh-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 22px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main {
display: block !important;
width: 100% !important;
padding: 0 0 22px !important;
border-bottom: 1px solid #E6E6E3 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-list .fr-rankings-fresh-card:nth-of-type(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card:not(.fr-rankings-fresh-main) .fr-rankings-fresh-image,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-copy,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-copy {
padding: 10px 14px 0 !important;
gap: 8px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title {
font-size: clamp(19px, 5.5vw, 23px) !important;
line-height: 1.09 !important;
}
}
/* Mobile Testy: badge closer to image, title moved away from the left edge. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card .fr-card-copy {
padding: 6px 14px 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
align-items: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy > .fr-badge {
margin-top: 0 !important;
margin-bottom: 6px !important;
margin-left: 0 !important;
align-self: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-tests .fr-card-copy h3 a {
margin-left: 0 !important;
padding-left: 0 !important;
text-indent: 0 !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE FINAL UI LOCK 2026
Brand chip hover + final typography lock
DO NOT OVERRIDE BELOW THIS BLOCK
========================================================= */
body.fr-home-active .fr-homepage {
--fr-home-font-title-lock: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-font-text-lock: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-text-lock: #222222;
--fr-home-muted-lock: #667085;
}
/* Body/copy stays calm and readable. */
body.fr-home-active .fr-homepage,
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-homepage .fr-card-copy p,
body.fr-home-active .fr-homepage .fr-feature-card p,
body.fr-home-active .fr-homepage .fr-rankings-fresh-excerpt {
font-family: var(--fr-home-font-text-lock) !important;
color: var(--fr-home-text-lock) !important;
}
/* Titles/UI use one final homepage display typeface. */
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage .fr-section-head,
body.fr-home-active .fr-homepage .fr-section-head h2,
body.fr-home-active .fr-homepage .fr-section-head a,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-older-posts a,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a {
font-family: var(--fr-home-font-title-lock) !important;
}
/* Section headings: one rhythm everywhere. */
body.fr-home-active .fr-homepage .fr-section-head h2 {
font-weight: 800 !important;
letter-spacing: -.025em !important;
line-height: 1.03 !important;
color: var(--fr-home-text-lock) !important;
}
/* Section links: consistent, but keep category colors. */
body.fr-home-active .fr-homepage .fr-section-head a {
font-weight: 800 !important;
letter-spacing: -.006em !important;
line-height: 1 !important;
text-transform: none !important;
}
/* Card titles: lock only typography, not layout. */
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title {
font-weight: 800 !important;
letter-spacing: -.014em !important;
line-height: 1.1 !important;
color: var(--fr-home-text-lock) !important;
}
/* Dark Chinese hub titles must stay readable. */
body.fr-home-active .fr-homepage .fr-layout-chinese h2,
body.fr-home-active .fr-homepage .fr-layout-chinese h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head h2 {
color: #FFFFFF !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese p,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-card-copy p {
color: rgba(255,255,255,.78) !important;
}
/* Meta: one calm system everywhere. */
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-rankings-fresh-meta {
font-family: var(--fr-home-font-text-lock) !important;
color: var(--fr-home-muted-lock) !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-meta {
color: rgba(255,255,255,.62) !important;
}
/* Badges: absolutely identical typography across the homepage. */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge {
font-family: var(--fr-home-font-title-lock) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.025em !important;
text-transform: uppercase !important;
min-height: 18px !important;
padding: 4px 7px !important;
border-radius: 0 !important;
white-space: nowrap !important;
}
/* Brand chips: active hover without layout shift. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip {
will-change: transform, box-shadow, border-color, background-color !important;
transform: translateY(0) scale(1) !important;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease,
background-color .18s ease !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus-visible {
transform: translateY(-3px) scale(1.025) !important;
background: #FFFFFF !important;
border-color: rgba(255,255,255,.72) !important;
box-shadow: 0 12px 26px rgba(0,0,0,.26) !important;
outline: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:active {
transform: translateY(-1px) scale(1.01) !important;
background: #FFFFFF !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip img {
transform: translateZ(0) scale(1) !important;
transform-origin: center center !important;
transition: transform .18s ease, opacity .18s ease, filter .18s ease !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus-visible .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus-visible img {
transform: translateZ(0) scale(1.08) !important;
opacity: 1 !important;
filter: contrast(1.28) brightness(.64) !important;
}
/* Keep mobile tap state clean — no grey flash from old rules. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:active {
background: #FFFFFF !important;
color: #222222 !important;
border-color: rgba(255,255,255,.62) !important;
}
}
/* =========================================================
4RINGS — FINAL HEADER + TITLE POLISH LOCK
Descenders / header / mega menu / search typography
Nie nadpisywać bez osobnego zadania.
========================================================= */
/* 1) HOMEPAGE TITLE DESCENDER FIX
Daje zapas na dolne ogonki liter: g / j / y / p.
Bez zmiany układów sekcji, obrazków, reklam i brand chips.
*/
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
line-height: 1.17 !important;
padding-bottom: 0.12em !important;
box-decoration-break: clone !important;
-webkit-box-decoration-break: clone !important;
}
body.fr-home-active .fr-homepage .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title a {
line-height: 1.14 !important;
padding-bottom: 0.14em !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-copy,
body.fr-home-active .fr-homepage .fr-card-copy,
body.fr-home-active .fr-homepage .fr-news-copy {
min-height: 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
margin-bottom: 6px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
line-height: 1.19 !important;
padding-bottom: 0.14em !important;
}
body.fr-home-active .fr-homepage .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main .fr-rankings-fresh-title a {
line-height: 1.16 !important;
padding-bottom: 0.16em !important;
}
}
/* 2) HEADER / NAV TYPOGRAPHY POLISH
Tylko góra strony. Nie dotyka układu homepage.
*/
body.fr-home-active .site-header,
body.fr-home-active .main-navigation,
body.fr-home-active .fr-header,
body.fr-home-active .fr-site-header,
body.fr-home-active .fr-main-nav,
body.fr-home-active .fr-topbar,
body.fr-home-active .fr-mega-menu,
body.fr-home-active .mega-menu,
body.fr-home-active .fr-search-overlay,
body.fr-home-active .fr-search-modal,
body.fr-home-active .fr-search-panel {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body.fr-home-active .main-navigation a,
body.fr-home-active .fr-main-nav a,
body.fr-home-active .fr-header-menu a,
body.fr-home-active .fr-header nav a,
body.fr-home-active .fr-site-header nav a,
body.fr-home-active .fr-topbar a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
line-height: 1.16 !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
}
@media (min-width: 1025px) {
body.fr-home-active .main-navigation a,
body.fr-home-active .fr-main-nav a,
body.fr-home-active .fr-header-menu a,
body.fr-home-active .fr-header nav a,
body.fr-home-active .fr-site-header nav a,
body.fr-home-active .fr-topbar a {
font-size: 15.5px !important;
font-weight: 700 !important;
}
}
/* Pasek "Dziś na 4rings" / trending */
body.fr-home-active .fr-today-bar,
body.fr-home-active .fr-today-bar a,
body.fr-home-active .fr-today-label,
body.fr-home-active .fr-trending-bar,
body.fr-home-active .fr-trending-bar a,
body.fr-home-active .fr-hotbar,
body.fr-home-active .fr-hotbar a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body.fr-home-active .fr-today-label,
body.fr-home-active .fr-trending-label,
body.fr-home-active .fr-hotbar-label {
font-size: 13px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.012em !important;
text-transform: uppercase !important;
}
body.fr-home-active .fr-today-bar a,
body.fr-home-active .fr-trending-bar a,
body.fr-home-active .fr-hotbar a {
font-size: 14px !important;
line-height: 1.16 !important;
font-weight: 720 !important;
letter-spacing: -.006em !important;
}
/* 3) MEGA MENU — mniej ciężkie litery, bez zmiany działania menu */
body.fr-home-active .fr-mega-menu a,
body.fr-home-active .fr-mega-menu li a,
body.fr-home-active .fr-mega-menu .menu-item a,
body.fr-home-active .mega-menu a,
body.fr-home-active .mega-menu li a,
body.fr-home-active .sub-menu a,
body.fr-home-active .main-navigation .sub-menu a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 18px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
letter-spacing: -.014em !important;
text-transform: none !important;
}
body.fr-home-active .fr-mega-menu h3,
body.fr-home-active .fr-mega-menu strong,
body.fr-home-active .mega-menu h3,
body.fr-home-active .mega-menu strong {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 19px !important;
line-height: 1.16 !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-mega-menu a,
body.fr-home-active .fr-mega-menu li a,
body.fr-home-active .fr-mega-menu .menu-item a,
body.fr-home-active .mega-menu a,
body.fr-home-active .mega-menu li a,
body.fr-home-active .sub-menu a,
body.fr-home-active .main-navigation .sub-menu a {
font-size: 17px !important;
line-height: 1.24 !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
}
}
/* 4) SEARCH OVERLAY TYPOGRAPHY — bez zmiany JS i działania wyszukiwarki */
body.fr-home-active .fr-search-overlay,
body.fr-home-active .fr-search-modal,
body.fr-home-active .fr-search-results,
body.fr-home-active .fr-search-panel,
body.fr-home-active .fr-search-overlay input,
body.fr-home-active .fr-search-modal input,
body.fr-home-active .fr-search-panel input,
body.fr-home-active .fr-search-overlay .search-field,
body.fr-home-active .search-modal,
body.fr-home-active .search-modal input,
body.fr-home-active .search-results,
body.fr-home-active .search-results a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body.fr-home-active .fr-search-overlay input,
body.fr-home-active .fr-search-modal input,
body.fr-home-active .fr-search-panel input,
body.fr-home-active .fr-search-overlay .search-field,
body.fr-home-active .search-modal input,
body.fr-home-active .search-field {
font-size: 24px !important;
line-height: 1.16 !important;
font-weight: 600 !important;
letter-spacing: -.014em !important;
color: #111 !important;
}
body.fr-home-active .fr-search-overlay button,
body.fr-home-active .fr-search-modal button,
body.fr-home-active .fr-search-panel button,
body.fr-home-active .search-submit {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 20px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -.01em !important;
}
body.fr-home-active .fr-search-results a,
body.fr-home-active .fr-search-results h3,
body.fr-home-active .fr-search-result-title,
body.fr-home-active .fr-search-overlay .fr-search-result a,
body.fr-home-active .search-results a,
body.fr-home-active .search-results h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 20px !important;
line-height: 1.24 !important;
font-weight: 700 !important;
letter-spacing: -.014em !important;
}
body.fr-home-active .fr-search-results .fr-meta,
body.fr-home-active .fr-search-result-meta,
body.fr-home-active .fr-search-overlay .fr-meta,
body.fr-home-active .search-results .fr-meta {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
letter-spacing: -.01em !important;
color: #667085 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-search-overlay input,
body.fr-home-active .fr-search-modal input,
body.fr-home-active .fr-search-panel input,
body.fr-home-active .fr-search-overlay .search-field,
body.fr-home-active .search-modal input,
body.fr-home-active .search-field {
font-size: 22px !important;
}
body.fr-home-active .fr-search-results a,
body.fr-home-active .fr-search-results h3,
body.fr-home-active .fr-search-result-title,
body.fr-home-active .fr-search-overlay .fr-search-result a,
body.fr-home-active .search-results a,
body.fr-home-active .search-results h3 {
font-size: 18px !important;
line-height: 1.25 !important;
}
}
/* =========================================================
4RINGS — TYPOGRAPHY PROTECTION NOTE
Header, mega menu, search and homepage card descenders are now locked.
Do not add broad global font rules below this block.
========================================================= */
/* =========================================================
4RINGS — MOBILE MEGA MENU TOGGLE CLEAN FINAL
Plus/minus inline przy nazwie kategorii, bez czerwonego koła
Zakres: wyłącznie mobile menu / mega menu. Nie ruszać homepage layout.
========================================================= */
@media (max-width: 1024px) {
/* Główne wiersze kategorii z podmenu — miejsce na znak + / - po prawej */
body .fr-mobile-menu .menu-item-has-children,
body .fr-mobile-nav .menu-item-has-children,
body .fr-mobile-drawer .menu-item-has-children,
body .fr-mobile-panel .menu-item-has-children,
body .fr-mega-mobile .menu-item-has-children,
body .slideout-navigation .menu-item-has-children,
body .main-navigation.toggled .menu-item-has-children,
body .main-navigation.mobile-navigation .menu-item-has-children {
position: relative !important;
}
body .fr-mobile-menu .menu-item-has-children > a,
body .fr-mobile-nav .menu-item-has-children > a,
body .fr-mobile-drawer .menu-item-has-children > a,
body .fr-mobile-panel .menu-item-has-children > a,
body .fr-mega-mobile .menu-item-has-children > a,
body .slideout-navigation .menu-item-has-children > a,
body .main-navigation.toggled .menu-item-has-children > a,
body .main-navigation.mobile-navigation .menu-item-has-children > a,
body .fr-mobile-menu .fr-menu-parent,
body .fr-mobile-menu .fr-mega-parent,
body .fr-mobile-menu .fr-mobile-category {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
padding-right: 58px !important;
box-sizing: border-box !important;
}
/* Usunięcie czerwonego / okrągłego toggle'a. Zostaje sam znak przy nazwie. */
body .fr-mobile-menu .submenu-toggle,
body .fr-mobile-menu .dropdown-menu-toggle,
body .fr-mobile-menu .fr-menu-toggle,
body .fr-mobile-menu .fr-submenu-toggle,
body .fr-mobile-menu .fr-accordion-toggle,
body .fr-mobile-menu button[aria-expanded],
body .fr-mobile-menu .menu-item-has-children > button,
body .fr-mobile-nav .submenu-toggle,
body .fr-mobile-nav .dropdown-menu-toggle,
body .fr-mobile-nav .fr-menu-toggle,
body .fr-mobile-nav .fr-submenu-toggle,
body .fr-mobile-nav .fr-accordion-toggle,
body .fr-mobile-nav button[aria-expanded],
body .fr-mobile-nav .menu-item-has-children > button,
body .fr-mobile-drawer .submenu-toggle,
body .fr-mobile-drawer .dropdown-menu-toggle,
body .fr-mobile-drawer .fr-menu-toggle,
body .fr-mobile-drawer .fr-submenu-toggle,
body .fr-mobile-drawer .fr-accordion-toggle,
body .fr-mobile-drawer button[aria-expanded],
body .fr-mobile-drawer .menu-item-has-children > button,
body .fr-mobile-panel .submenu-toggle,
body .fr-mobile-panel .dropdown-menu-toggle,
body .fr-mobile-panel .fr-menu-toggle,
body .fr-mobile-panel .fr-submenu-toggle,
body .fr-mobile-panel .fr-accordion-toggle,
body .fr-mobile-panel button[aria-expanded],
body .fr-mobile-panel .menu-item-has-children > button,
body .fr-mega-mobile .submenu-toggle,
body .fr-mega-mobile .dropdown-menu-toggle,
body .fr-mega-mobile .fr-menu-toggle,
body .fr-mega-mobile .fr-submenu-toggle,
body .fr-mega-mobile .fr-accordion-toggle,
body .fr-mega-mobile button[aria-expanded],
body .fr-mega-mobile .menu-item-has-children > button,
body .slideout-navigation .menu-item-has-children > .dropdown-menu-toggle,
body .slideout-navigation .menu-item-has-children > button,
body .main-navigation.toggled .menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.toggled .menu-item-has-children > button,
body .main-navigation.mobile-navigation .menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.mobile-navigation .menu-item-has-children > button {
position: absolute !important;
right: 22px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
max-width: 28px !important;
max-height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
color: #111111 !important;
font-size: 0 !important;
line-height: 1 !important;
text-indent: 0 !important;
overflow: visible !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Schowaj stare ikony/kółka/SVG generowane przez motyw lub JS. */
body .fr-mobile-menu .submenu-toggle > *,
body .fr-mobile-menu .dropdown-menu-toggle > *,
body .fr-mobile-menu .fr-menu-toggle > *,
body .fr-mobile-menu .fr-submenu-toggle > *,
body .fr-mobile-menu button[aria-expanded] > *,
body .fr-mobile-nav .submenu-toggle > *,
body .fr-mobile-nav .dropdown-menu-toggle > *,
body .fr-mobile-nav .fr-menu-toggle > *,
body .fr-mobile-nav .fr-submenu-toggle > *,
body .fr-mobile-nav button[aria-expanded] > *,
body .fr-mobile-drawer .submenu-toggle > *,
body .fr-mobile-drawer .dropdown-menu-toggle > *,
body .fr-mobile-drawer .fr-menu-toggle > *,
body .fr-mobile-drawer .fr-submenu-toggle > *,
body .fr-mobile-drawer button[aria-expanded] > *,
body .fr-mobile-panel .submenu-toggle > *,
body .fr-mobile-panel .dropdown-menu-toggle > *,
body .fr-mobile-panel .fr-menu-toggle > *,
body .fr-mobile-panel .fr-submenu-toggle > *,
body .fr-mobile-panel button[aria-expanded] > *,
body .fr-mega-mobile .submenu-toggle > *,
body .fr-mega-mobile .dropdown-menu-toggle > *,
body .fr-mega-mobile .fr-menu-toggle > *,
body .fr-mega-mobile .fr-submenu-toggle > *,
body .fr-mega-mobile button[aria-expanded] > *,
body .slideout-navigation .dropdown-menu-toggle > *,
body .main-navigation.toggled .dropdown-menu-toggle > *,
body .main-navigation.mobile-navigation .dropdown-menu-toggle > * {
display: none !important;
}
/* Plus domyślnie. */
body .fr-mobile-menu .submenu-toggle::before,
body .fr-mobile-menu .dropdown-menu-toggle::before,
body .fr-mobile-menu .fr-menu-toggle::before,
body .fr-mobile-menu .fr-submenu-toggle::before,
body .fr-mobile-menu .fr-accordion-toggle::before,
body .fr-mobile-menu button[aria-expanded="false"]::before,
body .fr-mobile-menu .menu-item-has-children > button::before,
body .fr-mobile-nav .submenu-toggle::before,
body .fr-mobile-nav .dropdown-menu-toggle::before,
body .fr-mobile-nav .fr-menu-toggle::before,
body .fr-mobile-nav .fr-submenu-toggle::before,
body .fr-mobile-nav .fr-accordion-toggle::before,
body .fr-mobile-nav button[aria-expanded="false"]::before,
body .fr-mobile-nav .menu-item-has-children > button::before,
body .fr-mobile-drawer .submenu-toggle::before,
body .fr-mobile-drawer .dropdown-menu-toggle::before,
body .fr-mobile-drawer .fr-menu-toggle::before,
body .fr-mobile-drawer .fr-submenu-toggle::before,
body .fr-mobile-drawer .fr-accordion-toggle::before,
body .fr-mobile-drawer button[aria-expanded="false"]::before,
body .fr-mobile-drawer .menu-item-has-children > button::before,
body .fr-mobile-panel .submenu-toggle::before,
body .fr-mobile-panel .dropdown-menu-toggle::before,
body .fr-mobile-panel .fr-menu-toggle::before,
body .fr-mobile-panel .fr-submenu-toggle::before,
body .fr-mobile-panel .fr-accordion-toggle::before,
body .fr-mobile-panel button[aria-expanded="false"]::before,
body .fr-mobile-panel .menu-item-has-children > button::before,
body .fr-mega-mobile .submenu-toggle::before,
body .fr-mega-mobile .dropdown-menu-toggle::before,
body .fr-mega-mobile .fr-menu-toggle::before,
body .fr-mega-mobile .fr-submenu-toggle::before,
body .fr-mega-mobile .fr-accordion-toggle::before,
body .fr-mega-mobile button[aria-expanded="false"]::before,
body .fr-mega-mobile .menu-item-has-children > button::before,
body .slideout-navigation .dropdown-menu-toggle::before,
body .slideout-navigation .menu-item-has-children > button::before,
body .main-navigation.toggled .dropdown-menu-toggle::before,
body .main-navigation.toggled .menu-item-has-children > button::before,
body .main-navigation.mobile-navigation .dropdown-menu-toggle::before,
body .main-navigation.mobile-navigation .menu-item-has-children > button::before {
content: "+" !important;
display: block !important;
color: #111111 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 28px !important;
line-height: 1 !important;
font-weight: 650 !important;
text-indent: 0 !important;
}
/* Minus po rozwinięciu. */
body .fr-mobile-menu .submenu-toggle.toggled-on::before,
body .fr-mobile-menu .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-menu .fr-menu-toggle.toggled-on::before,
body .fr-mobile-menu .fr-submenu-toggle.toggled-on::before,
body .fr-mobile-menu .fr-accordion-toggle.toggled-on::before,
body .fr-mobile-menu button[aria-expanded="true"]::before,
body .fr-mobile-menu .menu-item-has-children.open > button::before,
body .fr-mobile-menu .menu-item-has-children.sfHover > button::before,
body .fr-mobile-menu .menu-item-has-children.current-menu-open > button::before,
body .fr-mobile-menu .menu-item-has-children.dropdown-open > button::before,
body .fr-mobile-nav .submenu-toggle.toggled-on::before,
body .fr-mobile-nav .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-nav .fr-menu-toggle.toggled-on::before,
body .fr-mobile-nav .fr-submenu-toggle.toggled-on::before,
body .fr-mobile-nav .fr-accordion-toggle.toggled-on::before,
body .fr-mobile-nav button[aria-expanded="true"]::before,
body .fr-mobile-nav .menu-item-has-children.open > button::before,
body .fr-mobile-nav .menu-item-has-children.sfHover > button::before,
body .fr-mobile-nav .menu-item-has-children.current-menu-open > button::before,
body .fr-mobile-nav .menu-item-has-children.dropdown-open > button::before,
body .fr-mobile-drawer .submenu-toggle.toggled-on::before,
body .fr-mobile-drawer .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-drawer .fr-menu-toggle.toggled-on::before,
body .fr-mobile-drawer .fr-submenu-toggle.toggled-on::before,
body .fr-mobile-drawer .fr-accordion-toggle.toggled-on::before,
body .fr-mobile-drawer button[aria-expanded="true"]::before,
body .fr-mobile-drawer .menu-item-has-children.open > button::before,
body .fr-mobile-drawer .menu-item-has-children.sfHover > button::before,
body .fr-mobile-drawer .menu-item-has-children.current-menu-open > button::before,
body .fr-mobile-drawer .menu-item-has-children.dropdown-open > button::before,
body .fr-mobile-panel .submenu-toggle.toggled-on::before,
body .fr-mobile-panel .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-panel .fr-menu-toggle.toggled-on::before,
body .fr-mobile-panel .fr-submenu-toggle.toggled-on::before,
body .fr-mobile-panel .fr-accordion-toggle.toggled-on::before,
body .fr-mobile-panel button[aria-expanded="true"]::before,
body .fr-mobile-panel .menu-item-has-children.open > button::before,
body .fr-mobile-panel .menu-item-has-children.sfHover > button::before,
body .fr-mobile-panel .menu-item-has-children.current-menu-open > button::before,
body .fr-mobile-panel .menu-item-has-children.dropdown-open > button::before,
body .fr-mega-mobile .submenu-toggle.toggled-on::before,
body .fr-mega-mobile .dropdown-menu-toggle.toggled-on::before,
body .fr-mega-mobile .fr-menu-toggle.toggled-on::before,
body .fr-mega-mobile .fr-submenu-toggle.toggled-on::before,
body .fr-mega-mobile .fr-accordion-toggle.toggled-on::before,
body .fr-mega-mobile button[aria-expanded="true"]::before,
body .fr-mega-mobile .menu-item-has-children.open > button::before,
body .fr-mega-mobile .menu-item-has-children.sfHover > button::before,
body .fr-mega-mobile .menu-item-has-children.current-menu-open > button::before,
body .fr-mega-mobile .menu-item-has-children.dropdown-open > button::before,
body .slideout-navigation .dropdown-menu-toggle.toggled-on::before,
body .slideout-navigation button[aria-expanded="true"]::before,
body .slideout-navigation .menu-item-has-children.open > button::before,
body .main-navigation.toggled .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.toggled button[aria-expanded="true"]::before,
body .main-navigation.toggled .menu-item-has-children.open > button::before,
body .main-navigation.mobile-navigation .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.mobile-navigation button[aria-expanded="true"]::before,
body .main-navigation.mobile-navigation .menu-item-has-children.open > button::before {
content: "\2212" !important;
color: #111111 !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 650 !important;
}
/* Zabicie czerwonego tła także w hover/focus/active. */
body .fr-mobile-menu .submenu-toggle:hover,
body .fr-mobile-menu .submenu-toggle:focus,
body .fr-mobile-menu .submenu-toggle:active,
body .fr-mobile-menu .dropdown-menu-toggle:hover,
body .fr-mobile-menu .dropdown-menu-toggle:focus,
body .fr-mobile-menu .dropdown-menu-toggle:active,
body .fr-mobile-menu button[aria-expanded]:hover,
body .fr-mobile-menu button[aria-expanded]:focus,
body .fr-mobile-menu button[aria-expanded]:active,
body .fr-mobile-nav .submenu-toggle:hover,
body .fr-mobile-nav .submenu-toggle:focus,
body .fr-mobile-nav .submenu-toggle:active,
body .fr-mobile-nav .dropdown-menu-toggle:hover,
body .fr-mobile-nav .dropdown-menu-toggle:focus,
body .fr-mobile-nav .dropdown-menu-toggle:active,
body .fr-mobile-nav button[aria-expanded]:hover,
body .fr-mobile-nav button[aria-expanded]:focus,
body .fr-mobile-nav button[aria-expanded]:active,
body .fr-mobile-drawer .submenu-toggle:hover,
body .fr-mobile-drawer .submenu-toggle:focus,
body .fr-mobile-drawer .submenu-toggle:active,
body .fr-mobile-drawer .dropdown-menu-toggle:hover,
body .fr-mobile-drawer .dropdown-menu-toggle:focus,
body .fr-mobile-drawer .dropdown-menu-toggle:active,
body .fr-mobile-drawer button[aria-expanded]:hover,
body .fr-mobile-drawer button[aria-expanded]:focus,
body .fr-mobile-drawer button[aria-expanded]:active,
body .fr-mobile-panel .submenu-toggle:hover,
body .fr-mobile-panel .submenu-toggle:focus,
body .fr-mobile-panel .submenu-toggle:active,
body .fr-mobile-panel .dropdown-menu-toggle:hover,
body .fr-mobile-panel .dropdown-menu-toggle:focus,
body .fr-mobile-panel .dropdown-menu-toggle:active,
body .fr-mobile-panel button[aria-expanded]:hover,
body .fr-mobile-panel button[aria-expanded]:focus,
body .fr-mobile-panel button[aria-expanded]:active,
body .fr-mega-mobile .submenu-toggle:hover,
body .fr-mega-mobile .submenu-toggle:focus,
body .fr-mega-mobile .submenu-toggle:active,
body .fr-mega-mobile .dropdown-menu-toggle:hover,
body .fr-mega-mobile .dropdown-menu-toggle:focus,
body .fr-mega-mobile .dropdown-menu-toggle:active,
body .fr-mega-mobile button[aria-expanded]:hover,
body .fr-mega-mobile button[aria-expanded]:focus,
body .fr-mega-mobile button[aria-expanded]:active,
body .slideout-navigation .dropdown-menu-toggle:hover,
body .slideout-navigation .dropdown-menu-toggle:focus,
body .slideout-navigation .dropdown-menu-toggle:active,
body .main-navigation.toggled .dropdown-menu-toggle:hover,
body .main-navigation.toggled .dropdown-menu-toggle:focus,
body .main-navigation.toggled .dropdown-menu-toggle:active,
body .main-navigation.mobile-navigation .dropdown-menu-toggle:hover,
body .main-navigation.mobile-navigation .dropdown-menu-toggle:focus,
body .main-navigation.mobile-navigation .dropdown-menu-toggle:active {
background: transparent !important;
background-color: transparent !important;
color: #111111 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Jeżeli czerwone koło było generowane przez ::after, wyłącz je. */
body .fr-mobile-menu .submenu-toggle::after,
body .fr-mobile-menu .dropdown-menu-toggle::after,
body .fr-mobile-menu .fr-menu-toggle::after,
body .fr-mobile-menu .fr-submenu-toggle::after,
body .fr-mobile-nav .submenu-toggle::after,
body .fr-mobile-nav .dropdown-menu-toggle::after,
body .fr-mobile-nav .fr-menu-toggle::after,
body .fr-mobile-nav .fr-submenu-toggle::after,
body .fr-mobile-drawer .submenu-toggle::after,
body .fr-mobile-drawer .dropdown-menu-toggle::after,
body .fr-mobile-drawer .fr-menu-toggle::after,
body .fr-mobile-drawer .fr-submenu-toggle::after,
body .fr-mobile-panel .submenu-toggle::after,
body .fr-mobile-panel .dropdown-menu-toggle::after,
body .fr-mobile-panel .fr-menu-toggle::after,
body .fr-mobile-panel .fr-submenu-toggle::after,
body .fr-mega-mobile .submenu-toggle::after,
body .fr-mega-mobile .dropdown-menu-toggle::after,
body .fr-mega-mobile .fr-menu-toggle::after,
body .fr-mega-mobile .fr-submenu-toggle::after,
body .slideout-navigation .dropdown-menu-toggle::after,
body .main-navigation.toggled .dropdown-menu-toggle::after,
body .main-navigation.mobile-navigation .dropdown-menu-toggle::after {
display: none !important;
content: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
}
/* =========================================================
4RINGS — MOBILE MENU TOGGLE LOCK
Nie nadpisywać bez osobnego zadania.
Plus/minus w mobile menu ma być inline przy nazwie kategorii,
bez czerwonego koła i bez pływającego przycisku.
========================================================= */
/* =========================================================
4RINGS — MOBILE MENU TOGGLE POSITION FINAL V2
Minus/plus stays in the opened category row, not in submenu.
Also aligns colored category bars closer to category titles.
========================================================= */
@media (max-width: 1024px) {
/* Top-level parent rows: stable positioning context only for category row */
body .fr-mobile-menu > ul > li.menu-item-has-children,
body .fr-mobile-nav > ul > li.menu-item-has-children,
body .fr-mobile-drawer > ul > li.menu-item-has-children,
body .fr-mobile-panel > ul > li.menu-item-has-children,
body .fr-mega-mobile > ul > li.menu-item-has-children,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children,
body .slideout-navigation ul.menu > li.menu-item-has-children,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children {
position: relative !important;
}
/* Category title row: left aligned text, room for inline toggle on the right */
body .fr-mobile-menu > ul > li.menu-item-has-children > a,
body .fr-mobile-nav > ul > li.menu-item-has-children > a,
body .fr-mobile-drawer > ul > li.menu-item-has-children > a,
body .fr-mobile-panel > ul > li.menu-item-has-children > a,
body .fr-mega-mobile > ul > li.menu-item-has-children > a,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a,
body .slideout-navigation ul.menu > li.menu-item-has-children > a,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 82px !important;
padding-left: 52px !important;
padding-right: 68px !important;
text-align: left !important;
box-sizing: border-box !important;
}
/* Move/create the colored vertical bar next to the category title */
body .fr-mobile-menu > ul > li.menu-item-has-children > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a::before {
content: "" !important;
position: absolute !important;
left: 24px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 4px !important;
height: 28px !important;
background: currentColor !important;
opacity: .95 !important;
border-radius: 0 !important;
}
/* Keep submenu items clean: no category bars on children */
body .fr-mobile-menu .sub-menu a::before,
body .fr-mobile-nav .sub-menu a::before,
body .fr-mobile-drawer .sub-menu a::before,
body .fr-mobile-panel .sub-menu a::before,
body .fr-mega-mobile .sub-menu a::before,
body .slideout-navigation .sub-menu a::before,
body .main-navigation.toggled .sub-menu a::before,
body .main-navigation.mobile-navigation .sub-menu a::before {
content: none !important;
display: none !important;
}
/* Toggle button belongs to the top category row, not the full opened parent height */
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > button,
body .fr-mobile-nav > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-nav > ul > li.menu-item-has-children > button,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-drawer > ul > li.menu-item-has-children > button,
body .fr-mobile-panel > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-panel > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-panel > ul > li.menu-item-has-children > button,
body .fr-mega-mobile > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mega-mobile > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mega-mobile > ul > li.menu-item-has-children > button,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .slideout-navigation ul.menu > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle {
position: absolute !important;
top: 0 !important;
right: 24px !important;
transform: none !important;
width: 42px !important;
height: 82px !important;
min-width: 42px !important;
min-height: 82px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #111111 !important;
font-size: 0 !important;
line-height: 1 !important;
z-index: 5 !important;
}
/* Closed state: plus */
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > .submenu-toggle::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > button::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .submenu-toggle::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > button::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > .submenu-toggle::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > button::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > .submenu-toggle::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > button::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .slideout-navigation ul.menu > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before {
content: "+" !important;
display: block !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 30px !important;
line-height: 1 !important;
font-weight: 650 !important;
color: #111111 !important;
}
/* Open state: minus in the same exact place */
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle.toggled-on::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button[aria-expanded="true"]::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > .submenu-toggle.toggled-on::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > button[aria-expanded="true"]::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .submenu-toggle.toggled-on::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > button[aria-expanded="true"]::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > .submenu-toggle.toggled-on::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > button[aria-expanded="true"]::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > .submenu-toggle.toggled-on::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > button[aria-expanded="true"]::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .slideout-navigation ul.menu > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before {
content: "\2212" !important;
font-size: 32px !important;
font-weight: 650 !important;
color: #111111 !important;
}
/* No red circle, ever */
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > button,
body .fr-mobile-nav > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-nav > ul > li.menu-item-has-children > button,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-drawer > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-drawer > ul > li.menu-item-has-children > button,
body .fr-mobile-panel > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mobile-panel > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-panel > ul > li.menu-item-has-children > button,
body .fr-mega-mobile > ul > li.menu-item-has-children > .submenu-toggle,
body .fr-mega-mobile > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mega-mobile > ul > li.menu-item-has-children > button,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .slideout-navigation ul.menu > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle:hover,
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle:focus,
body .fr-mobile-menu > ul > li.menu-item-has-children > .submenu-toggle:active,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle:hover,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle:focus,
body .fr-mobile-menu > ul > li.menu-item-has-children > .dropdown-menu-toggle:active,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle:hover,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle:focus,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle:active {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* SVG/icon leftovers off */
body .fr-mobile-menu > ul > li.menu-item-has-children > button svg,
body .fr-mobile-nav > ul > li.menu-item-has-children > button svg,
body .fr-mobile-drawer > ul > li.menu-item-has-children > button svg,
body .fr-mobile-panel > ul > li.menu-item-has-children > button svg,
body .fr-mega-mobile > ul > li.menu-item-has-children > button svg,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg {
display: none !important;
}
}
/* =========================================================
4RINGS — CHINESE BRAND STRIP LINE CLEANUP FINAL V2
Remove returned horizontal separators directly above brand-logo strip.
========================================================= */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-grid::before,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-grid::after,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip::before,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip::after,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner::before,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner::after {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-grid > *:last-child,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:last-child,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:nth-last-child(1),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:nth-last-child(2),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:nth-last-child(3),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-news-row:last-child,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-news-row:nth-last-child(1),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-news-row:nth-last-child(2),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-news-row:nth-last-child(3) {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
margin-top: 18px !important;
padding-top: 14px !important;
background: transparent !important;
}
/* =========================================================
4RINGS — MOBILE MENU + CHINESE STRIP FIX LOCK V2
Nie nadpisywać bez osobnego zadania.
========================================================= */
/* =========================================================
4RINGS — MOBILE MENU CATEGORY COLOR BARS RESTORE FINAL
Przywraca kolory pionowych pasków przy kategoriach w mobile menu.
Nie zmienia plus/minus, nie rusza homepage ani plakietek.
========================================================= */
@media (max-width: 1024px) {
/* Najpierw zdejmujemy dziedziczenie currentColor, które robiło paski czarne */
body .fr-mobile-menu > ul > li.menu-item-has-children > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a::before {
opacity: 1 !important;
filter: none !important;
}
/* Kolory po kolejności głównych kategorii w menu mobile */
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(1) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(1) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(1) > a::before {
background: #E12626 !important; /* Aktualności */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(2) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(2) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(2) > a::before {
background: #1565C0 !important; /* Testy */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(3) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(3) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(3) > a::before {
background: #1E8E3E !important; /* Rankingi */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(4) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(4) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(4) > a::before {
background: #5B3CC4 !important; /* Poradniki */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(5) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(5) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(5) > a::before {
background: #FFC400 !important; /* Napędy */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(6) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(6) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(6) > a::before {
background: #F57C00 !important; /* Rynek */
}
body .fr-mobile-menu > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .fr-mobile-nav > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .fr-mobile-drawer > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .fr-mobile-panel > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .fr-mega-mobile > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .slideout-navigation ul.menu > li.menu-item-has-children:nth-child(7) > a::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:nth-child(7) > a::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:nth-child(7) > a::before {
background: #8B1E3F !important; /* Chińskie marki */
}
/* Fallback po klasach/slugach, gdy kolejność albo markup menu się zmieni */
body .fr-mobile-menu .menu-item[class*="aktualnosci"] > a::before,
body .fr-mobile-nav .menu-item[class*="aktualnosci"] > a::before,
body .fr-mobile-drawer .menu-item[class*="aktualnosci"] > a::before,
body .fr-mega-mobile .menu-item[class*="aktualnosci"] > a::before,
body .slideout-navigation .menu-item[class*="aktualnosci"] > a::before,
body .main-navigation.toggled .menu-item[class*="aktualnosci"] > a::before { background: #E12626 !important; }
body .fr-mobile-menu .menu-item[class*="testy"] > a::before,
body .fr-mobile-nav .menu-item[class*="testy"] > a::before,
body .fr-mobile-drawer .menu-item[class*="testy"] > a::before,
body .fr-mega-mobile .menu-item[class*="testy"] > a::before,
body .slideout-navigation .menu-item[class*="testy"] > a::before,
body .main-navigation.toggled .menu-item[class*="testy"] > a::before { background: #1565C0 !important; }
body .fr-mobile-menu .menu-item[class*="rankingi"] > a::before,
body .fr-mobile-nav .menu-item[class*="rankingi"] > a::before,
body .fr-mobile-drawer .menu-item[class*="rankingi"] > a::before,
body .fr-mega-mobile .menu-item[class*="rankingi"] > a::before,
body .slideout-navigation .menu-item[class*="rankingi"] > a::before,
body .main-navigation.toggled .menu-item[class*="rankingi"] > a::before { background: #1E8E3E !important; }
body .fr-mobile-menu .menu-item[class*="poradniki"] > a::before,
body .fr-mobile-nav .menu-item[class*="poradniki"] > a::before,
body .fr-mobile-drawer .menu-item[class*="poradniki"] > a::before,
body .fr-mega-mobile .menu-item[class*="poradniki"] > a::before,
body .slideout-navigation .menu-item[class*="poradniki"] > a::before,
body .main-navigation.toggled .menu-item[class*="poradniki"] > a::before { background: #5B3CC4 !important; }
body .fr-mobile-menu .menu-item[class*="napedy"] > a::before,
body .fr-mobile-nav .menu-item[class*="napedy"] > a::before,
body .fr-mobile-drawer .menu-item[class*="napedy"] > a::before,
body .fr-mega-mobile .menu-item[class*="napedy"] > a::before,
body .slideout-navigation .menu-item[class*="napedy"] > a::before,
body .main-navigation.toggled .menu-item[class*="napedy"] > a::before { background: #FFC400 !important; }
body .fr-mobile-menu .menu-item[class*="rynek"] > a::before,
body .fr-mobile-nav .menu-item[class*="rynek"] > a::before,
body .fr-mobile-drawer .menu-item[class*="rynek"] > a::before,
body .fr-mega-mobile .menu-item[class*="rynek"] > a::before,
body .slideout-navigation .menu-item[class*="rynek"] > a::before,
body .main-navigation.toggled .menu-item[class*="rynek"] > a::before { background: #F57C00 !important; }
body .fr-mobile-menu .menu-item[class*="chinskie"] > a::before,
body .fr-mobile-nav .menu-item[class*="chinskie"] > a::before,
body .fr-mobile-drawer .menu-item[class*="chinskie"] > a::before,
body .fr-mega-mobile .menu-item[class*="chinskie"] > a::before,
body .slideout-navigation .menu-item[class*="chinskie"] > a::before,
body .main-navigation.toggled .menu-item[class*="chinskie"] > a::before { background: #8B1E3F !important; }
}
/* =========================================================
4RINGS — MOBILE MENU CATEGORY COLOR BARS LOCK
Paski przy kategoriach mają zostać kolorowe.
Nie zmieniać na monochromatyczne razem z plakietkami.
========================================================= */
/* =========================================================
4RINGS — CHIŃSKIE MARKI LOGO READABILITY + LINE CLEANUP FINAL
Scope: tylko belki z logotypami marek chińskich oraz szare kreski
w module Chińskie marki. Nie ruszać układu sekcji, typografii,
Rankingów, PHP ani linków.
========================================================= */
/* 1) Usuń poziome kreski/separatory w module Chińskie marki,
w tym kreskę pod datą / "4 min czytania" nad belkami logo. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large),
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-meta {
border-bottom-color: transparent !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card:not(.fr-feature-large) {
border-bottom: 0 !important;
box-shadow: none !important;
}
/* 2) Sam pasek logo: bez szarych linii, z zachowaniem obecnego układu. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
border-top: 0 !important;
border-right: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* 3) Belki logo — mocny override po wszystkich poprzednich regułach. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip .fr-brand-strip__inner,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip__inner {
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese a.fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip {
min-height: 58px !important;
height: 58px !important;
padding: 7px 9px !important;
overflow: hidden !important;
background: #FFFFFF !important;
border: 0 !important;
border-radius: 4px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* 4) Logotypy — powiększone i przyciemnione, bez zmiany belek. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip .fr-brand-chip img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip img.fr-brand-chip__logo {
display: block !important;
width: 86% !important;
height: auto !important;
max-width: none !important;
max-height: 46px !important;
object-fit: contain !important;
opacity: 1 !important;
filter: grayscale(1) contrast(1.55) brightness(.48) saturate(.9) !important;
transform: translateZ(0) scale(1.18) !important;
transform-origin: center center !important;
}
/* 5) Szerokie logotypy z dużą ilością pustego miejsca w SVG — dodatkowy boost. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="BYD"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="BYD"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Geely"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Geely"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Omoda"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Omoda"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Jaecoo"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Jaecoo"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Leapmotor"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Leapmotor"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Lynk"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Lynk"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Zeekr"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Zeekr"] img {
width: 92% !important;
max-height: 48px !important;
transform: translateZ(0) scale(1.26) !important;
}
/* 6) Kompaktowe znaki / emblematy — większe, ale bez przycinania. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="MG"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="MG"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="NIO"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="NIO"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="GWM"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="GWM"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Chery"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Chery"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Xpeng"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Xpeng"] img {
width: 82% !important;
max-height: 50px !important;
transform: translateZ(0) scale(1.28) !important;
}
/* 7) Mobile — najważniejszy widok: większe logo w istniejących belkach 3 x 4. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
padding-left: 22px !important;
padding-right: 22px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese a.fr-brand-chip,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip a.fr-brand-chip {
min-height: 64px !important;
height: 64px !important;
padding: 8px 10px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip .fr-brand-chip img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip img.fr-brand-chip__logo {
width: 94% !important;
max-width: none !important;
max-height: 52px !important;
transform: translateZ(0) scale(1.28) !important;
filter: grayscale(1) contrast(1.65) brightness(.43) saturate(.9) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="BYD"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="BYD"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Geely"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Geely"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Omoda"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Omoda"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Jaecoo"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Jaecoo"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Leapmotor"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Leapmotor"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Lynk"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Lynk"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Zeekr"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Zeekr"] img {
width: 98% !important;
max-height: 54px !important;
transform: translateZ(0) scale(1.38) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="MG"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="MG"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="NIO"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="NIO"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="GWM"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="GWM"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Chery"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Chery"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[title*="Xpeng"] img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip[aria-label*="Xpeng"] img {
width: 90% !important;
max-height: 54px !important;
transform: translateZ(0) scale(1.40) !important;
}
}
/* 8) Hover po ostatnim override: zachowaj aktywność, ale nie zmniejszaj logo. */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus-visible img,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:hover .fr-brand-chip__logo,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-chip:focus-visible .fr-brand-chip__logo {
opacity: 1 !important;
filter: grayscale(1) contrast(1.7) brightness(.40) saturate(.9) !important;
}
/* =========================================================
4RINGS — TYPOGRAPHY LOCK / NIE NADPISYWAĆ
=========================================================
Ten blok jest CELOWO na samym końcu pliku.
Typografia homepage została ustalona jako finalna baza.
ZASADA:
- NIE zmieniać font-family / font-weight / line-height przy drobnych
poprawkach CSS, np. logotypów, spacingu, menu, belek lub sekcji.
- Każda kolejna poprawka homepage.css ma być dodawana POWYŻEJ tego bloku
albo musi zachować identyczne ustawienia typografii.
- Typografię zmieniać wyłącznie jako osobne zadanie nazwane wprost
„zmiana typografii”.
System:
- System Font Stack: tytuły, nagłówki, menu, UI, plakietki, CTA.
- system-ui: meta, daty, opisy, zwykłe teksty pomocnicze.
========================================================= */
body.fr-home-active .fr-homepage {
--fr-font-title-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-text-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-family: var(--fr-font-text-final) !important;
color: #222222 !important;
}
/* Bazowy tekst pomocniczy zostaje systemowy, żeby był czytelny i lekki */
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-meta-light,
body.fr-home-active .fr-homepage time,
body.fr-home-active .fr-homepage .fr-card-copy p,
body.fr-home-active .fr-homepage .fr-news-copy p,
body.fr-home-active .fr-homepage .fr-feature-card p,
body.fr-home-active .fr-homepage .fr-rankings-fresh-excerpt,
body.fr-home-active .fr-homepage .fr-rankings-fresh-meta {
font-family: var(--fr-font-text-final) !important;
letter-spacing: -.01em !important;
}
/* Tytuły i UI — finalny wspólny krój */
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage .fr-section-head h2,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-day-card h1,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title {
font-family: var(--fr-font-title-final) !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
color: inherit !important;
text-rendering: geometricPrecision !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Plakietki kategorii — wszędzie identyczny system */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-badge {
font-family: var(--fr-font-title-final) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.045em !important;
text-transform: uppercase !important;
padding: 5px 8px !important;
border-radius: 0 !important;
}
/* Linki sekcyjne i CTA */
body.fr-home-active .fr-homepage .fr-section-head a,
body.fr-home-active .fr-homepage .fr-older-posts a,
body.fr-home-active .fr-homepage .fr-day-link,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a,
body.fr-home-active .fr-homepage .fr-shortcuts a,
body.fr-home-active .fr-homepage .fr-shortcuts-yellow a,
body.fr-home-active .fr-homepage .fr-brand-chip,
body.fr-home-active .fr-homepage .fr-brand-strip a {
font-family: var(--fr-font-title-final) !important;
letter-spacing: -.006em !important;
text-rendering: geometricPrecision !important;
}
/* Hero i dark hub — zachowaj mocny editorial look */
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-layout-chinese h2,
body.fr-home-active .fr-homepage .fr-layout-chinese h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3 {
font-family: var(--fr-font-title-final) !important;
font-weight: 800 !important;
letter-spacing: -.018em !important;
}
/* Rozmiary finalne: bez przypadkowego powrotu do systemowych/za małych nagłówków */
body.fr-home-active .fr-homepage .fr-section-head h2 {
font-size: clamp(28px, 4vw, 36px) !important;
line-height: 1.05 !important;
}
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
line-height: 1.16 !important;
padding-bottom: .06em !important;
}
body.fr-home-active .fr-homepage .fr-feature-large h3 {
line-height: 1.10 !important;
padding-bottom: .08em !important;
}
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage time {
font-size: 12px !important;
line-height: 1.35 !important;
font-weight: 650 !important;
color: #667085 !important;
}
/* Header / główne menu — spójne z homepage, bez ruszania layoutu */
body .fr-header,
body .fr-main-nav,
body .fr-header-menu,
body .main-navigation,
body .fr-today-bar,
body .fr-mega-menu,
body .fr-search-overlay,
body .fr-search-modal,
body .fr-search-panel {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body .fr-main-nav a,
body .fr-header-menu a,
body .fr-header nav a,
body .main-navigation a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -.01em !important;
text-transform: none !important;
}
/* Mega menu / mobile menu — plus/minus i nazwy kategorii bez ciężkiego rozjazdu */
body .fr-mobile-menu,
body .fr-mobile-menu a,
body .fr-mobile-nav,
body .fr-mobile-nav a,
body .fr-mobile-drawer,
body .fr-mobile-drawer a,
body .slideout-navigation,
body .slideout-navigation a,
body .fr-mega-menu,
body .fr-mega-menu a,
body .mega-menu,
body .mega-menu a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -.014em !important;
}
/* Search overlay — spójność typografii, bez zmiany działania JS */
body .fr-search-overlay input,
body .fr-search-modal input,
body .fr-search-panel input,
body .fr-search-overlay .search-field,
body .fr-search-results a,
body .fr-search-results h3,
body .fr-search-result-title,
body .fr-search-overlay .fr-search-result a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
letter-spacing: -.014em !important;
}
/* Mobile — zachowaj ten sam system, bez zmniejszania czytelności */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage .fr-section-head h2,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
font-family: var(--fr-font-title-final) !important;
letter-spacing: -.014em !important;
}
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3 {
line-height: 1.18 !important;
padding-bottom: .08em !important;
}
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-badge {
font-size: 10px !important;
font-weight: 800 !important;
letter-spacing: 0.040em !important;
}
}
/* =========================================================
4RINGS — TOP AD PLACEHOLDER BEFORE HERO
Dodaje / porządkuje placeholder nad hero na desktopie.
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad-top {
display: block !important;
width: 100% !important;
margin: 22px 0 34px !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-ad-top .fr-ad-box {
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
background: #f3f3f3 !important;
border: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Na mobile nie dokładamy kolejnego dużego slotu nad hero — zostaje istniejący rytm mobile. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-top {
display: none !important;
}
}
/* =========================================================
END LOCK — KAŻDĄ KOLEJNĄ POPRAWKĘ DODAWAJ POWYŻEJ TEGO BLOKU
========================================================= */
/* =========================================================
4RINGS — FINAL HOMEPAGE TOP / TYPOGRAPHY / HERO VISIBILITY FIX
TYPOGRAPHY LOCK — NIE NADPISYWAĆ
Zakres tej poprawki:
- centruje pasek „Dziś na 4rings” względem homepage,
- przywraca docelową typografię homepage/header/hero,
- przywraca czytelne białe tytuły i meta na hero/kafelkach ze zdjęciami,
- ujednolica wagę i rozmiar plakietek poza sekcją Chińskie marki,
- NIE RUSZA sekcji Chińskie marki, jej ciemnego tła, logotypów i układu.
WAŻNE:
Kolejne drobne poprawki CSS dodawaj NAD tym blokiem albo respektuj ten lock.
Nie nadpisuj font-family, font-weight, line-height i kolorów hero bez wyraźnej decyzji.
========================================================= */
body.fr-home-active .fr-homepage {
--fr-font-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-title-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-text-final: #222222;
color: var(--fr-home-text-final) !important;
font-family: var(--fr-font-final) !important;
background: #f7f7f5 !important;
}
body.fr-home-active .fr-homepage .fr-wrap,
body.fr-home-active .fr-homepage .fr-hero-block,
body.fr-home-active .fr-homepage .fr-section {
box-sizing: border-box !important;
}
/* Pasek „Dziś na 4rings” — wyśrodkowany jak reszta homepage */
body.fr-home-active .fr-homepage .fr-today-bar,
body.fr-home-active .fr-today-bar {
width: calc(100% - 48px) !important;
max-width: 1080px !important;
margin: 10px auto 22px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.fr-home-active .fr-today-bar {
width: calc(100% - 32px) !important;
max-width: none !important;
margin: 8px auto 18px !important;
}
}
/* Docelowa typografia homepage — nie zmieniać przy drobnych poprawkach */
body.fr-home-active .fr-homepage,
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-homepage span,
body.fr-home-active .fr-homepage a,
body.fr-home-active .fr-homepage strong,
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-section-head h2,
body.fr-home-active .fr-homepage .fr-section-head a,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a {
font-family: var(--fr-font-final) !important;
}
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a {
font-family: var(--fr-font-title-final) !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
color: #222222 !important;
text-rendering: geometricPrecision !important;
}
/* Hero i kafelki górne — przywrócenie białego tekstu, żeby nie znikał na zdjęciach */
body.fr-home-active .fr-homepage .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-card a,
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta-light {
color: #ffffff !important;
opacity: 1 !important;
}
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy strong {
color: #ffffff !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
text-shadow: 0 2px 7px rgba(0, 0, 0, .58) !important;
}
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong {
color: #ffffff !important;
font-size: clamp(34px, 4vw, 52px) !important;
line-height: 1.03 !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong {
color: #ffffff !important;
font-size: clamp(18px, 1.65vw, 24px) !important;
line-height: 1.08 !important;
}
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta-light {
color: rgba(255, 255, 255, .86) !important;
font-size: 13px !important;
font-weight: 650 !important;
letter-spacing: -.006em !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, .45) !important;
}
body.fr-home-active .fr-homepage .fr-hero-gradient {
background: linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .36) 45%, rgba(0, 0, 0, .82)) !important;
}
/* Plakietki — spójna typografia poza sekcją Chińskie marki */
body.fr-home-active .fr-homepage .fr-hero .fr-badge,
body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) .fr-badge,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-badge,
body.fr-home-active .fr-homepage .fr-layout-latest .fr-badge,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-badge {
font-family: var(--fr-font-final) !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: 0.035em !important;
text-transform: uppercase !important;
padding: 5px 8px !important;
color: #ffffff !important;
background: #1a1a1a !important;
}
body.fr-home-active .fr-homepage .fr-hero .fr-badge {
background: #111111 !important;
color: #ffffff !important;
box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
/* Górny pasek i linki sekcji — spójne, ale nieprzesadnie ciężkie */
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a,
body.fr-home-active .fr-homepage .fr-section-head a {
font-weight: 750 !important;
letter-spacing: -.006em !important;
}
/* Header / menu / search — zgodne z homepage, bez dotykania działania JS */
body .fr-site-header,
body .fr-site-header *,
body .fr-main-nav a,
body .fr-header-menu a,
body .fr-header nav a,
body .main-navigation a,
body .fr-search-overlay,
body .fr-search-overlay *,
body .fr-search-modal,
body .fr-search-modal *,
body .fr-search-panel,
body .fr-search-panel * {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body .fr-main-nav a,
body .fr-header-menu a,
body .fr-header nav a,
body .main-navigation a {
font-weight: 700 !important;
letter-spacing: -.01em !important;
}
/* Mobile — zachowaj ustalony system bez nadpisywania na losowe fonty */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3 {
font-family: var(--fr-font-title-final) !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
line-height: 1.16 !important;
}
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy strong {
color: #ffffff !important;
text-shadow: 0 2px 7px rgba(0, 0, 0, .58) !important;
}
body.fr-home-active .fr-homepage .fr-hero .fr-badge,
body.fr-home-active .fr-homepage .fr-section:not(.fr-layout-chinese) .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-badge {
font-size: 10px !important;
font-weight: 750 !important;
letter-spacing: 0.035em !important;
line-height: 1 !important;
}
}
/* =========================================================
END TYPOGRAPHY LOCK — NIE NADPISYWAĆ
========================================================= */
/* =========================================================
4RINGS — DESKTOP HOMEPAGE AD ORDER FINAL
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Finalny desktopowy układ placeholderów:
1) fr-ad-top — nad hero
2) fr-ad-before-latest — pod hero
3) fr-ad-after-latest — po Najnowsze
4) fr-ad-after-worth-reading — po Warto przeczytać / przed Testy
5) fr-ad-after-drives — po Napędy / przed Rankingi
6) fr-ad-after-guides — po Poradniki / przed Rynek
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-ad-before-latest,
body.fr-home-active .fr-homepage .fr-ad-after-latest,
body.fr-home-active .fr-homepage .fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad-after-guides {
display: block !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 44px auto !important;
padding: 0 !important;
overflow: hidden !important;
clear: both !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad-before-latest .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-after-worth-reading .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-after-drives .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-after-guides .fr-ad-box {
display: block !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
background: #f3f3f3 !important;
border: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
}
/* Nowe desktopowe sloty chowamy na mobile, żeby nie dokładać tam kolejnych dużych reklam. */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad-after-guides {
display: none !important;
}
}/* Nagłówki, tytuły kart, hero, menu UI */
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage h4,
body.fr-home-active .fr-homepage .fr-section-head h2,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage article h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-title a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title,
body .fr-site-header,
body .fr-site-header a,
body .fr-main-nav a,
body .fr-header-menu a,
body .fr-header nav a,
body .main-navigation a,
body .fr-mobile-menu,
body .fr-mobile-menu a,
body .fr-mega-menu,
body .fr-mega-menu a {
font-family: var(--fr-type-heading) !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
text-rendering: geometricPrecision !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* Meta/opisy/datki — lżejsze, systemowe */
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-meta-light,
body.fr-home-active .fr-homepage time,
body.fr-home-active .fr-homepage .fr-card-copy p,
body.fr-home-active .fr-homepage .fr-news-copy p,
body.fr-home-active .fr-homepage .fr-feature-card p,
body.fr-home-active .fr-homepage .fr-rankings-fresh-excerpt,
body.fr-home-active .fr-homepage .fr-rankings-fresh-meta {
font-family: var(--fr-type-body) !important;
font-weight: 600 !important;
letter-spacing: -.01em !important;
}
/* Plakietki — wszędzie identyczna typografia, bez rozjazdów */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-badge {
font-family: var(--fr-type-heading) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: 0.045em !important;
text-transform: uppercase !important;
padding: 5px 8px !important;
border-radius: 0 !important;
}
/* Hero — biały tekst i czytelność na zdjęciach */
body.fr-home-active .fr-homepage .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-card a,
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-card .fr-meta-light {
color: #ffffff !important;
opacity: 1 !important;
}
body.fr-home-active .fr-homepage .fr-hero-card .fr-hero-copy strong {
color: #ffffff !important;
text-shadow: 0 2px 7px rgba(0, 0, 0, .58) !important;
}
body.fr-home-active .fr-homepage .fr-hero-gradient {
background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.36) 45%, rgba(0,0,0,.84)) !important;
}
/* MOBILE AD POLICY — tylko jeden placeholder na mobile */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad,
body.fr-home-active .fr-homepage .fr-ad-top,
body.fr-home-active .fr-homepage .fr-ad-before-latest,
body.fr-home-active .fr-homepage .fr-ad-after-latest,
body.fr-home-active .fr-homepage .fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad-after-guides,
body.fr-home-active .fr-homepage .fr-ad-after-rankings,
body.fr-home-active .fr-homepage .fr-ad-before-market,
body.fr-home-active .fr-homepage .fr-ad-mobile-mid,
body.fr-home-active .fr-homepage .fr-ad-after-chinese {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}/* Usuń pustą przestrzeń między Rankingami a Poradnikami na mobile */
body.fr-home-active .fr-homepage .fr-rankings-fresh {
margin-top: 36px !important;
margin-bottom: 28px !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-grid,
body.fr-home-active .fr-homepage .fr-rankings-fresh-list {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
gap: 18px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card:last-child,
body.fr-home-active .fr-homepage .fr-rankings-fresh-list .fr-rankings-fresh-card:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides,
body.fr-home-active .fr-homepage .fr-layout-guides.fr-section {
margin-top: 28px !important;
}
}
/* DESKTOP/TABLET — mobile placeholder ukryty, desktopowe sloty zostają */
@media (min-width: 769px) {}
/* =========================================================
END 4RINGS — MOBILE ADS + TYPOGRAPHY FINAL LOCK
========================================================= */
/* =========================================================
4RINGS — TODAY BAR CENTER LOCK 2026
Cel: wyśrodkować pasek „Dziś na 4RINGS” na desktopie.
Nie ruszać typografii, hero, rankingów ani sekcji Chińskie marki.
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.fr-home-active .fr-today-bar {
width: min(1220px, calc(100% - 48px)) !important;
margin-left: auto !important;
margin-right: auto !important;
justify-content: center !important;
text-align: center !important;
}
body.fr-home-active .fr-homepage .fr-today-bar a,
body.fr-home-active .fr-today-bar a,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-today-label {
flex: 0 0 auto !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.fr-home-active .fr-today-bar {
justify-content: flex-start !important;
text-align: left !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE TYPOGRAPHY LOCK — NIE NADPISYWAĆ
Przy drobnych poprawkach CSS nie zmieniać font-family, font-weight,
line-height ani letter-spacing poniżej. Nowe poprawki dodawać NAD tym blokiem.
========================================================= */
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-hero-copy strong,
body.fr-home-active .fr-section-head h2,
body.fr-home-active .fr-today-label,
body.fr-home-active .fr-today-bar a,
body.fr-home-active .fr-badge,
body.fr-home-active .fr-card-copy h3,
body.fr-home-active .fr-news-copy h3,
body.fr-home-active .fr-feature-card h3,
body.fr-home-active .fr-older-posts a,
body.fr-home-active .fr-section-head a {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
body.fr-home-active .fr-homepage p,
body.fr-home-active .fr-meta,
body.fr-home-active .fr-card-copy p,
body.fr-home-active .fr-news-copy p,
body.fr-home-active .fr-feature-card p,
body.fr-home-active .fr-homepage time {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* =========================================================
4RINGS — FINAL MOBILE ADS / RANKING GAP / DESKTOP TOP ORDER LOCK
2026-05-24
ZASADY:
- Mobile: tylko jeden placeholder pod głównym hero.
- Desktop: fr-ad-top nad paskiem „Dziś na 4RINGS”.
- Usuwać puste przestrzenie po Rankingach przed Poradnikami.
- NIE NADPISYWAĆ TYPOGRAFII.
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-ad-top {
display: block !important;
width: 100% !important;
max-width: 970px !important;
margin: 24px auto 28px !important;
padding: 0 !important;
clear: both !important;
}
body.fr-home-active .fr-homepage .fr-ad-top .fr-ad-box {
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
background: #f3f3f3 !important;
border: 0 !important;
box-sizing: border-box !important;
}
}
/* =========================================================
4RINGS — TYPOGRAPHY LOCK REMINDER
NIE zmieniać font-family / font-weight / line-height / letter-spacing
przy poprawkach reklam, odstępów albo układu sekcji.
========================================================= */
/* =========================================================
4RINGS — HERO TEXT CLIP CLEAN FINAL 2026
Cel: usunąć pocięte fragmenty tekstu / białe kreski po wielokropku
na prawych kafelkach hero. NIE ruszać Chińskich marek.
========================================================= */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-small,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-card,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-small {
overflow: hidden !important;
contain: paint !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy {
overflow: hidden !important;
padding-bottom: 0 !important;
gap: 8px !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
max-height: calc(2em * 1.12) !important;
color: #fff !important;
opacity: 1 !important;
line-height: 1.12 !important;
padding: 0 !important;
margin: 0 !important;
text-shadow: 0 1px 2px rgba(0,0,0,.48) !important;
text-decoration: none !important;
background: transparent !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong *,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong *,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong * {
color: inherit !important;
text-decoration: none !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-meta,
body.fr-home-active .fr-homepage .fr-side-grid .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-small .fr-meta {
display: block !important;
overflow: hidden !important;
max-height: 1.45em !important;
color: rgba(255,255,255,.78) !important;
line-height: 1.35 !important;
padding: 0 !important;
margin-top: 2px !important;
text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
}
}
/* HERO i górne kafelki — jednolite, czytelne plakietki poza sekcją Chińskie marki */
body.fr-home-active .fr-homepage .fr-hero-block .fr-badge,
body.fr-home-active .fr-homepage .fr-hero-card .fr-badge,
body.fr-home-active .fr-homepage .fr-hero-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-main-hero .fr-badge,
body.fr-home-active .fr-homepage .fr-hero-side .fr-badge,
body.fr-home-active .fr-homepage .fr-side-grid .fr-badge {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.045em !important;
text-transform: uppercase !important;
color: #fff !important;
}
/* =========================================================
4RINGS — HOMEPAGE TYPOGRAPHY LOCK REMINDER
Nie zmieniać typografii przy poprawkach hero/reklam/odstępów.
========================================================= */
/* =========================================================
4RINGS — MOBILE RANKINGS GAP FINAL HARD FIX 2026
Cel: usunąć wielką pustą przestrzeń między sekcją Rankingi
a Poradnikami na mobile.
Przyczyna: desktopowe grid-template-rows: repeat(4, 1fr)
potrafi zostawić pusty, eksplicytny rząd na mobile, gdy ukrywamy
4. kartę boczną. Na mobile wymuszamy naturalne auto rows.
NIE RUSZAĆ TYPOGRAFII.
NIE RUSZAĆ CHIŃSKICH MAREK.
NIE RUSZAĆ HERO.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-rankings-fresh,
body.fr-home-active .fr-homepage section.fr-rankings-fresh {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-top: 34px !important;
margin-bottom: 10px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-grid,
body.fr-home-active .fr-homepage .fr-rankings-fresh-list {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: none !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 18px !important;
align-items: start !important;
align-content: start !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-list {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-card,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main,
body.fr-home-active .fr-homepage .fr-rankings-fresh-list .fr-rankings-fresh-card {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 0 18px !important;
border-bottom: 1px solid #E6E6E3 !important;
overflow: visible !important;
}
/* Mobile: pokazujemy łącznie 4 boksy: 1 główny + 3 boczne. */
body.fr-home-active .fr-homepage .fr-rankings-fresh-list .fr-rankings-fresh-card:nth-of-type(n+4) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-list .fr-rankings-fresh-card:nth-of-type(3),
body.fr-home-active .fr-homepage .fr-rankings-fresh-card:last-child {
margin-bottom: 0 !important;
padding-bottom: 10px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh + .fr-ad,
body.fr-home-active .fr-homepage .fr-rankings-fresh + [class*="fr-ad"],
body.fr-home-active .fr-homepage .fr-rankings-fresh ~ .fr-ad-after-rankings,
body.fr-home-active .fr-homepage .fr-rankings-fresh ~ .fr-ad-after-guides {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh + .fr-layout-guides,
body.fr-home-active .fr-homepage .fr-rankings-fresh ~ .fr-layout-guides,
body.fr-home-active .fr-homepage section.fr-layout-guides,
body.fr-home-active .fr-homepage .fr-layout-guides.fr-section {
margin-top: 12px !important;
padding-top: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides .fr-section-head {
margin-top: 0 !important;
}
}
/* =========================================================
4RINGS — MOBILE MENU PLUS/MINUS POSITION FINAL PATCH
ZAKRES: tylko mobile menu.
NIE RUSZAĆ: kolorów pasków, typografii, homepage, reklam,
Rankingów, Chińskich marek, single post.
Cel: czerwone kółko z minusem znika. Plus/minus pojawia się
w tym samym miejscu przy nazwie otwieranej kategorii.
========================================================= */
@media (max-width: 1024px) {
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) .menu-item-has-children {
position: relative !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) .menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle),
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) :is(button[aria-expanded], .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle) {
position: absolute !important;
right: 22px !important;
top: 42px !important;
transform: none !important;
z-index: 40 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
max-width: 32px !important;
max-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
color: #111111 !important;
font-size: 0 !important;
line-height: 1 !important;
text-indent: 0 !important;
overflow: visible !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(.submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, button[aria-expanded]):is(:hover, :focus, :active) {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(.submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, button[aria-expanded])::after {
content: none !important;
display: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(.submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, button[aria-expanded]) > * {
display: none !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(.submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, button[aria-expanded])::before {
content: "+" !important;
display: block !important;
color: #111111 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 28px !important;
font-weight: 650 !important;
line-height: 1 !important;
text-indent: 0 !important;
background: transparent !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(.submenu-toggle.toggled-on, .dropdown-menu-toggle.toggled-on, .fr-menu-toggle.toggled-on, .fr-submenu-toggle.toggled-on, .fr-accordion-toggle.toggled-on, button[aria-expanded="true"])::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) .menu-item-has-children:is(.open, .sfHover, .current-menu-open, .dropdown-open, .toggled-on) > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle)::before {
content: "\2212" !important;
color: #111111 !important;
font-size: 30px !important;
font-weight: 650 !important;
line-height: 1 !important;
background: transparent !important;
}
}
/* =========================================================
4RINGS — MOBILE MENU MINUS INLINE HARD LOCK 2026
ZAKRES: WYŁĄCZNIE mobile mega menu / slideout.
CEL: czerwone kółko z minusem całkowicie znika.
Plus/minus ma być zwykłym znakiem przy otwartej kategorii.
NIE RUSZAĆ: kolorowych pasków, typografii, homepage, reklam,
Rankingów, Chińskich marek, single post.
========================================================= */
@media (max-width: 1024px) {
/* Parent row musi być punktem odniesienia dla znaku +/- */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children {
position: relative !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > a {
position: relative !important;
padding-right: 72px !important;
}
/* Zabijamy wizualnie natywny toggle, ale zostawiamy jego obszar kliknięcia. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) {
position: absolute !important;
right: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 60 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
min-height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
outline: 0 !important;
appearance: none !important;
-webkit-appearance: none !important;
opacity: 1 !important;
overflow: visible !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
text-indent: -9999px !important;
}
/* Usuwamy czerwone koła / ikony / svg / pseudo-tła z każdego możliwego wariantu toggle. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) *,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) svg,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) .gp-icon {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::after {
content: none !important;
display: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Zwykły plus jako tekst na toggle. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before {
content: "+" !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
color: #111111 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 30px !important;
font-weight: 650 !important;
line-height: 1 !important;
text-indent: 0 !important;
}
/* Po otwarciu zwykły minus w tym samym miejscu. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button[aria-expanded="true"], .submenu-toggle.toggled-on, .dropdown-menu-toggle.toggled-on, .dropdown-menu-toggle[aria-expanded="true"], .fr-menu-toggle.toggled-on, .fr-submenu-toggle.toggled-on, .fr-accordion-toggle.toggled-on)::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children:is(.open, .sfHover, .current-menu-open, .dropdown-open, .toggled-on, .is-open, .active):has(> ul.sub-menu) > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before {
content: "\2212" !important;
color: #111111 !important;
font-size: 32px !important;
font-weight: 650 !important;
line-height: 1 !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Dodatkowe zabezpieczenie: czerwony okrąg nie może wrócić na hover/focus/active. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]):is(:hover, :focus, :active) {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
}
/* =========================================================
4RINGS — MOBILE MENU MINUS HARD LOCK FINAL
ZAKRES: tylko mobile / slideout / mega menu.
Cel: czerwone pływające kółko z minusem znika całkowicie.
Plus/minus zostaje jako zwykły znak w wierszu głównej kategorii.
NIE RUSZAĆ: typografia, kolory pasków, homepage, reklamy, rankingi.
========================================================= */
@media (max-width: 1024px) {
/* Główne pozycje z submenu muszą mieć stały punkt odniesienia tylko dla wiersza kategorii. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children,
body .fr-mobile-menu > ul > li.menu-item-has-children,
body .fr-mobile-nav > ul > li.menu-item-has-children,
body .fr-mobile-drawer > ul > li.menu-item-has-children,
body .fr-mobile-panel > ul > li.menu-item-has-children,
body .fr-mega-mobile > ul > li.menu-item-has-children {
position: relative !important;
}
/* Rezerwujemy miejsce z prawej strony na zwykły znak + / -. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a,
body .fr-mobile-menu > ul > li.menu-item-has-children > a,
body .fr-mobile-nav > ul > li.menu-item-has-children > a,
body .fr-mobile-drawer > ul > li.menu-item-has-children > a,
body .fr-mobile-panel > ul > li.menu-item-has-children > a,
body .fr-mega-mobile > ul > li.menu-item-has-children > a {
padding-right: 78px !important;
}
/* Natywny toggle: absolutnie przy wierszu kategorii, nie w połowie rozwiniętej listy. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]),
body .fr-mobile-nav > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]),
body .fr-mobile-drawer > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]),
body .fr-mobile-panel > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]),
body .fr-mega-mobile > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) {
position: absolute !important;
top: 0 !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
translate: none !important;
margin: 0 !important;
width: 52px !important;
height: 72px !important;
min-width: 52px !important;
min-height: 72px !important;
max-width: 52px !important;
max-height: 72px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
color: transparent !important;
line-height: 72px !important;
font-size: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 20 !important;
overflow: visible !important;
}
/* Zabijamy czerwony okrąg i wszystkie ikonki/SVG, które go tworzą. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle svg,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) *,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) svg {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Żaden pseudo-element toggle nie może rysować czerwonego tła/koła. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::after {
content: none !important;
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* Zwykły plus w miejscu toggle. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before {
content: "+" !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
color: #111111 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 34px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
}
/* Otwarte submenu: minus w tym samym miejscu, przy nazwie kategorii. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle[aria-expanded="true"]::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle[aria-expanded="true"]::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle.toggled-on::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle[aria-expanded="true"]::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children.sfHover > .dropdown-menu-toggle::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children.open > .dropdown-menu-toggle::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children.toggled-on > .dropdown-menu-toggle::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > .dropdown-menu-toggle::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > .dropdown-menu-toggle::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > .dropdown-menu-toggle::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button[aria-expanded="true"], .submenu-toggle.toggled-on, .dropdown-menu-toggle.toggled-on, .dropdown-menu-toggle[aria-expanded="true"], .fr-menu-toggle.toggled-on, .fr-submenu-toggle.toggled-on, .fr-accordion-toggle.toggled-on)::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before {
content: "\2212" !important;
color: #111111 !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
}
/* Awaryjnie: każdy czerwony okrągły przycisk w menu mobilnym traci koło i wraca do tekstowego znaku. */
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(button, [role="button"], .dropdown-menu-toggle, .submenu-toggle, .fr-submenu-toggle, .fr-accordion-toggle)[style*="background"],
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile, .slideout-navigation, .main-navigation.toggled, .main-navigation.mobile-navigation) :is(button, [role="button"], .dropdown-menu-toggle, .submenu-toggle, .fr-submenu-toggle, .fr-accordion-toggle):is(.is-open, .open, .active, .toggled-on) {
background: transparent !important;
background-color: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
/* =========================================================
4RINGS — MOBILE MENU / TODAY BAR / HERO CARDS FINAL PATCH
Zakres: tylko 3 rzeczy:
1) minus przy otwartej kategorii w mobile menu,
2) pasek „Dziś na 4RINGS” na desktopie od lewej i bez kreski przy etykiecie,
3) więcej widocznego tytułu w małych kafelkach hero.
NIE RUSZAĆ: typografia globalna, reklamy, Rankingi, Chińskie marki, single post.
========================================================= */
/* 1) MOBILE MENU — wizualny plus/minus rysowany na linku kategorii, nie na pływającym toggle */
@media (max-width: 1024px) {
/* Ukrywamy wizualnie natywny/pływający toggle, ale zostawiamy go jako obszar klikalny. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) {
position: absolute !important;
top: 0 !important;
right: 22px !important;
left: auto !important;
bottom: auto !important;
width: 58px !important;
height: 72px !important;
min-width: 58px !important;
min-height: 72px !important;
max-width: 58px !important;
max-height: 72px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
transform: none !important;
translate: none !important;
z-index: 50 !important;
overflow: visible !important;
}
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::before,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::before,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded])::after,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > .dropdown-menu-toggle *,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > :is(button, .submenu-toggle, .dropdown-menu-toggle, .fr-menu-toggle, .fr-submenu-toggle, .fr-accordion-toggle, [role="button"], [aria-expanded]) * {
content: none !important;
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Główny link kategorii jest punktem odniesienia dla znaku + / -. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > a {
position: relative !important;
padding-right: 82px !important;
}
/* Plus przy zamkniętej kategorii. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children > a::after,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children > a::after,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children > a::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children > a::after {
content: "+" !important;
position: absolute !important;
top: 50% !important;
right: 22px !important;
transform: translateY(-50%) !important;
display: block !important;
width: auto !important;
height: auto !important;
color: #111111 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
z-index: 60 !important;
}
/* Minus przy otwartej kategorii — dokładnie przy jej nazwie. */
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:is(.sfHover, .open, .toggled-on, .current-menu-open, .dropdown-open, .active) > a::after,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:is(.sfHover, .open, .toggled-on, .current-menu-open, .dropdown-open, .active) > a::after,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:is(.sfHover, .open, .toggled-on, .current-menu-open, .dropdown-open, .active) > a::after,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > a::after,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu.toggled-on) > a::after,
body .main-navigation.toggled .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[aria-hidden="false"]) > a::after,
body .main-navigation.mobile-navigation .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > a::after,
body .slideout-navigation .main-nav > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > a::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children:is(.sfHover, .open, .toggled-on, .current-menu-open, .dropdown-open, .active) > a::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children:has(> ul.sub-menu[style*="display: block"]) > a::after,
body :is(.fr-mobile-menu, .fr-mobile-nav, .fr-mobile-drawer, .fr-mobile-panel, .fr-mega-mobile) > ul > li.menu-item-has-children:has(> ul.sub-menu.toggled-on) > a::after {
content: "\2212" !important;
color: #111111 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
}
/* 2) DESKTOP — pasek „Dziś na 4RINGS” od lewej i bez czerwonej kreski przy etykiecie */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.home .fr-homepage .fr-today-bar,
.fr-homepage .fr-today-bar {
justify-content: flex-start !important;
text-align: left !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
}
body.fr-home-active .fr-homepage .fr-today-label::before,
body.home .fr-homepage .fr-today-label::before,
.fr-homepage .fr-today-label::before {
content: none !important;
display: none !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label,
body.home .fr-homepage .fr-today-label,
.fr-homepage .fr-today-label {
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/* 3) DESKTOP HERO — więcej widocznego tekstu w czterech małych kafelkach, bez uciętych kresek po clampie */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-small,
body.home .fr-homepage .fr-hero-side .fr-hero-card,
body.home .fr-homepage .fr-hero-side .fr-hero-small,
.fr-homepage .fr-hero-side .fr-hero-card,
.fr-homepage .fr-hero-side .fr-hero-small {
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.home .fr-homepage .fr-hero-side .fr-hero-copy,
.fr-homepage .fr-hero-side .fr-hero-copy {
overflow: hidden !important;
padding-bottom: 12px !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-title,
body.fr-home-active .fr-homepage .fr-hero-side h2,
body.fr-home-active .fr-homepage .fr-hero-side h3,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.home .fr-homepage .fr-hero-side .fr-hero-title,
body.home .fr-homepage .fr-hero-side h2,
body.home .fr-homepage .fr-hero-side h3,
.fr-homepage .fr-hero-side .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-title,
.fr-homepage .fr-hero-side h2,
.fr-homepage .fr-hero-side h3 {
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: clip !important;
white-space: normal !important;
max-height: none !important;
font-size: clamp(19px, 1.35vw, 25px) !important;
line-height: 1.04 !important;
letter-spacing: -.018em !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-title::after,
body.fr-home-active .fr-homepage .fr-hero-side h2::after,
body.fr-home-active .fr-homepage .fr-hero-side h3::after,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.home .fr-homepage .fr-hero-side .fr-hero-title::after,
body.home .fr-homepage .fr-hero-side h2::after,
body.home .fr-homepage .fr-hero-side h3::after,
.fr-homepage .fr-hero-side .fr-hero-copy strong::after,
.fr-homepage .fr-hero-side .fr-hero-title::after,
.fr-homepage .fr-hero-side h2::after,
.fr-homepage .fr-hero-side h3::after {
content: none !important;
display: none !important;
}
}
/* =========================================================
TYPOGRAPHY LOCK — NIE NADPISYWAĆ
Ten blok NIE zmienia globalnej typografii. Chroni przed tym,
żeby poprawki menu / paska / hero nie resetowały ustalonego systemu.
========================================================= */
/* =========================================================
4RINGS — FINAL MOBILE MENU + TODAY BAR + HERO TITLE PATCH
ZAKRES: tylko:
1) mobile menu: jeden plus/minus przy głównej kategorii,
2) desktop today bar: start w linii z hero, bez kreski przy etykiecie,
3) desktop hero side cards: bez urwanych kropek/fragmentów kolejnej linii.
TYPOGRAPHY LOCK — NIE NADPISYWAĆ FONTÓW GLOBALNYCH.
========================================================= */
/* 1) MOBILE MENU — prawdziwy przycisk plus/minus, bez pseudo na linku i bez podwójnych znaków */
@media (max-width: 1024px) {
/* Top-level LI musi być punktem odniesienia dla przycisku. Obsługujemy oba warianty: ul.fr-mobile-menu i wrapper .fr-mobile-menu > ul. */
body ul.fr-mobile-menu > li.menu-item-has-children,
body .fr-mobile-menu > ul > li.menu-item-has-children,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children,
body .fr-mobile-nav .fr-mobile-menu > ul > li.menu-item-has-children {
position: relative !important;
}
/* Link kategorii zostaje linkiem; plus/minus NIE jest już rysowany na linku, żeby klik w znak nie przenosił do kategorii. */
body ul.fr-mobile-menu > li.menu-item-has-children > a,
body .fr-mobile-menu > ul > li.menu-item-has-children > a,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > a,
body .fr-mobile-nav .fr-mobile-menu > ul > li.menu-item-has-children > a {
position: relative !important;
padding-right: 88px !important;
}
body ul.fr-mobile-menu > li.menu-item-has-children > a::after,
body .fr-mobile-menu > ul > li.menu-item-has-children > a::after,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > a::after,
body .fr-mobile-nav .fr-mobile-menu > ul > li.menu-item-has-children > a::after {
content: none !important;
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Jeden jedyny klikalny toggle: przy nazwie głównej kategorii, zawsze na górze LI. */
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-mobile-submenu-toggle,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-submenu-toggle,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle {
position: absolute !important;
top: 0 !important;
right: 26px !important;
bottom: auto !important;
left: auto !important;
width: 56px !important;
height: 86px !important;
min-width: 56px !important;
min-height: 86px !important;
max-width: 56px !important;
max-height: 86px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
outline: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
color: transparent !important;
font-size: 0 !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
translate: none !important;
z-index: 80 !important;
cursor: pointer !important;
overflow: visible !important;
appearance: none !important;
-webkit-appearance: none !important;
}
/* Ukrywamy realny span z PHP, żeby nie było „++”. Znak rysuje tylko ::before. */
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle > span,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle > span,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-mobile-submenu-toggle > span,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-submenu-toggle > span,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle > span,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle > span,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle svg,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle svg,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle svg,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle svg {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle::after,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::after,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-mobile-submenu-toggle::after,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-submenu-toggle::after,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle::after,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::after {
content: none !important;
display: none !important;
}
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle::before,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-mobile-submenu-toggle::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-submenu-toggle::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle::before {
content: "+" !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
color: #111111 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 32px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-align: center !important;
}
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle[aria-expanded="true"]::before,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle.is-open::before,
body ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle.is-open::before,
body ul.fr-mobile-menu > li.menu-item-has-children.is-open > button.fr-mobile-submenu-toggle::before,
body ul.fr-mobile-menu > li.menu-item-has-children.is-open > button.fr-submenu-toggle::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
body .fr-mobile-menu > ul > li.menu-item-has-children > button.fr-submenu-toggle[aria-expanded="true"]::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-mobile-submenu-toggle[aria-expanded="true"]::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > button.fr-submenu-toggle[aria-expanded="true"]::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children.is-open > button.fr-mobile-submenu-toggle::before,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children.is-open > button.fr-submenu-toggle::before {
content: "\2212" !important;
color: #111111 !important;
}
/* Każdy sub-menu ma zaczynać się dopiero pod głównym wierszem, nie może przesuwać toggle do środka listy. */
body ul.fr-mobile-menu > li.menu-item-has-children > ul.sub-menu,
body .fr-mobile-menu > ul > li.menu-item-has-children > ul.sub-menu,
body .fr-mobile-nav ul.fr-mobile-menu > li.menu-item-has-children > ul.sub-menu {
position: static !important;
clear: both !important;
}
}
/* 2) DESKTOP — pasek „Dziś na 4RINGS” w jednej linii ze startem hero */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body .fr-homepage .fr-today-bar,
body.home .fr-today-bar {
width: min(1220px, calc(100% - 64px)) !important;
max-width: 1220px !important;
margin-left: auto !important;
margin-right: auto !important;
justify-content: flex-start !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
background: transparent !important;
}
body.fr-home-active .fr-homepage .fr-today-label,
body .fr-homepage .fr-today-label,
body.home .fr-today-label {
padding-left: 0 !important;
border-left: 0 !important;
}
}
/* 3) DESKTOP HERO — pełniejsze tytuły w 4 małych kafelkach, bez białych kropek/uciętej kolejnej linii */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card,
body .fr-homepage .fr-hero-side .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-small,
body .fr-homepage .fr-hero-side .fr-hero-small {
overflow: hidden !important;
contain: paint !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body .fr-homepage .fr-hero-side .fr-hero-copy {
gap: 7px !important;
bottom: 12px !important;
left: 14px !important;
right: 14px !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card strong,
body .fr-homepage .fr-hero-side .fr-hero-card strong {
display: block !important;
overflow: visible !important;
max-height: none !important;
color: #ffffff !important;
font-size: clamp(18px, 1.18vw, 23px) !important;
line-height: 1.06 !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
text-overflow: clip !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: initial !important;
text-shadow: 0 1px 2px rgba(0,0,0,.55) !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::before {
content: none !important;
display: none !important;
}
}
/* =========================================================
4RINGS — TODAY BAR + HERO SIDE TITLES FINAL MICRO FIX
Zakres: tylko pasek „Dziś na 4RINGS” i tytuły w 4 małych kafelkach hero.
NIE RUSZAĆ: mobile menu, typografia globalna, reklamy, Rankingi, Chińskie marki, single.
========================================================= */
/* 1) DESKTOP — pasek „Dziś na 4RINGS” zaczyna się w linii ze zdjęciem hero */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.home .fr-homepage .fr-today-bar,
body .fr-homepage .fr-today-bar {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: flex-start !important;
border-left: 0 !important;
border-right: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-today-label,
body.home .fr-homepage .fr-today-label,
body .fr-homepage .fr-today-label {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label::before,
body.home .fr-homepage .fr-today-label::before,
body .fr-homepage .fr-today-label::before {
content: none !important;
display: none !important;
}
}
/* 2) MOBILE — bez czerwonej kreski przed „Dziś” */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-today-label,
body.home .fr-homepage .fr-today-label,
body .fr-homepage .fr-today-label {
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label::before,
body.home .fr-homepage .fr-today-label::before,
body .fr-homepage .fr-today-label::before {
content: none !important;
display: none !important;
}
}
/* 3) DESKTOP HERO — małe kafelki: bez fragmentów kolejnej linii / białych kropek */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card,
body.home .fr-homepage .fr-hero-side .fr-hero-card,
body .fr-homepage .fr-hero-side .fr-hero-card,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-small,
body.home .fr-homepage .fr-hero-side .fr-hero-small,
body .fr-homepage .fr-hero-side .fr-hero-small {
overflow: hidden !important;
contain: paint !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.home .fr-homepage .fr-hero-side .fr-hero-copy,
body .fr-homepage .fr-hero-side .fr-hero-copy {
left: 14px !important;
right: 14px !important;
bottom: 12px !important;
gap: 7px !important;
overflow: hidden !important;
max-height: calc(100% - 24px) !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong,
body .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card strong,
body.home .fr-homepage .fr-hero-side .fr-hero-card strong,
body .fr-homepage .fr-hero-side .fr-hero-card strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
overflow: hidden !important;
max-height: 3.24em !important;
color: #ffffff !important;
font-size: clamp(17px, 1.02vw, 21px) !important;
line-height: 1.08 !important;
font-weight: 800 !important;
letter-spacing: -.014em !important;
text-decoration: none !important;
text-overflow: ellipsis !important;
text-shadow: 0 1px 2px rgba(0,0,0,.58) !important;
white-space: normal !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-meta,
body.home .fr-homepage .fr-hero-side .fr-meta,
body .fr-homepage .fr-hero-side .fr-meta {
display: block !important;
margin-top: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
text-decoration: none !important;
}
}
/* =========================================================
4RINGS — TODAY BAR ALIGN + HERO SMALL TITLE CROP FIX
Zakres: TYLKO pasek „Dziś na 4RINGS” i tytuły w 4 małych kafelkach hero.
NIE RUSZAĆ: mobile menu, typografia globalna, reklamy, Rankingi, Chińskie marki, single.
========================================================= */
/* Desktop: tekst paska „Dziś na 4RINGS” zaczyna się w linii ze zdjęciem hero */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-today-bar,
body.home .fr-homepage .fr-today-bar,
body .fr-homepage .fr-today-bar,
body.fr-home-active .fr-today-bar,
body.home .fr-today-bar,
body .fr-today-bar {
justify-content: flex-start !important;
border-left: 0 !important;
border-right: 0 !important;
box-sizing: border-box !important;
padding-left: clamp(56px, 5vw, 96px) !important;
padding-right: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label,
body.home .fr-homepage .fr-today-label,
body .fr-homepage .fr-today-label,
body.fr-home-active .fr-today-label,
body.home .fr-today-label,
body .fr-today-label {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label::before,
body.home .fr-homepage .fr-today-label::before,
body .fr-homepage .fr-today-label::before,
body.fr-home-active .fr-today-label::before,
body.home .fr-today-label::before,
body .fr-today-label::before {
content: none !important;
display: none !important;
}
}
/* Mobile: bez czerwonej kreski przed „Dziś” — nic więcej nie zmieniamy */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-today-label,
body.home .fr-homepage .fr-today-label,
body .fr-homepage .fr-today-label,
body.fr-home-active .fr-today-label,
body.home .fr-today-label,
body .fr-today-label {
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-label::before,
body.home .fr-homepage .fr-today-label::before,
body .fr-homepage .fr-today-label::before,
body.fr-home-active .fr-today-label::before,
body.home .fr-today-label::before,
body .fr-today-label::before {
content: none !important;
display: none !important;
}
}
/* Desktop: małe kafelki hero — usuwa ucięte dolne fragmenty liter w tytułach */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.home .fr-homepage .fr-hero-side .fr-hero-copy,
body .fr-homepage .fr-hero-side .fr-hero-copy {
overflow: visible !important;
bottom: 13px !important;
gap: 6px !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong,
body .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-card strong,
body.home .fr-homepage .fr-hero-side .fr-hero-card strong,
body .fr-homepage .fr-hero-side .fr-hero-card strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
overflow: hidden !important;
max-height: 3.72em !important;
padding-bottom: .16em !important;
box-sizing: content-box !important;
font-size: clamp(16px, .96vw, 19px) !important;
line-height: 1.16 !important;
letter-spacing: -.01em !important;
text-overflow: ellipsis !important;
white-space: normal !important;
text-decoration: none !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body.home .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body .fr-homepage .fr-hero-side .fr-hero-copy strong::after {
content: none !important;
display: none !important;
}
}
/* =========================================================
4RINGS — TODAY BAR ALIGN + HERO SIDE TITLE CROP FINAL
Zakres: WYŁĄCZNIE pasek „Dziś na 4RINGS” i prawe kafelki hero.
NIE RUSZAĆ: mobile menu, reklamy, Rankingi, Chińskie marki, single, PHP, typografia globalna.
========================================================= */
@media (min-width: 1024px) {
/* Pasek „Dziś na 4RINGS” zaczyna się dokładnie tam, gdzie hero */
body.fr-home-active .fr-homepage .fr-today-bar,
body.home article#post-39740 .fr-homepage .fr-today-bar,
body.front-page article#post-39740 .fr-homepage .fr-today-bar,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar {
width: min(1320px, calc(100vw - 96px)) !important;
max-width: 1320px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
}
/* Bez kreski przed pierwszym elementem „Dziś na 4RINGS” */
body.fr-home-active .fr-homepage .fr-today-bar > :first-child,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child,
body.home article#post-39740 .fr-homepage .fr-today-bar > :first-child,
body.front-page article#post-39740 .fr-homepage .fr-today-bar > :first-child,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar > :first-child {
border-left: 0 !important;
margin-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-bar > :first-child::before,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label::before,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child::before,
body.home article#post-39740 .fr-homepage .fr-today-bar > :first-child::before,
body.front-page article#post-39740 .fr-homepage .fr-today-bar > :first-child::before,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar > :first-child::before {
display: none !important;
content: none !important;
}
/* Prawe kafelki hero: pełne linie tytułu, bez podglądu uciętej kolejnej linii */
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy,
body.home article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy {
left: 16px !important;
right: 16px !important;
bottom: 18px !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.home article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
overflow: hidden !important;
max-height: calc(3 * 1.18em) !important;
font-size: clamp(18px, 1.18vw, 22px) !important;
line-height: 1.18 !important;
letter-spacing: -.014em !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
text-overflow: clip !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-meta,
body.fr-home-active .fr-homepage .fr-side-grid .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-small .fr-meta,
body.home article#post-39740 .fr-homepage .fr-hero-side .fr-meta,
body.front-page article#post-39740 .fr-homepage .fr-hero-side .fr-meta,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side .fr-meta {
margin-top: 10px !important;
line-height: 1.25 !important;
padding-bottom: 0 !important;
}
}
@media (max-width: 768px) {
/* Mobile: bez czerwonej kreski przed „Dziś”, bez innych zmian */
body.fr-home-active .fr-homepage .fr-today-bar > :first-child,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child {
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-bar > :first-child::before,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label::before,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child::before {
display: none !important;
content: none !important;
}
}
/* =========================================================
4RINGS — FINAL MICRO FIX: TODAY BAR ALIGN + HERO SIDE TITLES
Zakres: WYŁĄCZNIE pasek „Dziś na 4RINGS” oraz prawe kafelki hero.
NIE RUSZAĆ: mobile menu, reklamy, Rankingi, Chińskie marki, single, PHP, globalna typografia.
========================================================= */
@media (min-width: 1024px) {
/* Pasek „Dziś na 4RINGS” ma zaczynać się dokładnie od lewej krawędzi hero */
body.fr-home-active .fr-homepage .fr-today-bar,
body.home article#post-39740 .fr-homepage .fr-today-bar,
body.front-page article#post-39740 .fr-homepage .fr-today-bar,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar {
width: min(1240px, calc(100vw - 64px)) !important;
max-width: 1240px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
justify-content: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-today-bar > :first-child,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child,
body.home article#post-39740 .fr-homepage .fr-today-bar > :first-child,
body.front-page article#post-39740 .fr-homepage .fr-today-bar > :first-child,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar > :first-child {
margin-left: 0 !important;
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-bar > :first-child::before,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label::before,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child::before,
body.home article#post-39740 .fr-homepage .fr-today-bar > :first-child::before,
body.front-page article#post-39740 .fr-homepage .fr-today-bar > :first-child::before,
body.page-id-39740 article#post-39740 .fr-homepage .fr-today-bar > :first-child::before {
display: none !important;
content: none !important;
}
/* Prawe kafelki hero: bez podglądu uciętej kolejnej linii i bez obciętych dolnych liter */
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy,
body.home article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy,
body.front-page article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy {
left: 16px !important;
right: 16px !important;
bottom: 18px !important;
overflow: hidden !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.home article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.front-page article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.page-id-39740 article#post-39740 .fr-homepage .fr-hero-side .fr-hero-copy strong {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
max-height: calc(2 * 1.24em + 2px) !important;
font-size: clamp(18px, 1.1vw, 20px) !important;
line-height: 1.24 !important;
letter-spacing: -.01em !important;
padding-bottom: 2px !important;
margin-bottom: 0 !important;
text-overflow: ellipsis !important;
}
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::before,
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong::after,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong::before,
body.fr-home-active .fr-homepage .fr-side-grid .fr-hero-copy strong::after,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong::before,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong::after {
display: none !important;
content: none !important;
}
}
@media (max-width: 768px) {
/* Mobile: dalej bez kreski przed „Dziś”; innych rzeczy nie ruszać */
body.fr-home-active .fr-homepage .fr-today-bar > :first-child,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child {
padding-left: 0 !important;
border-left: 0 !important;
}
body.fr-home-active .fr-homepage .fr-today-bar > :first-child::before,
body.fr-home-active .fr-homepage .fr-today-bar .fr-today-label::before,
body.fr-home-active .fr-homepage .fr-today-bar a:first-child::before {
display: none !important;
content: none !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE SYSTEM FONT STACK FINAL
Zmiana typografii zgodnie z ustaleniami: bez Google Fonts,
system font stack, spokojniejsze odstępy liter.
Nie zmienia układu sekcji ani finalnego układu Rankingi mobile.
========================================================= */
body.fr-home-active,
body.fr-home-active .fr-homepage,
body.fr-home-active .fr-homepage * {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: auto !important;
}
body.fr-home-active .fr-homepage {
--fr-font-title-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-font-text-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-font-title-lock: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--fr-home-font-text-lock: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-brief-item strong {
font-weight: 760 !important;
letter-spacing: -.014em !important;
}
body.fr-home-active .fr-homepage .fr-hero-main .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-day-card h1,
body.fr-home-active .fr-homepage .fr-section-head h2 {
font-weight: 780 !important;
letter-spacing: -.018em !important;
}
body.fr-home-active .fr-homepage .fr-meta,
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-today-label,
body.fr-home-active .fr-homepage .fr-section-head a,
body.fr-home-active .fr-homepage .fr-shortcuts a,
body.fr-home-active .fr-homepage .fr-older-posts a {
font-weight: 650 !important;
letter-spacing: .015em !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage h1,
body.fr-home-active .fr-homepage h2,
body.fr-home-active .fr-homepage h3,
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-feature-card h3 {
font-weight: 740 !important;
letter-spacing: -.01em !important;
}
}
/* =========================================================
4RINGS — SOFT CATEGORY BADGES FINAL
Cel: plakietki mają pomagać w orientacji, a nie odciągać wzroku od tytułu.
Jasne tło + subtelny kolor kategorii jako lewa krawędź.
========================================================= */
body .fr-badge,
body .fr-card-cat,
body .fr-related-cat,
body .fr-sidebar-kicker,
body .fr-sidebar-cat,
body .fr-sidebar-category,
body .fr-article-kicker,
body .fr-article-related-kicker,
body .fr-archive-badge,
body .fr-archive-label,
body .fr-static-kicker,
body .fr-page-kicker {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: max-content !important;
min-height: 22px !important;
padding: 4px 8px 4px 7px !important;
border: 1px solid #e3e5e8 !important;
border-left: 3px solid #b8bcc3 !important;
border-radius: 0 !important;
background: #f4f5f6 !important;
color: #202020 !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 700 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: auto !important;
}
/* Kolor kategorii zostaje tylko jako subtelny akcent lewej krawędzi */
body .fr-cat-aktualnosci,
body .fr-layout-latest .fr-badge,
body .fr-layout-news .fr-badge,
body .fr-layout-aktualnosci .fr-badge {
border-left-color: #E12626 !important;
}
body .fr-cat-testy,
body .fr-layout-tests .fr-badge {
border-left-color: #1565C0 !important;
}
body .fr-cat-rankingi,
body .fr-layout-ranking .fr-badge,
body .fr-layout-rankingi .fr-badge {
border-left-color: #1E8E3E !important;
}
body .fr-cat-poradniki,
body .fr-layout-guides .fr-badge,
body .fr-layout-poradniki .fr-badge {
border-left-color: #5B3CC4 !important;
}
body .fr-cat-napedy,
body .fr-layout-drives .fr-badge,
body .fr-layout-napedy .fr-badge {
border-left-color: #FFC400 !important;
}
body .fr-cat-rynek,
body .fr-layout-market .fr-badge,
body .fr-layout-rynek .fr-badge {
border-left-color: #F57C00 !important;
}
body .fr-cat-chinskie-marki,
body .fr-layout-chinese .fr-badge,
body .fr-layout-chinskie-marki .fr-badge {
border-left-color: #8B1E3F !important;
}
/* Wersje na ciemnym tle — dalej spokojne, ale czytelne */
.fr-hero-copy .fr-badge,
.fr-hero-card .fr-badge,
.fr-hero-main .fr-badge {
background: rgba(255, 255, 255, .92) !important;
border-color: rgba(255, 255, 255, .7) !important;
color: #151515 !important;
}
/* Małe listy w sidebarze — jeszcze spokojniejsze, żeby tytuły były ważniejsze */
body.single-post .fr-single-sidebar .fr-sidebar-kicker,
body.single-post .fr-single-sidebar .fr-sidebar-cat,
body.single-post .fr-single-sidebar .fr-sidebar-category {
min-height: 21px !important;
padding: 4px 7px 4px 6px !important;
font-size: 9.5px !important;
font-weight: 700 !important;
letter-spacing: .032em !important;
}
/* Czytaj dalej / powiązane teksty */
body.single-post .fr-article-related .fr-article-related-kicker,
body.single-post .fr-article-related .fr-card-cat,
body.single-post .fr-article-related .fr-related-cat {
margin: 10px 0 8px !important;
}
@media (max-width: 768px) {
body .fr-badge,
body .fr-card-cat,
body .fr-related-cat,
body .fr-sidebar-kicker,
body .fr-sidebar-cat,
body .fr-sidebar-category,
body .fr-article-kicker,
body .fr-article-related-kicker,
body .fr-archive-badge,
body .fr-archive-label,
body .fr-static-kicker,
body .fr-page-kicker {
min-height: 21px !important;
padding: 4px 7px 4px 6px !important;
font-size: 9.5px !important;
letter-spacing: .03em !important;
}
}
/* =========================================================
4RINGS — FINAL GLOBAL BADGES: LIGHT + CATEGORY LEFT ACCENT
Cel: plakietka ma pomagać w orientacji, ale nie kraść wzroku tytułowi.
========================================================= */
:root {
--fr-badge-light-bg: #f5f6f7;
--fr-badge-light-border: #e1e4e8;
--fr-badge-light-text: #151515;
--fr-badge-light-muted: #6b7280;
--fr-badge-accent-default: #C9CDD3;
--fr-badge-accent-aktualnosci: #E12626;
--fr-badge-accent-testy: #1565C0;
--fr-badge-accent-rankingi: #1E8E3E;
--fr-badge-accent-poradniki: #5B3CC4;
--fr-badge-accent-napedy: #FFC400;
--fr-badge-accent-rynek: #F57C00;
--fr-badge-accent-chinskie: #8B1E3F;
}
/* Baza — homepage */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-hero-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage article .fr-badge,
body.fr-home-active .fr-homepage span[class*="fr-cat-"],
body.fr-home-active .fr-homepage a[class*="fr-cat-"] {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: max-content !important;
min-height: 24px !important;
padding: 5px 8px 5px 9px !important;
border: 1px solid var(--fr-badge-light-border) !important;
border-left: 4px solid var(--fr-badge-accent, var(--fr-badge-accent-default)) !important;
border-radius: 0 !important;
background: var(--fr-badge-light-bg) !important;
color: var(--fr-badge-light-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* Baza — single, sidebar, czytaj dalej */
body.single-post .fr-article-kicker,
body.single-post .fr-badge,
body.single-post .fr-sidebar-kicker,
body.single-post .fr-sidebar-cat,
body.single-post .fr-sidebar-category,
body.single-post .fr-card-cat,
body.single-post .fr-article-related-kicker,
body.single-post .fr-related-cat,
body.single-post .fr-single-sidebar span[class*="fr-cat-"],
body.single-post .fr-article-related span[class*="fr-cat-"] {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: max-content !important;
min-height: 24px !important;
padding: 5px 8px 5px 9px !important;
border: 1px solid var(--fr-badge-light-border) !important;
border-left: 4px solid var(--fr-badge-accent, var(--fr-badge-accent-default)) !important;
border-radius: 0 !important;
background: var(--fr-badge-light-bg) !important;
color: var(--fr-badge-light-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* Baza — archiwa kategorii/tagów */
body.archive .fr-badge,
body.archive .fr-card-cat,
body.archive .fr-archive-badge,
body.archive .fr-archive-card .fr-badge,
body.archive .fr-archive-card span[class*="fr-cat-"],
body.category .fr-badge,
body.category .fr-card-cat,
body.category .fr-archive-badge,
body.tag .fr-badge,
body.tag .fr-card-cat,
body.tag .fr-archive-badge {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: max-content !important;
min-height: 24px !important;
padding: 5px 8px 5px 9px !important;
border: 1px solid var(--fr-badge-light-border) !important;
border-left: 4px solid var(--fr-badge-accent, var(--fr-badge-accent-default)) !important;
border-radius: 0 !important;
background: var(--fr-badge-light-bg) !important;
color: var(--fr-badge-light-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* Baza — strony statyczne, np. 4RINGS.PL */
body.fr-static-page .fr-static-label,
body.fr-static-page .fr-static-badge,
body.fr-static-page .fr-badge,
body.page .fr-static-label,
body.page .fr-static-badge {
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: max-content !important;
min-height: 24px !important;
padding: 5px 8px 5px 9px !important;
border: 1px solid var(--fr-badge-light-border) !important;
border-left: 4px solid var(--fr-badge-accent, var(--fr-badge-accent-aktualnosci)) !important;
border-radius: 0 !important;
background: var(--fr-badge-light-bg) !important;
color: var(--fr-badge-light-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
/* Wnętrze plakietki bez własnych efektów */
.fr-badge *,
.fr-card-cat *,
.fr-sidebar-kicker *,
.fr-article-kicker *,
.fr-archive-badge *,
.fr-article-related-kicker * {
color: inherit !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* Wyłączenie dekoracyjnych pseudo-elementów, które robiły ciężkie belki */
.fr-badge::before,
.fr-badge::after,
.fr-card-cat::before,
.fr-card-cat::after,
.fr-sidebar-kicker::before,
.fr-sidebar-kicker::after,
.fr-article-kicker::before,
.fr-article-kicker::after,
.fr-archive-badge::before,
.fr-archive-badge::after,
.fr-article-related-kicker::before,
.fr-article-related-kicker::after {
display: none !important;
content: none !important;
}
/* Akcent kategorii — klasy bezpośrednio na plakietce */
.fr-cat-aktualnosci,
.fr-cat-premiery-samochodow,
.fr-cat-zapowiedzi-modeli,
.fr-cat-faceliftingi,
.fr-cat-debiuty-producentow,
.fr-cat-przepisy-drogowe,
.fr-cat-mandaty,
.fr-cat-infrastruktura-drogowa,
.fr-cat-bezpieczenstwo,
.fr-cat-producenci-i-firmy,
.fr-cat-inwestycje,
.fr-cat-ceny-aut,
.fr-cat-rejestracje,
.fr-cat-formalnosci-urzedowe,
.fr-cat-nowe-technologie {
--fr-badge-accent: var(--fr-badge-accent-aktualnosci) !important;
}
.fr-cat-testy,
.fr-cat-testy-samochodow,
.fr-cat-pierwsze-jazdy,
.fr-cat-test-tygodnia,
.fr-cat-testy-dlugodystansowe,
.fr-cat-wideo-testy,
.fr-cat-testy-porownawcze,
.fr-cat-pojedynki-modeli,
.fr-cat-plusy-i-minusy,
.fr-cat-werdykt-redakcji,
.fr-cat-premium,
.fr-cat-elektryczne {
--fr-badge-accent: var(--fr-badge-accent-testy) !important;
}
.fr-cat-rankingi,
.fr-cat-rankingi-samochodow,
.fr-cat-do-30-tys,
.fr-cat-do-50-tys,
.fr-cat-do-100-tys,
.fr-cat-powyzej-150-tys,
.fr-cat-rodzinne,
.fr-cat-miejskie,
.fr-cat-suv-y,
.fr-cat-dla-firmy,
.fr-cat-uzywane-auta,
.fr-cat-najmniej-awaryjne,
.fr-cat-najtansze-w-utrzymaniu,
.fr-cat-najlepsze-ev {
--fr-badge-accent: var(--fr-badge-accent-rankingi) !important;
}
.fr-cat-poradniki,
.fr-cat-poradniki-motoryzacyjne,
.fr-cat-jak-wybrac-auto,
.fr-cat-nowe-czy-uzywane,
.fr-cat-leasing-czy-kredyt,
.fr-cat-formalnosci,
.fr-cat-serwis-i-naprawy,
.fr-cat-opony,
.fr-cat-akumulator,
.fr-cat-jazda-zima,
.fr-cat-ubezpieczenia-oc-ac,
.fr-cat-jak-obnizyc-spalanie,
.fr-cat-koszty-uzytkowania,
.fr-cat-mandaty-i-punkty {
--fr-badge-accent: var(--fr-badge-accent-poradniki) !important;
}
.fr-cat-napedy,
.fr-cat-napedy-samochodowe,
.fr-cat-samochody-elektryczne,
.fr-cat-plug-in-hybrid,
.fr-cat-hybrydy,
.fr-cat-ladowanie,
.fr-cat-benzyna,
.fr-cat-diesel,
.fr-cat-lpg,
.fr-cat-cng,
.fr-cat-wodor,
.fr-cat-e-fuels,
.fr-cat-infrastruktura {
--fr-badge-accent: var(--fr-badge-accent-napedy) !important;
}
.fr-cat-rynek,
.fr-cat-rynek-motoryzacyjny,
.fr-cat-promocje,
.fr-cat-rabaty,
.fr-cat-wyprzedaze-rocznika,
.fr-cat-finansowanie,
.fr-cat-ceny,
.fr-cat-import,
.fr-cat-trendy,
.fr-cat-wartosc-rezydualna,
.fr-cat-porownaj-leasing,
.fr-cat-dealerzy,
.fr-cat-konfiguratory,
.fr-cat-kalkulatory {
--fr-badge-accent: var(--fr-badge-accent-rynek) !important;
}
.fr-cat-chinskie-marki,
.fr-cat-chinskie,
.fr-cat-chinskie-marki-samochodow,
.fr-cat-byd,
.fr-cat-mg,
.fr-cat-omoda,
.fr-cat-jaecoo,
.fr-cat-omoda-jaecoo,
.fr-cat-nio,
.fr-cat-xpeng,
.fr-cat-gwm,
.fr-cat-geely,
.fr-cat-chery,
.fr-cat-ceny-chinskie,
.fr-cat-dostepnosc,
.fr-cat-opinie,
.fr-cat-serwis,
.fr-cat-vs-toyota,
.fr-cat-vs-hyundai,
.fr-cat-vs-tesla,
.fr-cat-czy-warto-kupic {
--fr-badge-accent: var(--fr-badge-accent-chinskie) !important;
}
/* Akcent kategorii — jeśli plakietka jest w sekcji danej kategorii */
.fr-layout-latest .fr-badge,
.fr-layout-news .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-aktualnosci) !important;
}
.fr-layout-tests .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-testy) !important;
}
.fr-layout-ranking .fr-badge,
.fr-layout-rankings .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-rankingi) !important;
}
.fr-layout-guides .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-poradniki) !important;
}
.fr-layout-drives .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-napedy) !important;
}
.fr-layout-market .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-rynek) !important;
}
.fr-layout-chinese .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-chinskie) !important;
}
/* Lekki hover — bez powrotu do czarnej belki */
@media (hover: hover) and (pointer: fine) {
.fr-badge:hover,
.fr-card-cat:hover,
.fr-sidebar-kicker:hover,
.fr-article-kicker:hover,
.fr-archive-badge:hover,
.fr-article-related-kicker:hover,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]:hover {
background: #fff !important;
border-color: #d8dce2 !important;
border-left-color: var(--fr-badge-accent, var(--fr-badge-accent-default)) !important;
color: #111 !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-badge,
body.single-post .fr-article-kicker,
body.single-post .fr-sidebar-kicker,
body.archive .fr-badge,
body.category .fr-badge,
body.tag .fr-badge {
min-height: 22px !important;
padding: 4px 7px 4px 8px !important;
border-left-width: 3px !important;
font-size: 9.5px !important;
letter-spacing: .03em !important;
}
}
/* =========================================================
4RINGS — BADGES FULL-HEIGHT LEFT ACCENT FINAL
Cel: wszystkie plakietki mają jasne tło, ciemny tekst
i pełny pionowy pasek kategorii od góry do dołu.
NIE RUSZA: layoutu kart, zdjęć, reklam, menu ani mobile Rankingów.
========================================================= */
:root,
.fr-homepage,
body.single-post,
body.archive,
body.category,
body.tag,
body.page {
--fr-badge-light-bg: #f5f6f7;
--fr-badge-light-border: #e1e4e8;
--fr-badge-light-text: #151515;
--fr-badge-accent-default: #C9CDD3;
--fr-badge-accent-aktualnosci: #E12626;
--fr-badge-accent-testy: #1565C0;
--fr-badge-accent-rankingi: #1E8E3E;
--fr-badge-accent-poradniki: #5B3CC4;
--fr-badge-accent-napedy: #FFC400;
--fr-badge-accent-rynek: #F57C00;
--fr-badge-accent-chinskie: #8B1E3F;
}
/* Bazowy wygląd wszystkich redakcyjnych plakietek */
.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-single-category,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-related-label,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-archive-label,
.fr-static-badge,
.fr-static-kicker,
.fr-static-label,
.fr-page-kicker,
.fr-page-label,
.fr-mobile-recommended-card-label,
.fr-rankings-fresh-badge,
.fr-rankings-fresh-main-badge,
.fr-rankings-fresh-side-badge,
.fr-day-label,
body.fr-home-active .fr-homepage span[class*="fr-cat-"] {
position: relative !important;
isolation: isolate !important;
display: inline-flex !important;
align-items: center !important;
width: fit-content !important;
max-width: 100% !important;
min-height: 22px !important;
margin-top: 0;
padding: 5px 8px 5px 12px !important;
border: 1px solid var(--fr-badge-light-border) !important;
border-left: 0 !important;
border-radius: 0 !important;
background: var(--fr-badge-light-bg) !important;
color: var(--fr-badge-light-text) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 750 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Pełny pionowy pasek — od góry do dołu plakietki, bez przerw */
.fr-badge::before,
.fr-card-cat::before,
.fr-cat-badge::before,
.fr-category-badge::before,
.fr-article-kicker::before,
.fr-article-category::before,
.fr-single-kicker::before,
.fr-single-category::before,
.fr-sidebar-kicker::before,
.fr-sidebar-cat::before,
.fr-sidebar-category::before,
.fr-related-cat::before,
.fr-related-label::before,
.fr-article-related-kicker::before,
.fr-archive-badge::before,
.fr-archive-eyebrow::before,
.fr-archive-label::before,
.fr-static-badge::before,
.fr-static-kicker::before,
.fr-static-label::before,
.fr-page-kicker::before,
.fr-page-label::before,
.fr-mobile-recommended-card-label::before,
.fr-rankings-fresh-badge::before,
.fr-rankings-fresh-main-badge::before,
.fr-rankings-fresh-side-badge::before,
.fr-day-label::before,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 4px !important;
height: auto !important;
min-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--fr-badge-accent, var(--fr-badge-accent-default)) !important;
box-shadow: none !important;
opacity: 1 !important;
transform: none !important;
flex: 0 0 auto !important;
z-index: 0 !important;
display: block !important;
}
/* Wyłączenie drugiego pseudo-elementu, żeby nie wracały stare kropki/podkreślenia */
.fr-badge::after,
.fr-card-cat::after,
.fr-cat-badge::after,
.fr-category-badge::after,
.fr-article-kicker::after,
.fr-article-category::after,
.fr-single-kicker::after,
.fr-single-category::after,
.fr-sidebar-kicker::after,
.fr-sidebar-cat::after,
.fr-sidebar-category::after,
.fr-related-cat::after,
.fr-related-label::after,
.fr-article-related-kicker::after,
.fr-archive-badge::after,
.fr-archive-eyebrow::after,
.fr-archive-label::after,
.fr-static-badge::after,
.fr-static-kicker::after,
.fr-static-label::after,
.fr-page-kicker::after,
.fr-page-label::after,
.fr-mobile-recommended-card-label::after,
.fr-rankings-fresh-badge::after,
.fr-rankings-fresh-main-badge::after,
.fr-rankings-fresh-side-badge::after,
.fr-day-label::after,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::after {
display: none !important;
content: none !important;
}
/* Tekst w plakietce zawsze nad paskiem */
.fr-badge *,
.fr-card-cat *,
.fr-cat-badge *,
.fr-category-badge *,
.fr-article-kicker *,
.fr-article-category *,
.fr-single-kicker *,
.fr-single-category *,
.fr-sidebar-kicker *,
.fr-sidebar-cat *,
.fr-sidebar-category *,
.fr-related-cat *,
.fr-related-label *,
.fr-article-related-kicker *,
.fr-archive-badge *,
.fr-archive-eyebrow *,
.fr-archive-label *,
.fr-static-badge *,
.fr-static-kicker *,
.fr-static-label *,
.fr-page-kicker *,
.fr-page-label *,
.fr-mobile-recommended-card-label *,
.fr-rankings-fresh-badge *,
.fr-rankings-fresh-main-badge *,
.fr-rankings-fresh-side-badge *,
.fr-day-label * {
position: relative !important;
z-index: 1 !important;
color: inherit !important;
text-shadow: none !important;
box-shadow: none !important;
}
/* Ukrycie starej kropki w etykiecie dnia — pasek przejmuje funkcję akcentu */
.fr-day-label > span:first-child:empty,
.fr-day-label .fr-dot,
.fr-day-label .fr-label-dot {
display: none !important;
}
/* Kolory akcentów po klasach kategorii */
.fr-cat-aktualnosci,
.fr-cat-aktualnosci-motoryzacyjne,
.fr-cat-premiery-samochodow,
.fr-cat-zapowiedzi-modeli,
.fr-cat-faceliftingi,
.fr-cat-debiuty-producentow,
.fr-cat-przepisy-drogowe,
.fr-cat-mandaty,
.fr-cat-infrastruktura-drogowa,
.fr-cat-bezpieczenstwo,
.fr-cat-producenci-i-firmy,
.fr-cat-inwestycje,
.fr-cat-ceny-aut,
.fr-cat-rejestracje,
.fr-cat-formalnosci-urzedowe,
.fr-cat-nowe-technologie {
--fr-badge-accent: var(--fr-badge-accent-aktualnosci) !important;
}
.fr-cat-testy,
.fr-cat-testy-samochodow,
.fr-cat-pierwsze-jazdy,
.fr-cat-test-tygodnia,
.fr-cat-testy-dlugodystansowe,
.fr-cat-wideo-testy,
.fr-cat-testy-porownawcze,
.fr-cat-pojedynki-modeli,
.fr-cat-plusy-i-minusy,
.fr-cat-werdykt-redakcji,
.fr-cat-suv-y,
.fr-cat-auta-miejskie,
.fr-cat-premium,
.fr-cat-elektryczne {
--fr-badge-accent: var(--fr-badge-accent-testy) !important;
}
.fr-cat-rankingi,
.fr-cat-rankingi-samochodow,
.fr-cat-do-30-tys,
.fr-cat-do-50-tys,
.fr-cat-do-100-tys,
.fr-cat-powyzej-150-tys,
.fr-cat-rodzinne,
.fr-cat-miejskie,
.fr-cat-dla-firmy,
.fr-cat-uzywane-auta,
.fr-cat-najmniej-awaryjne,
.fr-cat-najtansze-w-utrzymaniu,
.fr-cat-najlepsze-ev {
--fr-badge-accent: var(--fr-badge-accent-rankingi) !important;
}
.fr-cat-poradniki,
.fr-cat-poradniki-motoryzacyjne,
.fr-cat-jak-wybrac-auto,
.fr-cat-nowe-czy-uzywane,
.fr-cat-leasing-czy-kredyt,
.fr-cat-formalnosci,
.fr-cat-serwis-i-naprawy,
.fr-cat-opony,
.fr-cat-akumulator,
.fr-cat-jazda-zima,
.fr-cat-ubezpieczenia-oc-ac,
.fr-cat-jak-obnizyc-spalanie,
.fr-cat-koszty-uzytkowania,
.fr-cat-mandaty-i-punkty {
--fr-badge-accent: var(--fr-badge-accent-poradniki) !important;
}
.fr-cat-napedy,
.fr-cat-napedy-samochodowe,
.fr-cat-samochody-elektryczne,
.fr-cat-plug-in-hybrid,
.fr-cat-hybrydy,
.fr-cat-ladowanie,
.fr-cat-benzyna,
.fr-cat-diesel,
.fr-cat-lpg,
.fr-cat-cng,
.fr-cat-wodor,
.fr-cat-e-fuels,
.fr-cat-infrastruktura {
--fr-badge-accent: var(--fr-badge-accent-napedy) !important;
}
.fr-cat-rynek,
.fr-cat-rynek-motoryzacyjny,
.fr-cat-promocje,
.fr-cat-rabaty,
.fr-cat-wyprzedaze-rocznika,
.fr-cat-finansowanie,
.fr-cat-ceny,
.fr-cat-import,
.fr-cat-trendy,
.fr-cat-wartosc-rezydualna,
.fr-cat-porownaj-leasing,
.fr-cat-dealerzy,
.fr-cat-konfiguratory,
.fr-cat-kalkulatory {
--fr-badge-accent: var(--fr-badge-accent-rynek) !important;
}
.fr-cat-chinskie-marki,
.fr-cat-chinskie,
.fr-cat-chinskie-marki-samochodow,
.fr-cat-byd,
.fr-cat-mg,
.fr-cat-omoda,
.fr-cat-jaecoo,
.fr-cat-omoda-jaecoo,
.fr-cat-nio,
.fr-cat-xpeng,
.fr-cat-gwm,
.fr-cat-geely,
.fr-cat-chery,
.fr-cat-ceny-chinskie,
.fr-cat-dostepnosc,
.fr-cat-opinie,
.fr-cat-serwis,
.fr-cat-vs-toyota,
.fr-cat-vs-hyundai,
.fr-cat-vs-tesla,
.fr-cat-czy-warto-kupic {
--fr-badge-accent: var(--fr-badge-accent-chinskie) !important;
}
/* Kolory po sekcjach homepage, gdy etykieta nie ma własnej klasy kategorii */
.fr-layout-latest .fr-badge,
.fr-layout-news .fr-badge,
.fr-layout-aktualnosci .fr-badge,
.fr-hero-copy .fr-badge,
.fr-hero-card .fr-badge,
.fr-hero-main .fr-badge {
--fr-badge-accent: var(--fr-badge-accent-aktualnosci) !important;
}
.fr-layout-tests .fr-badge { --fr-badge-accent: var(--fr-badge-accent-testy) !important; }
.fr-layout-ranking .fr-badge,
.fr-layout-rankingi .fr-badge,
.fr-layout-rankings .fr-badge { --fr-badge-accent: var(--fr-badge-accent-rankingi) !important; }
.fr-layout-guides .fr-badge,
.fr-layout-poradniki .fr-badge { --fr-badge-accent: var(--fr-badge-accent-poradniki) !important; }
.fr-layout-drives .fr-badge,
.fr-layout-napedy .fr-badge { --fr-badge-accent: var(--fr-badge-accent-napedy) !important; }
.fr-layout-market .fr-badge,
.fr-layout-rynek .fr-badge { --fr-badge-accent: var(--fr-badge-accent-rynek) !important; }
.fr-layout-chinese .fr-badge,
.fr-layout-chinskie-marki .fr-badge { --fr-badge-accent: var(--fr-badge-accent-chinskie) !important; }
/* Hover bez powrotu czarnego tła */
@media (hover: hover) and (pointer: fine) {
.fr-badge:hover,
.fr-card-cat:hover,
.fr-cat-badge:hover,
.fr-category-badge:hover,
.fr-article-kicker:hover,
.fr-article-category:hover,
.fr-single-kicker:hover,
.fr-sidebar-kicker:hover,
.fr-sidebar-cat:hover,
.fr-sidebar-category:hover,
.fr-related-cat:hover,
.fr-article-related-kicker:hover,
.fr-archive-badge:hover,
.fr-archive-eyebrow:hover,
.fr-static-badge:hover,
.fr-static-kicker:hover,
.fr-page-kicker:hover,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]:hover {
background: #fff !important;
color: #111 !important;
border-color: #d8dce2 !important;
border-left: 0 !important;
}
}
@media (max-width: 768px) {
.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-static-badge,
.fr-static-kicker,
.fr-page-kicker,
.fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage span[class*="fr-cat-"] {
min-height: 22px !important;
padding: 4px 7px 4px 11px !important;
font-size: 9.5px !important;
letter-spacing: .03em !important;
}
.fr-badge::before,
.fr-card-cat::before,
.fr-cat-badge::before,
.fr-category-badge::before,
.fr-article-kicker::before,
.fr-article-category::before,
.fr-single-kicker::before,
.fr-sidebar-kicker::before,
.fr-sidebar-cat::before,
.fr-sidebar-category::before,
.fr-related-cat::before,
.fr-article-related-kicker::before,
.fr-archive-badge::before,
.fr-archive-eyebrow::before,
.fr-static-badge::before,
.fr-static-kicker::before,
.fr-page-kicker::before,
.fr-mobile-recommended-card-label::before,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::before {
width: 3px !important;
}
}
/* =========================================================
4RINGS — BADGES FINAL RECTANGLE LOCK
Cel: jasnoszare prostokątne plakietki + cienki pełny pasek
kategorii po lewej stronie. Bez czarnych teł i bez wystających
pseudo-elementów. NIE RUSZA UKŁADÓW ANI RANKINGI MOBILE.
========================================================= */
:root,
.fr-homepage,
.fr-single,
.fr-archive,
.fr-static-page {
--fr-badge-bg-final: #f4f5f6;
--fr-badge-border-final: #dfe3e7;
--fr-badge-text-final: #111111;
--fr-badge-accent-final: #E12626;
--fr-badge-accent-aktualnosci: #E12626;
--fr-badge-accent-testy: #1565C0;
--fr-badge-accent-rankingi: #1E8E3E;
--fr-badge-accent-poradniki: #5B3CC4;
--fr-badge-accent-napedy: #FFC400;
--fr-badge-accent-rynek: #F57C00;
--fr-badge-accent-chinskie: #8B1E3F;
}
/* Kolor kategorii — po rodzicu / sekcji / slugu / linku */
.fr-cat-aktualnosci,
.fr-layout-latest,
.fr-layout-news,
.category-aktualnosci-motoryzacyjne,
[class*="aktualnosci-motoryzacyjne"],
a[href*="aktualnosci-motoryzacyjne"] { --fr-badge-accent-final: var(--fr-badge-accent-aktualnosci); }
.fr-cat-testy,
.fr-layout-tests,
.category-testy-samochodow,
[class*="testy-samochodow"],
a[href*="testy-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-testy); }
.fr-cat-rankingi,
.fr-layout-ranking,
.fr-layout-rankings,
.category-rankingi-samochodow,
[class*="rankingi-samochodow"],
a[href*="rankingi-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-rankingi); }
.fr-cat-poradniki,
.fr-layout-guides,
.category-poradniki-motoryzacyjne,
[class*="poradniki-motoryzacyjne"],
a[href*="poradniki-motoryzacyjne"] { --fr-badge-accent-final: var(--fr-badge-accent-poradniki); }
.fr-cat-napedy,
.fr-layout-drives,
.category-napedy-samochodowe,
[class*="napedy-samochodowe"],
a[href*="napedy-samochodowe"] { --fr-badge-accent-final: var(--fr-badge-accent-napedy); }
.fr-cat-rynek,
.fr-layout-market,
.category-rynek-motoryzacyjny,
[class*="rynek-motoryzacyjny"],
a[href*="rynek-motoryzacyjny"] { --fr-badge-accent-final: var(--fr-badge-accent-rynek); }
.fr-cat-chinskie,
.fr-layout-chinese,
.category-chinskie-marki-samochodow,
[class*="chinskie-marki-samochodow"],
a[href*="chinskie-marki-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-chinskie); }
/* Gdy plakietka jest linkiem do kategorii — kolor po href */
a.fr-badge[href*="aktualnosci-motoryzacyjne"],
a.fr-card-cat[href*="aktualnosci-motoryzacyjne"],
a.fr-category-badge[href*="aktualnosci-motoryzacyjne"],
a.fr-sidebar-cat[href*="aktualnosci-motoryzacyjne"],
a.fr-related-cat[href*="aktualnosci-motoryzacyjne"] { --fr-badge-accent-final: var(--fr-badge-accent-aktualnosci); }
a.fr-badge[href*="testy-samochodow"],
a.fr-card-cat[href*="testy-samochodow"],
a.fr-category-badge[href*="testy-samochodow"],
a.fr-sidebar-cat[href*="testy-samochodow"],
a.fr-related-cat[href*="testy-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-testy); }
a.fr-badge[href*="rankingi-samochodow"],
a.fr-card-cat[href*="rankingi-samochodow"],
a.fr-category-badge[href*="rankingi-samochodow"],
a.fr-sidebar-cat[href*="rankingi-samochodow"],
a.fr-related-cat[href*="rankingi-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-rankingi); }
a.fr-badge[href*="poradniki-motoryzacyjne"],
a.fr-card-cat[href*="poradniki-motoryzacyjne"],
a.fr-category-badge[href*="poradniki-motoryzacyjne"],
a.fr-sidebar-cat[href*="poradniki-motoryzacyjne"],
a.fr-related-cat[href*="poradniki-motoryzacyjne"] { --fr-badge-accent-final: var(--fr-badge-accent-poradniki); }
a.fr-badge[href*="napedy-samochodowe"],
a.fr-card-cat[href*="napedy-samochodowe"],
a.fr-category-badge[href*="napedy-samochodowe"],
a.fr-sidebar-cat[href*="napedy-samochodowe"],
a.fr-related-cat[href*="napedy-samochodowe"] { --fr-badge-accent-final: var(--fr-badge-accent-napedy); }
a.fr-badge[href*="rynek-motoryzacyjny"],
a.fr-card-cat[href*="rynek-motoryzacyjny"],
a.fr-category-badge[href*="rynek-motoryzacyjny"],
a.fr-sidebar-cat[href*="rynek-motoryzacyjny"],
a.fr-related-cat[href*="rynek-motoryzacyjny"] { --fr-badge-accent-final: var(--fr-badge-accent-rynek); }
a.fr-badge[href*="chinskie-marki-samochodow"],
a.fr-card-cat[href*="chinskie-marki-samochodow"],
a.fr-category-badge[href*="chinskie-marki-samochodow"],
a.fr-sidebar-cat[href*="chinskie-marki-samochodow"],
a.fr-related-cat[href*="chinskie-marki-samochodow"] { --fr-badge-accent-final: var(--fr-badge-accent-chinskie); }
/* Globalny wygląd plakietek — prostokąt, jasne tło, cienki pełny pasek z lewej */
.fr-badge,
a.fr-badge,
span.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-post-cat,
.fr-entry-cat,
.fr-entry-category,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-day-label,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-static-badge,
.fr-static-kicker,
.fr-page-kicker,
.fr-mobile-recommended-card-label,
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge,
.fr-homepage article .fr-badge,
.fr-single-sidebar .fr-badge,
.fr-article-sidebar .fr-badge,
.fr-sidebar .fr-badge,
.fr-related-posts .fr-badge,
.fr-read-more .fr-badge,
.fr-more-posts .fr-badge,
body.fr-home-active .fr-homepage span[class*="fr-cat-"],
body.fr-home-active .fr-homepage a[class*="fr-cat-"] {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: fit-content !important;
min-width: 0 !important;
min-height: 22px !important;
margin: 0 0 6px !important;
padding: 4px 8px !important;
box-sizing: border-box !important;
border: 1px solid var(--fr-badge-border-final) !important;
border-left: 3px solid var(--fr-badge-accent-final, var(--fr-color, #E12626)) !important;
border-radius: 0 !important;
outline: 0 !important;
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
background-image: none !important;
color: var(--fr-badge-text-final) !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1.05 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: hidden !important;
transform: none !important;
}
/* Wyłącz wcześniejsze pseudo-paski/kropki, które robiły za szerokie znaczniki albo wystawały poza prostokąt. */
.fr-badge::before,
a.fr-badge::before,
span.fr-badge::before,
.fr-card-cat::before,
.fr-cat-badge::before,
.fr-category-badge::before,
.fr-post-cat::before,
.fr-entry-cat::before,
.fr-entry-category::before,
.fr-article-kicker::before,
.fr-article-category::before,
.fr-single-kicker::before,
.fr-day-label::before,
.fr-sidebar-kicker::before,
.fr-sidebar-cat::before,
.fr-sidebar-category::before,
.fr-related-cat::before,
.fr-article-related-kicker::before,
.fr-archive-badge::before,
.fr-archive-eyebrow::before,
.fr-static-badge::before,
.fr-static-kicker::before,
.fr-page-kicker::before,
.fr-mobile-recommended-card-label::before,
.fr-homepage .fr-card-copy .fr-badge::before,
.fr-homepage .fr-news-copy .fr-badge::before,
.fr-homepage .fr-feature-card .fr-badge::before,
.fr-homepage article .fr-badge::before,
.fr-single-sidebar .fr-badge::before,
.fr-article-sidebar .fr-badge::before,
.fr-sidebar .fr-badge::before,
.fr-related-posts .fr-badge::before,
.fr-read-more .fr-badge::before,
.fr-more-posts .fr-badge::before,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::before,
body.fr-home-active .fr-homepage a[class*="fr-cat-"]::before {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.fr-badge:hover,
a.fr-badge:hover,
.fr-card-cat:hover,
.fr-cat-badge:hover,
.fr-category-badge:hover,
.fr-post-cat:hover,
.fr-entry-cat:hover,
.fr-entry-category:hover,
.fr-article-kicker:hover,
.fr-article-category:hover,
.fr-single-kicker:hover,
.fr-day-label:hover,
.fr-sidebar-kicker:hover,
.fr-sidebar-cat:hover,
.fr-sidebar-category:hover,
.fr-related-cat:hover,
.fr-article-related-kicker:hover,
.fr-archive-badge:hover,
.fr-archive-eyebrow:hover,
.fr-static-badge:hover,
.fr-static-kicker:hover,
.fr-page-kicker:hover,
.fr-mobile-recommended-card-label:hover,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]:hover,
body.fr-home-active .fr-homepage a[class*="fr-cat-"]:hover {
border-left-color: var(--fr-badge-accent-final, var(--fr-color, #E12626)) !important;
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
background-image: none !important;
color: var(--fr-badge-text-final) !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* Drobne wyrównanie w ciasnych kartach homepage i sidebarze */
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge,
.fr-sidebar .fr-badge,
.fr-article-sidebar .fr-badge,
.fr-single-sidebar .fr-badge {
margin-bottom: 5px !important;
}
@media (max-width: 768px) {
.fr-badge,
a.fr-badge,
span.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-post-cat,
.fr-entry-cat,
.fr-entry-category,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-day-label,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-static-badge,
.fr-static-kicker,
.fr-page-kicker,
.fr-mobile-recommended-card-label,
body.fr-home-active .fr-homepage span[class*="fr-cat-"],
body.fr-home-active .fr-homepage a[class*="fr-cat-"] {
min-height: 21px !important;
padding: 4px 7px !important;
border-left-width: 3px !important;
font-size: 9.5px !important;
letter-spacing: .03em !important;
}
}
/* =========================================================
4RINGS — BADGES FINAL LOCK V2
Plakietki: jasny prostokąt + jeden cienki pionowy pasek po lewej.
NIE ZMIENIAĆ bez osobnego zadania.
========================================================= */
:root {
--fr-badge-bg-lock: #f3f5f7;
--fr-badge-border-lock: #dfe3e7;
--fr-badge-text-lock: #111111;
--fr-badge-accent-lock: #E12626;
--fr-badge-aktualnosci-lock: #E12626;
--fr-badge-testy-lock: #1565C0;
--fr-badge-rankingi-lock: #1E8E3E;
--fr-badge-poradniki-lock: #5B3CC4;
--fr-badge-napedy-lock: #FFC400;
--fr-badge-rynek-lock: #F57C00;
--fr-badge-chinskie-lock: #8B1E3F;
}
/* Kolor akcentu po kontekście strony/sekcji */
body.category-aktualnosci-motoryzacyjne,
body[class*="aktualnosci-motoryzacyjne"],
.fr-layout-latest,
.fr-layout-news,
.fr-cat-aktualnosci,
.fr-cat-aktualnosci-motoryzacyjne,
.fr-cat-premiery-samochodow,
.fr-cat-zapowiedzi-modeli,
.fr-cat-faceliftingi,
.fr-cat-debiuty-producentow,
.fr-cat-przepisy-drogowe,
.fr-cat-mandaty,
.fr-cat-infrastruktura-drogowa,
.fr-cat-bezpieczenstwo,
.fr-cat-producenci-i-firmy,
.fr-cat-inwestycje,
.fr-cat-ceny-aut,
.fr-cat-rejestracje,
.fr-cat-nowe-technologie,
.fr-cat-formalnosci-urzedowe {
--fr-badge-accent-lock: var(--fr-badge-aktualnosci-lock);
}
body.category-testy-samochodow,
body[class*="testy-samochodow"],
.fr-layout-tests,
.fr-cat-testy,
.fr-cat-testy-samochodow,
.fr-cat-pierwsze-jazdy,
.fr-cat-test-tygodnia,
.fr-cat-testy-dlugodystansowe,
.fr-cat-wideo-testy,
.fr-cat-testy-porownawcze,
.fr-cat-pojedynki-modeli,
.fr-cat-plusy-i-minusy,
.fr-cat-werdykt-redakcji,
.fr-cat-suv-y,
.fr-cat-auta-miejskie,
.fr-cat-premium,
.fr-cat-elektryczne {
--fr-badge-accent-lock: var(--fr-badge-testy-lock);
}
body.category-rankingi-samochodow,
body[class*="rankingi-samochodow"],
.fr-layout-ranking,
.fr-layout-rankings,
.fr-cat-rankingi,
.fr-cat-rankingi-samochodow,
.fr-cat-do-30-tys,
.fr-cat-do-50-tys,
.fr-cat-do-100-tys,
.fr-cat-powyzej-150-tys,
.fr-cat-rodzinne,
.fr-cat-miejskie,
.fr-cat-dla-firmy,
.fr-cat-uzywane-auta,
.fr-cat-najmniej-awaryjne,
.fr-cat-najtansze-w-utrzymaniu,
.fr-cat-najlepsze-ev {
--fr-badge-accent-lock: var(--fr-badge-rankingi-lock);
}
body.category-poradniki-motoryzacyjne,
body[class*="poradniki-motoryzacyjne"],
.fr-layout-guides,
.fr-cat-poradniki,
.fr-cat-poradniki-motoryzacyjne,
.fr-cat-jak-wybrac-auto,
.fr-cat-nowe-czy-uzywane,
.fr-cat-leasing-czy-kredyt,
.fr-cat-formalnosci,
.fr-cat-serwis-i-naprawy,
.fr-cat-opony,
.fr-cat-akumulator,
.fr-cat-jazda-zima,
.fr-cat-ubezpieczenia-oc-ac,
.fr-cat-jak-obnizyc-spalanie,
.fr-cat-koszty-uzytkowania,
.fr-cat-mandaty-i-punkty {
--fr-badge-accent-lock: var(--fr-badge-poradniki-lock);
}
body.category-napedy-samochodowe,
body[class*="napedy-samochodowe"],
.fr-layout-drives,
.fr-cat-napedy,
.fr-cat-napedy-samochodowe,
.fr-cat-samochody-elektryczne,
.fr-cat-plug-in-hybrid,
.fr-cat-hybrydy,
.fr-cat-ladowanie,
.fr-cat-benzyna,
.fr-cat-diesel,
.fr-cat-lpg,
.fr-cat-cng,
.fr-cat-wodor,
.fr-cat-e-fuels,
.fr-cat-infrastruktura {
--fr-badge-accent-lock: var(--fr-badge-napedy-lock);
}
body.category-rynek-motoryzacyjny,
body[class*="rynek-motoryzacyjny"],
.fr-layout-market,
.fr-cat-rynek,
.fr-cat-rynek-motoryzacyjny,
.fr-cat-promocje,
.fr-cat-rabaty,
.fr-cat-wyprzedaze-rocznika,
.fr-cat-finansowanie,
.fr-cat-ceny,
.fr-cat-import,
.fr-cat-trendy,
.fr-cat-wartosc-rezydualna,
.fr-cat-porownaj-leasing,
.fr-cat-dealerzy,
.fr-cat-konfiguratory,
.fr-cat-kalkulatory {
--fr-badge-accent-lock: var(--fr-badge-rynek-lock);
}
body.category-chinskie-marki-samochodow,
body[class*="chinskie-marki-samochodow"],
.fr-layout-chinese,
.fr-cat-chinskie,
.fr-cat-chinskie-marki,
.fr-cat-chinskie-marki-samochodow,
.fr-cat-byd,
.fr-cat-mg,
.fr-cat-omoda,
.fr-cat-jaecoo,
.fr-cat-omoda-jaecoo,
.fr-cat-nio,
.fr-cat-xpeng,
.fr-cat-ceny-chinskie,
.fr-cat-dostepnosc,
.fr-cat-opinie,
.fr-cat-serwis,
.fr-cat-vs-toyota,
.fr-cat-vs-hyundai,
.fr-cat-vs-tesla,
.fr-cat-czy-warto-kupic,
.fr-cat-chery,
.fr-cat-gwm,
.fr-cat-geely {
--fr-badge-accent-lock: var(--fr-badge-chinskie-lock);
}
/* Kolor akcentu po linku/href, gdy plakietka prowadzi do kategorii */
a[href*="aktualnosci-motoryzacyjne"] { --fr-badge-accent-lock: var(--fr-badge-aktualnosci-lock); }
a[href*="testy-samochodow"] { --fr-badge-accent-lock: var(--fr-badge-testy-lock); }
a[href*="rankingi-samochodow"] { --fr-badge-accent-lock: var(--fr-badge-rankingi-lock); }
a[href*="poradniki-motoryzacyjne"] { --fr-badge-accent-lock: var(--fr-badge-poradniki-lock); }
a[href*="napedy-samochodowe"] { --fr-badge-accent-lock: var(--fr-badge-napedy-lock); }
a[href*="rynek-motoryzacyjny"] { --fr-badge-accent-lock: var(--fr-badge-rynek-lock); }
a[href*="chinskie-marki-samochodow"] { --fr-badge-accent-lock: var(--fr-badge-chinskie-lock); }
/* Globalne przejęcie wszystkich typów plakietek/kickerów używanych w layoutach. */
.fr-badge,
a.fr-badge,
span.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-post-cat,
.fr-entry-cat,
.fr-entry-category,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-single-category,
.fr-day-label,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-related-label,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-archive-label,
.fr-static-badge,
.fr-static-kicker,
.fr-page-kicker,
.fr-page-label,
.fr-mobile-recommended-card-label,
.fr-rankings-fresh-badge,
.fr-rankings-fresh-main-badge,
.fr-rankings-fresh-side-badge,
.fr-today-label,
.fr-hotbar-label,
.fr-trending-label,
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-cat,
body.fr-home-active .fr-homepage .fr-cat-badge,
body.fr-home-active .fr-homepage .fr-category-badge,
body.fr-home-active .fr-homepage span[class*="fr-cat-"],
body.fr-home-active .fr-homepage a[class*="fr-cat-"],
body.single-post .fr-article-kicker,
body.single-post .fr-single-kicker,
body.single-post .fr-single-category,
body.single-post .fr-sidebar-category,
body.single-post .fr-sidebar-cat,
body.single-post .fr-related-cat,
body.archive .fr-badge,
body.archive .fr-card-cat,
body.archive .fr-archive-badge,
body.archive .fr-archive-eyebrow,
body.category .fr-badge,
body.category .fr-card-cat,
body.category .fr-archive-badge,
body.category .fr-archive-eyebrow,
body.tag .fr-badge,
body.tag .fr-card-cat,
body.tag .fr-archive-badge,
body.tag .fr-archive-eyebrow {
--badge-bg: var(--fr-badge-bg-lock) !important;
--badge-fg: var(--fr-badge-text-lock) !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: fit-content !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 21px !important;
height: auto !important;
margin: 0 0 6px !important;
padding: 4px 8px 4px 9px !important;
box-sizing: border-box !important;
border: 1px solid var(--fr-badge-border-lock) !important;
border-left: 3px solid var(--fr-badge-accent-lock, #E12626) !important;
border-radius: 0 !important;
outline: 0 !important;
background: var(--fr-badge-bg-lock) !important;
background-color: var(--fr-badge-bg-lock) !important;
background-image: none !important;
color: var(--fr-badge-text-lock) !important;
box-shadow: none !important;
text-shadow: none !important;
transform: none !important;
overflow: hidden !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
font-weight: 760 !important;
line-height: 1.05 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
text-decoration: none !important;
}
/* Pełna blokada pseudo-elementów: pasek robi wyłącznie border-left, bez ::before/::after. */
.fr-badge::before,
.fr-badge::after,
a.fr-badge::before,
a.fr-badge::after,
span.fr-badge::before,
span.fr-badge::after,
.fr-card-cat::before,
.fr-card-cat::after,
.fr-cat-badge::before,
.fr-cat-badge::after,
.fr-category-badge::before,
.fr-category-badge::after,
.fr-post-cat::before,
.fr-post-cat::after,
.fr-entry-cat::before,
.fr-entry-cat::after,
.fr-entry-category::before,
.fr-entry-category::after,
.fr-article-kicker::before,
.fr-article-kicker::after,
.fr-article-category::before,
.fr-article-category::after,
.fr-single-kicker::before,
.fr-single-kicker::after,
.fr-single-category::before,
.fr-single-category::after,
.fr-day-label::before,
.fr-day-label::after,
.fr-sidebar-kicker::before,
.fr-sidebar-kicker::after,
.fr-sidebar-cat::before,
.fr-sidebar-cat::after,
.fr-sidebar-category::before,
.fr-sidebar-category::after,
.fr-related-cat::before,
.fr-related-cat::after,
.fr-related-label::before,
.fr-related-label::after,
.fr-article-related-kicker::before,
.fr-article-related-kicker::after,
.fr-archive-badge::before,
.fr-archive-badge::after,
.fr-archive-eyebrow::before,
.fr-archive-eyebrow::after,
.fr-archive-label::before,
.fr-archive-label::after,
.fr-static-badge::before,
.fr-static-badge::after,
.fr-static-kicker::before,
.fr-static-kicker::after,
.fr-page-kicker::before,
.fr-page-kicker::after,
.fr-page-label::before,
.fr-page-label::after,
.fr-mobile-recommended-card-label::before,
.fr-mobile-recommended-card-label::after,
.fr-rankings-fresh-badge::before,
.fr-rankings-fresh-badge::after,
.fr-rankings-fresh-main-badge::before,
.fr-rankings-fresh-main-badge::after,
.fr-rankings-fresh-side-badge::before,
.fr-rankings-fresh-side-badge::after,
.fr-today-label::before,
.fr-today-label::after,
.fr-hotbar-label::before,
.fr-hotbar-label::after,
.fr-trending-label::before,
.fr-trending-label::after,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::before,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]::after,
body.fr-home-active .fr-homepage a[class*="fr-cat-"]::before,
body.fr-home-active .fr-homepage a[class*="fr-cat-"]::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* Hover/focus nie może przywracać czarnego tła ani szerokiego znacznika. */
.fr-badge:hover,
a.fr-badge:hover,
.fr-card-cat:hover,
.fr-cat-badge:hover,
.fr-category-badge:hover,
.fr-post-cat:hover,
.fr-entry-cat:hover,
.fr-entry-category:hover,
.fr-article-kicker:hover,
.fr-article-category:hover,
.fr-single-kicker:hover,
.fr-single-category:hover,
.fr-day-label:hover,
.fr-sidebar-kicker:hover,
.fr-sidebar-cat:hover,
.fr-sidebar-category:hover,
.fr-related-cat:hover,
.fr-related-label:hover,
.fr-article-related-kicker:hover,
.fr-archive-badge:hover,
.fr-archive-eyebrow:hover,
.fr-archive-label:hover,
.fr-static-badge:hover,
.fr-static-kicker:hover,
.fr-page-kicker:hover,
.fr-page-label:hover,
.fr-mobile-recommended-card-label:hover,
.fr-rankings-fresh-badge:hover,
.fr-rankings-fresh-main-badge:hover,
.fr-rankings-fresh-side-badge:hover,
.fr-today-label:hover,
.fr-hotbar-label:hover,
.fr-trending-label:hover,
body.fr-home-active .fr-homepage span[class*="fr-cat-"]:hover,
body.fr-home-active .fr-homepage a[class*="fr-cat-"]:hover {
--badge-bg: var(--fr-badge-bg-lock) !important;
--badge-fg: var(--fr-badge-text-lock) !important;
border-left-color: var(--fr-badge-accent-lock, #E12626) !important;
background: var(--fr-badge-bg-lock) !important;
background-color: var(--fr-badge-bg-lock) !important;
background-image: none !important;
color: var(--fr-badge-text-lock) !important;
box-shadow: none !important;
text-decoration: none !important;
}
/* W ciasnych kartach homepage/sidebar plakietka ma zachować prostokąt i równy pasek. */
.fr-homepage .fr-card-copy .fr-badge,
.fr-homepage .fr-news-copy .fr-badge,
.fr-homepage .fr-feature-card .fr-badge,
.fr-homepage .fr-latest-grid .fr-badge,
.fr-homepage .fr-evergreen-grid .fr-badge,
.fr-sidebar .fr-badge,
.fr-article-sidebar .fr-badge,
.fr-single-sidebar .fr-badge {
margin-bottom: 5px !important;
border-left-width: 3px !important;
padding-left: 9px !important;
}
@media (max-width: 768px) {
.fr-badge,
a.fr-badge,
span.fr-badge,
.fr-card-cat,
.fr-cat-badge,
.fr-category-badge,
.fr-post-cat,
.fr-entry-cat,
.fr-entry-category,
.fr-article-kicker,
.fr-article-category,
.fr-single-kicker,
.fr-single-category,
.fr-day-label,
.fr-sidebar-kicker,
.fr-sidebar-cat,
.fr-sidebar-category,
.fr-related-cat,
.fr-related-label,
.fr-article-related-kicker,
.fr-archive-badge,
.fr-archive-eyebrow,
.fr-archive-label,
.fr-static-badge,
.fr-static-kicker,
.fr-page-kicker,
.fr-page-label,
.fr-mobile-recommended-card-label,
.fr-rankings-fresh-badge,
.fr-rankings-fresh-main-badge,
.fr-rankings-fresh-side-badge,
.fr-today-label,
.fr-hotbar-label,
.fr-trending-label,
body.fr-home-active .fr-homepage span[class*="fr-cat-"],
body.fr-home-active .fr-homepage a[class*="fr-cat-"] {
min-height: 20px !important;
padding: 4px 7px 4px 8px !important;
border-left-width: 3px !important;
font-size: 9.5px !important;
line-height: 1.05 !important;
letter-spacing: .03em !important;
}
}
/* =========================================================
4RINGS — BADGES REAL CLASSES FINAL LOCK
Cel: jasnoszare prostokątne plakietki + jeden cienki pasek
po lewej stronie w kolorze właściwej kategorii.
Ważne: wyłączamy wcześniejsze pseudo-elementy i czarne tła.
========================================================= */
:root {
--fr-color-aktualnosci: #E12626;
--fr-color-testy: #1565C0;
--fr-color-rankingi: #1E8E3E;
--fr-color-poradniki: #5B3CC4;
--fr-color-napedy: #FFC400;
--fr-color-rynek: #F57C00;
--fr-color-chinskie: #8B1E3F;
--fr-badge-bg-final: #f4f4f4;
--fr-badge-border-final: #dedede;
--fr-badge-text-final: #111111;
--fr-badge-accent-default: #E12626;
}
/* Kolory po klasach przypisywanych przez PHP */
.fr-cat-aktualnosci,
.fr-cat-aktualnosci-motoryzacyjne { --fr-badge-accent-final: var(--fr-color-aktualnosci); }
.fr-cat-testy,
.fr-cat-testy-samochodow { --fr-badge-accent-final: var(--fr-color-testy); }
.fr-cat-rankingi,
.fr-cat-rankingi-samochodow,
.fr-rankings-fresh-badge { --fr-badge-accent-final: var(--fr-color-rankingi); }
.fr-cat-poradniki,
.fr-cat-poradniki-motoryzacyjne { --fr-badge-accent-final: var(--fr-color-poradniki); }
.fr-cat-napedy,
.fr-cat-napedy-samochodowe { --fr-badge-accent-final: var(--fr-color-napedy); }
.fr-cat-rynek,
.fr-cat-rynek-motoryzacyjny { --fr-badge-accent-final: var(--fr-color-rynek); }
.fr-cat-chinskie,
.fr-cat-chinskie-marki,
.fr-cat-chinskie-marki-samochodow { --fr-badge-accent-final: var(--fr-color-chinskie); }
/* Kolory dla stron archiwów po klasie body */
body.category-aktualnosci-motoryzacyjne { --fr-archive-accent-final: var(--fr-color-aktualnosci); }
body.category-testy-samochodow { --fr-archive-accent-final: var(--fr-color-testy); }
body.category-rankingi-samochodow { --fr-archive-accent-final: var(--fr-color-rankingi); }
body.category-poradniki-motoryzacyjne { --fr-archive-accent-final: var(--fr-color-poradniki); }
body.category-napedy-samochodowe { --fr-archive-accent-final: var(--fr-color-napedy); }
body.category-rynek-motoryzacyjny { --fr-archive-accent-final: var(--fr-color-rynek); }
body.category-chinskie-marki-samochodow { --fr-archive-accent-final: var(--fr-color-chinskie); }
/* Główna forma plakietki — prostokąt, bez wystających elementów. */
.fr-badge,
.fr-rankings-fresh-badge,
.fr-sidebar-kicker,
.fr-archive-eyebrow,
.fr-card-cat,
.fr-card-kicker,
.fr-post-cat,
.fr-post-kicker,
.fr-hero-badge,
.fr-related-cat,
.fr-related-kicker,
.fr-day-label,
.fr-cat-label,
.fr-kicker,
.fr-single-kicker,
.fr-article-kicker,
.fr-section-kicker,
.entry-meta .cat-links a,
.cat-links a {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
min-height: 22px !important;
box-sizing: border-box !important;
margin: 0 0 6px 0 !important;
padding: 4px 8px 4px 10px !important;
border-radius: 0 !important;
border: 1px solid var(--fr-badge-border-final) !important;
border-left: 3px solid var(--fr-badge-accent-final, var(--fr-archive-accent-final, var(--fr-badge-accent-default))) !important;
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
background-image: none !important;
color: var(--fr-badge-text-final) !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1.1 !important;
font-weight: 760 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: none !important;
text-shadow: none !important;
overflow: hidden !important;
vertical-align: top !important;
}
/* Wyłączamy stare szerokie paski / pseudo-elementy przy plakietkach. */
.fr-badge::before,
.fr-badge::after,
.fr-rankings-fresh-badge::before,
.fr-rankings-fresh-badge::after,
.fr-sidebar-kicker::before,
.fr-sidebar-kicker::after,
.fr-archive-eyebrow::before,
.fr-archive-eyebrow::after,
.fr-card-cat::before,
.fr-card-cat::after,
.fr-card-kicker::before,
.fr-card-kicker::after,
.fr-post-cat::before,
.fr-post-cat::after,
.fr-post-kicker::before,
.fr-post-kicker::after,
.fr-hero-badge::before,
.fr-hero-badge::after,
.fr-related-cat::before,
.fr-related-cat::after,
.fr-related-kicker::before,
.fr-related-kicker::after,
.fr-day-label::before,
.fr-day-label::after,
.fr-cat-label::before,
.fr-cat-label::after,
.fr-kicker::before,
.fr-kicker::after,
.fr-single-kicker::before,
.fr-single-kicker::after,
.fr-article-kicker::before,
.fr-article-kicker::after,
.fr-section-kicker::before,
.fr-section-kicker::after,
.entry-meta .cat-links a::before,
.entry-meta .cat-links a::after,
.cat-links a::before,
.cat-links a::after {
content: none !important;
display: none !important;
}
/* Nadpisanie miejsc, gdzie starsze style wymuszały czarne lub kolorowe tło. */
.fr-hero-card .fr-badge,
.fr-hero-copy .fr-badge,
.fr-latest .fr-badge,
.fr-latest-card .fr-badge,
.fr-section .fr-badge,
.fr-card .fr-badge,
.fr-card-list .fr-badge,
.fr-grid .fr-badge,
.fr-chinese .fr-badge,
.fr-worth .fr-badge,
.fr-tests .fr-badge,
.fr-drives .fr-badge,
.fr-rankings .fr-badge,
.fr-guides .fr-badge,
.fr-market .fr-badge,
.fr-single-header .fr-badge,
.fr-article-header .fr-badge,
.fr-single-meta .fr-badge,
.fr-sidebar .fr-badge,
.fr-sidebar .fr-sidebar-kicker,
.fr-sidebar-card .fr-badge,
.fr-sidebar-card .fr-sidebar-kicker,
.fr-related .fr-badge,
.fr-related-card .fr-badge,
.fr-archive-grid .fr-badge,
.fr-archive-card .fr-badge,
.fr-archive-post .fr-badge,
body.archive .fr-badge,
body.category .fr-badge,
body.tag .fr-badge {
border-radius: 0 !important;
border: 1px solid var(--fr-badge-border-final) !important;
border-left: 3px solid var(--fr-badge-accent-final, var(--fr-archive-accent-final, var(--fr-badge-accent-default))) !important;
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
background-image: none !important;
color: var(--fr-badge-text-final) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* Archiwum w nagłówku kategorii ma brać kolor z body danej kategorii. */
body.archive .fr-archive-eyebrow,
body.category .fr-archive-eyebrow,
body.tag .fr-archive-eyebrow {
border-left-color: var(--fr-archive-accent-final, var(--fr-badge-accent-default)) !important;
}
/* Napędy: żółty pasek, ale tekst zawsze czytelny. */
.fr-cat-napedy,
.fr-cat-napedy-samochodowe {
color: #111111 !important;
}
/* Hover nie może przywracać czarnego tła. */
a:hover .fr-badge,
a:focus .fr-badge,
.fr-badge:hover,
.fr-sidebar-kicker:hover,
.fr-rankings-fresh-badge:hover,
.fr-archive-eyebrow:hover,
.fr-card-cat:hover,
.fr-post-cat:hover,
.fr-related-cat:hover,
.cat-links a:hover {
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
color: var(--fr-badge-text-final) !important;
}
/* =========================================================
4RINGS - BADGES FINAL LOCK
Wz-r: jasna prostok-tna plakietka + cienki pionowy pasek.
========================================================= */
:root {
--fr-badge-bg-final: #f4f5f6;
--fr-badge-border-final: #dfe3e7;
--fr-badge-text-final: #1f2328;
--fr-cat-aktualnosci: #E12626;
--fr-cat-testy: #1565C0;
--fr-cat-rankingi: #1E8E3E;
--fr-cat-poradniki: #5B3CC4;
--fr-cat-napedy: #FFC400;
--fr-cat-rynek: #F57C00;
--fr-cat-chinskie: #8B1E3F;
--fr-cat-tag: #9AA0A6;
}
/* Wszystkie typy plakietek */
body .fr-badge,
body .fr-article-kicker,
body .fr-sidebar-kicker,
body .fr-archive-badge,
body .fr-archive-eyebrow,
body .fr-rankings-fresh-badge,
body .fr-card-cat,
body .fr-kicker,
body .fr-cat-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
height: auto !important;
min-height: 20px !important;
margin: 0 !important;
padding: 3px 8px 3px 8px !important;
background: var(--fr-badge-bg-final) !important;
background-color: var(--fr-badge-bg-final) !important;
background-image: none !important;
color: var(--fr-badge-text-final) !important;
border-top: 1px solid var(--fr-badge-border-final) !important;
border-right: 1px solid var(--fr-badge-border-final) !important;
border-bottom: 1px solid var(--fr-badge-border-final) !important;
border-left: 3px solid var(--fr-cat-tag) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
outline: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
vertical-align: top !important;
box-sizing: border-box !important;
}
/* Kasujemy stare pseudo-elementy, kt-re robi-y krzywe/pogrubione paski */
body .fr-badge::before,
body .fr-badge::after,
body .fr-article-kicker::before,
body .fr-article-kicker::after,
body .fr-sidebar-kicker::before,
body .fr-sidebar-kicker::after,
body .fr-archive-badge::before,
body .fr-archive-badge::after,
body .fr-archive-eyebrow::before,
body .fr-archive-eyebrow::after,
body .fr-rankings-fresh-badge::before,
body .fr-rankings-fresh-badge::after,
body .fr-card-cat::before,
body .fr-card-cat::after,
body .fr-kicker::before,
body .fr-kicker::after,
body .fr-cat-label::before,
body .fr-cat-label::after {
content: none !important;
display: none !important;
}
/* Kolory po klasach kategorii */
body .fr-cat-aktualnosci,
body .category-aktualnosci-motoryzacyjne .fr-badge,
body .category-aktualnosci-motoryzacyjne .fr-archive-badge {
border-left-color: var(--fr-cat-aktualnosci) !important;
}
body .fr-cat-testy,
body .category-testy-samochodow .fr-badge,
body .category-testy-samochodow .fr-archive-badge {
border-left-color: var(--fr-cat-testy) !important;
}
body .fr-cat-rankingi,
body .fr-rankings-fresh-badge,
body .category-rankingi-samochodow .fr-badge,
body .category-rankingi-samochodow .fr-archive-badge,
body .category-auta-do-30-tys .fr-archive-badge,
body .category-auta-do-50-tys .fr-archive-badge,
body .category-auta-do-100-tys .fr-archive-badge,
body .category-auta-powyzej-150-tys .fr-archive-badge {
border-left-color: var(--fr-cat-rankingi) !important;
}
body .fr-cat-poradniki,
body .category-poradniki-motoryzacyjne .fr-badge,
body .category-poradniki-motoryzacyjne .fr-archive-badge {
border-left-color: var(--fr-cat-poradniki) !important;
}
body .fr-cat-napedy,
body .category-napedy-samochodowe .fr-badge,
body .category-napedy-samochodowe .fr-archive-badge,
body .category-samochody-elektryczne .fr-archive-badge,
body .category-plug-in-hybrid .fr-archive-badge,
body .category-hybrydy-samochodowe .fr-archive-badge {
border-left-color: var(--fr-cat-napedy) !important;
}
body .fr-cat-rynek,
body .category-rynek-motoryzacyjny .fr-badge,
body .category-rynek-motoryzacyjny .fr-archive-badge {
border-left-color: var(--fr-cat-rynek) !important;
}
body .fr-cat-chinskie,
body .fr-cat-chinskie-marki,
body .category-chinskie-marki-samochodow .fr-badge,
body .category-chinskie-marki-samochodow .fr-archive-badge,
body .category-byd-samochody .fr-archive-badge,
body .category-mg-samochody .fr-archive-badge,
body .category-omoda-jaecoo .fr-archive-badge,
body .category-nio-xpeng .fr-archive-badge {
border-left-color: var(--fr-cat-chinskie) !important;
}
/* Strony tag-w - neutralny szary wyznacznik */
body.tag .fr-archive-eyebrow,
body.tag .fr-archive-badge {
border-left-color: var(--fr-cat-tag) !important;
}
/* Nag--wki archiw-w - kolor boxu po stronie kategorii */
body.category-aktualnosci-motoryzacyjne .fr-archive-eyebrow {
border-left-color: var(--fr-cat-aktualnosci) !important;
}
body.category-testy-samochodow .fr-archive-eyebrow {
border-left-color: var(--fr-cat-testy) !important;
}
body.category-rankingi-samochodow .fr-archive-eyebrow {
border-left-color: var(--fr-cat-rankingi) !important;
}
body.category-poradniki-motoryzacyjne .fr-archive-eyebrow {
border-left-color: var(--fr-cat-poradniki) !important;
}
body.category-napedy-samochodowe .fr-archive-eyebrow {
border-left-color: var(--fr-cat-napedy) !important;
}
body.category-rynek-motoryzacyjny .fr-archive-eyebrow {
border-left-color: var(--fr-cat-rynek) !important;
}
body.category-chinskie-marki-samochodow .fr-archive-eyebrow {
border-left-color: var(--fr-cat-chinskie) !important;
}
/* =========================================================
4RINGS — BADGES FINAL HARD LOCK V6
Cel: szara prostokątna plakietka + jeden równy pasek 3px po lewej.
Ten blok musi być na końcu pliku i przebija stare background:#1A1A1A!important.
========================================================= */
:root {
--fr-badge-final-bg-v6: #f4f5f6;
--fr-badge-final-border-v6: #dfe3e7;
--fr-badge-final-text-v6: #1f2328;
--fr-badge-final-tag-v6: #9aa0a6;
--fr-cat-aktualnosci-v6: #E12626;
--fr-cat-testy-v6: #1565C0;
--fr-cat-rankingi-v6: #1E8E3E;
--fr-cat-poradniki-v6: #5B3CC4;
--fr-cat-napedy-v6: #FFC400;
--fr-cat-rynek-v6: #F57C00;
--fr-cat-chinskie-v6: #8B1E3F;
}
/* Fallbacki akcentów po realnych klasach */
html body .fr-cat-aktualnosci { --fr-badge-accent: var(--fr-cat-aktualnosci-v6) !important; }
html body .fr-cat-testy { --fr-badge-accent: var(--fr-cat-testy-v6) !important; }
html body .fr-cat-rankingi,
html body .fr-rankings-fresh-badge,
html body .fr-rankings-fresh-main-badge,
html body .fr-rankings-fresh-side-badge { --fr-badge-accent: var(--fr-cat-rankingi-v6) !important; }
html body .fr-cat-poradniki { --fr-badge-accent: var(--fr-cat-poradniki-v6) !important; }
html body .fr-cat-napedy { --fr-badge-accent: var(--fr-cat-napedy-v6) !important; }
html body .fr-cat-rynek { --fr-badge-accent: var(--fr-cat-rynek-v6) !important; }
html body .fr-cat-chinskie,
html body .fr-cat-chinskie-marki { --fr-badge-accent: var(--fr-cat-chinskie-v6) !important; }
/* HOME — najmocniejsze przejęcie czarnych plakietek z homepage.css */
html body .fr-homepage span.fr-badge.fr-badge[class*="fr-cat-"],
html body .fr-homepage a.fr-badge.fr-badge[class*="fr-cat-"],
html body .fr-homepage div.fr-badge.fr-badge[class*="fr-cat-"],
html body .fr-homepage .fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-home-active .fr-homepage span.fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-home-active .fr-homepage a.fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-home-active .fr-homepage div.fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-home-active .fr-homepage .fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-home-active .fr-homepage .fr-hero .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-hero-copy .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-latest-grid .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-news-copy .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-card-copy .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage article .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-section .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-layout-latest .fr-badge.fr-badge,
html body.fr-home-active .fr-homepage .fr-rankings-fresh-badge.fr-rankings-fresh-badge,
html body .fr-homepage .fr-rankings-fresh-badge.fr-rankings-fresh-badge {
--badge-bg: var(--fr-badge-final-bg-v6) !important;
--badge-fg: var(--fr-badge-final-text-v6) !important;
position: relative !important;
isolation: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
height: auto !important;
min-height: 22px !important;
margin: 0 0 6px 0 !important;
padding: 4px 8px 4px 8px !important;
box-sizing: border-box !important;
background: var(--fr-badge-final-bg-v6) !important;
background-color: var(--fr-badge-final-bg-v6) !important;
background-image: none !important;
color: var(--fr-badge-final-text-v6) !important;
border-top: 1px solid var(--fr-badge-final-border-v6) !important;
border-right: 1px solid var(--fr-badge-final-border-v6) !important;
border-bottom: 1px solid var(--fr-badge-final-border-v6) !important;
border-left: 3px solid var(--fr-badge-accent, var(--fr-badge-final-tag-v6)) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
outline: none !important;
overflow: hidden !important;
filter: none !important;
opacity: 1 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
vertical-align: top !important;
}
/* SINGLE/SIDEBAR — przejęcie głównej plakietki nad H1 oraz modułów bocznych */
html body.single-post div.fr-article-kicker.fr-article-kicker[class*="fr-cat-"],
html body.single-post span.fr-article-kicker.fr-article-kicker[class*="fr-cat-"],
html body.single-post .fr-article-kicker.fr-article-kicker[class*="fr-cat-"],
html body.fr-single-template .fr-article-kicker.fr-article-kicker[class*="fr-cat-"],
html body.single-post span.fr-sidebar-kicker.fr-sidebar-kicker[class*="fr-cat-"],
html body.single-post .fr-sidebar-kicker.fr-sidebar-kicker[class*="fr-cat-"],
html body.fr-single-template .fr-sidebar-kicker.fr-sidebar-kicker[class*="fr-cat-"],
html body.single-post .fr-badge.fr-badge[class*="fr-cat-"],
html body.fr-single-template .fr-badge.fr-badge[class*="fr-cat-"] {
--badge-bg: var(--fr-badge-final-bg-v6) !important;
--badge-fg: var(--fr-badge-final-text-v6) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
min-width: 0 !important;
height: auto !important;
min-height: 22px !important;
margin: 0 0 6px 0 !important;
padding: 4px 8px 4px 8px !important;
box-sizing: border-box !important;
background: var(--fr-badge-final-bg-v6) !important;
background-color: var(--fr-badge-final-bg-v6) !important;
background-image: none !important;
color: var(--fr-badge-final-text-v6) !important;
border-top: 1px solid var(--fr-badge-final-border-v6) !important;
border-right: 1px solid var(--fr-badge-final-border-v6) !important;
border-bottom: 1px solid var(--fr-badge-final-border-v6) !important;
border-left: 3px solid var(--fr-badge-accent, var(--fr-badge-final-tag-v6)) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
outline: none !important;
overflow: hidden !important;
filter: none !important;
opacity: 1 !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* ARCHIVE/TAG — ten sam kształt; tagi mają szary pasek w nagłówku */
html body.archive .fr-archive-badge.fr-archive-badge,
html body.archive .fr-archive-eyebrow.fr-archive-eyebrow,
html body.category .fr-archive-badge.fr-archive-badge,
html body.category .fr-archive-eyebrow.fr-archive-eyebrow,
html body.tag .fr-archive-badge.fr-archive-badge,
html body.tag .fr-archive-eyebrow.fr-archive-eyebrow {
--badge-bg: var(--fr-badge-final-bg-v6) !important;
--badge-fg: var(--fr-badge-final-text-v6) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
max-width: max-content !important;
min-height: 22px !important;
margin: 0 0 6px 0 !important;
padding: 4px 8px !important;
background: var(--fr-badge-final-bg-v6) !important;
background-color: var(--fr-badge-final-bg-v6) !important;
background-image: none !important;
color: var(--fr-badge-final-text-v6) !important;
border-top: 1px solid var(--fr-badge-final-border-v6) !important;
border-right: 1px solid var(--fr-badge-final-border-v6) !important;
border-bottom: 1px solid var(--fr-badge-final-border-v6) !important;
border-left: 3px solid var(--fr-badge-accent, var(--fr-badge-final-tag-v6)) !important;
border-radius: 0 !important;
box-shadow: none !important;
text-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 10px !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
}
/* Paski tylko jako border-left — zero pseudo-elementów */
html body .fr-homepage .fr-badge::before,
html body .fr-homepage .fr-badge::after,
html body.single-post .fr-article-kicker::before,
html body.single-post .fr-article-kicker::after,
html body.single-post .fr-sidebar-kicker::before,
html body.single-post .fr-sidebar-kicker::after,
html body.single-post .fr-badge::before,
html body.single-post .fr-badge::after,
html body.archive .fr-archive-badge::before,
html body.archive .fr-archive-badge::after,
html body.archive .fr-archive-eyebrow::before,
html body.archive .fr-archive-eyebrow::after,
html body .fr-rankings-fresh-badge::before,
html body .fr-rankings-fresh-badge::after {
content: none !important;
display: none !important;
}
/* Kolor wymuszony po klasie na sam koniec */
html body .fr-cat-aktualnosci { border-left-color: var(--fr-cat-aktualnosci-v6) !important; }
html body .fr-cat-testy { border-left-color: var(--fr-cat-testy-v6) !important; }
html body .fr-cat-rankingi,
html body .fr-rankings-fresh-badge { border-left-color: var(--fr-cat-rankingi-v6) !important; }
html body .fr-cat-poradniki { border-left-color: var(--fr-cat-poradniki-v6) !important; }
html body .fr-cat-napedy { border-left-color: var(--fr-cat-napedy-v6) !important; }
html body .fr-cat-rynek { border-left-color: var(--fr-cat-rynek-v6) !important; }
html body .fr-cat-chinskie,
html body .fr-cat-chinskie-marki { border-left-color: var(--fr-cat-chinskie-v6) !important; }
html body.tag .fr-archive-eyebrow { border-left-color: var(--fr-badge-final-tag-v6) !important; }
/* Hover/focus nie przywraca czerni */
html body .fr-homepage a:hover .fr-badge,
html body .fr-homepage .fr-badge:hover,
html body.single-post a:hover .fr-badge,
html body.single-post .fr-article-kicker:hover,
html body.single-post .fr-sidebar-kicker:hover,
html body.archive a:hover .fr-archive-badge,
html body.archive .fr-archive-eyebrow:hover {
background: var(--fr-badge-final-bg-v6) !important;
background-color: var(--fr-badge-final-bg-v6) !important;
color: var(--fr-badge-final-text-v6) !important;
box-shadow: none !important;
filter: none !important;
}
/* =========================================================
4RINGS — HOMEPAGE CLICKABLE CATEGORY BADGES
Zakres: homepage only.
Cel: plakietki kategorii są linkami do głównych kategorii,
bez zagnieżdżania linku w linku w HERO.
========================================================= */
.fr-homepage .fr-badge-link,
.fr-homepage a.fr-badge,
.fr-homepage a.fr-rankings-fresh-badge {
cursor: pointer !important;
text-decoration: none !important;
}
.fr-homepage .fr-badge-link:hover,
.fr-homepage a.fr-badge:hover,
.fr-homepage a.fr-rankings-fresh-badge:hover,
.fr-homepage .fr-badge-link:focus-visible,
.fr-homepage a.fr-badge:focus-visible,
.fr-homepage a.fr-rankings-fresh-badge:focus-visible {
background: #f4f5f6 !important;
color: #1f2328 !important;
text-decoration: none !important;
filter: brightness(.97);
}
.fr-homepage .fr-badge-link:focus-visible,
.fr-homepage a.fr-badge:focus-visible,
.fr-homepage a.fr-rankings-fresh-badge:focus-visible {
outline: 2px solid var(--fr-badge-accent, #E12626) !important;
outline-offset: 2px !important;
}
/* HERO po rozdzieleniu linku zdjęcia, plakietki i tytułu */
.fr-homepage .fr-hero-card {
position: relative;
}
.fr-homepage .fr-hero-copy {
pointer-events: none;
}
.fr-homepage .fr-hero-copy .fr-badge,
.fr-homepage .fr-hero-copy .fr-badge-link,
.fr-homepage .fr-hero-copy .fr-hero-title-link,
.fr-homepage .fr-hero-copy .fr-meta {
pointer-events: auto;
}
.fr-homepage .fr-hero-title-link {
display: block;
color: inherit;
text-decoration: none;
}
.fr-homepage .fr-hero-title-link:hover,
.fr-homepage .fr-hero-title-link:focus-visible {
color: inherit;
text-decoration: none;
}
.fr-homepage .fr-hero-title-link:focus-visible {
outline: 2px solid rgba(255, 255, 255, .85);
outline-offset: 3px;
}
/* =========================================================
4RINGS — HOMEPAGE MOBILE MENU COMPACT OVERRIDE FINAL
Cel: mobile mega menu na stronie głównej ma wyglądać identycznie
jak w artykule po ostatniej poprawce header.css/header.js.
Zakres: tylko mobile drawer na homepage. Nie rusza sekcji homepage,
hero, Rankingi mobile final, single, archive ani badges.
========================================================= */
@media (max-width: 1023px) {
html body.fr-home-active .fr-mobile-modal-content,
html body.home .fr-mobile-modal-content,
html body.front-page .fr-mobile-modal-content {
width: min(86vw, 360px) !important;
max-width: 86vw !important;
height: 100dvh !important;
overflow: hidden !important;
}
html body.fr-home-active .fr-mobile-modal-header,
html body.home .fr-mobile-modal-header,
html body.front-page .fr-mobile-modal-header {
min-height: 58px !important;
height: 58px !important;
padding: 0 22px !important;
box-sizing: border-box !important;
}
html body.fr-home-active .fr-mobile-title,
html body.home .fr-mobile-title,
html body.front-page .fr-mobile-title {
font-size: 18px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
}
html body.fr-home-active .fr-mobile-modal .fr-mobile-nav,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-nav,
html body.home .fr-mobile-modal .fr-mobile-nav,
html body.home .fr-mobile-modal-content .fr-mobile-nav,
html body.front-page .fr-mobile-modal .fr-mobile-nav,
html body.front-page .fr-mobile-modal-content .fr-mobile-nav {
flex: 1 1 auto !important;
overflow-y: auto !important;
padding: 0 !important;
margin: 0 !important;
-webkit-overflow-scrolling: touch !important;
}
html body.fr-home-active .fr-mobile-menu,
html body.fr-home-active .fr-mobile-menu ul,
html body.home .fr-mobile-menu,
html body.home .fr-mobile-menu ul,
html body.front-page .fr-mobile-menu,
html body.front-page .fr-mobile-menu ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
html body.fr-home-active .fr-mobile-menu > li,
html body.fr-home-active .fr-mobile-menu > li.menu-item,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion,
html body.home .fr-mobile-menu > li,
html body.home .fr-mobile-menu > li.menu-item,
html body.home .fr-mobile-menu > li.menu-item-has-children,
html body.home .fr-mobile-menu > li.fr-has-accordion,
html body.front-page .fr-mobile-menu > li,
html body.front-page .fr-mobile-menu > li.menu-item,
html body.front-page .fr-mobile-menu > li.menu-item-has-children,
html body.front-page .fr-mobile-menu > li.fr-has-accordion {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #eeeeee !important;
background: #ffffff !important;
}
html body.fr-home-active .fr-mobile-menu > li > a,
html body.home .fr-mobile-menu > li > a,
html body.front-page .fr-mobile-menu > li > a {
min-height: 56px !important;
height: 56px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
padding: 0 64px 0 34px !important;
color: #111111 !important;
background: #ffffff !important;
text-decoration: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 760 !important;
line-height: 1.08 !important;
letter-spacing: -0.012em !important;
}
html body.fr-home-active .fr-mobile-menu > li > a::before,
html body.home .fr-mobile-menu > li > a::before,
html body.front-page .fr-mobile-menu > li > a::before {
content: "" !important;
display: block !important;
width: 4px !important;
height: 24px !important;
flex: 0 0 4px !important;
border-radius: 0 !important;
background: #E12626 !important;
}
html body.fr-home-active .fr-mobile-menu > li:nth-child(1) > a::before,
html body.home .fr-mobile-menu > li:nth-child(1) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(1) > a::before { background: #E12626 !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(2) > a::before,
html body.home .fr-mobile-menu > li:nth-child(2) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(2) > a::before { background: #1565C0 !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(3) > a::before,
html body.home .fr-mobile-menu > li:nth-child(3) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(3) > a::before { background: #1E8E3E !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(4) > a::before,
html body.home .fr-mobile-menu > li:nth-child(4) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(4) > a::before { background: #5B3CC4 !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(5) > a::before,
html body.home .fr-mobile-menu > li:nth-child(5) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(5) > a::before { background: #FFC400 !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(6) > a::before,
html body.home .fr-mobile-menu > li:nth-child(6) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(6) > a::before { background: #F57C00 !important; }
html body.fr-home-active .fr-mobile-menu > li:nth-child(7) > a::before,
html body.home .fr-mobile-menu > li:nth-child(7) > a::before,
html body.front-page .fr-mobile-menu > li:nth-child(7) > a::before { background: #8B1E3F !important; }
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button {
position: absolute !important;
top: 28px !important;
right: 18px !important;
transform: translateY(-50%) !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #111111 !important;
box-shadow: none !important;
font-size: 0 !important;
font-weight: 800 !important;
line-height: 1 !important;
cursor: pointer !important;
z-index: 30 !important;
}
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button::before {
content: "+" !important;
display: block !important;
color: #111111 !important;
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
html body.fr-home-active .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.home .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.home .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.front-page .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.front-page .fr-mobile-menu > li.is-open.fr-has-accordion > button::before {
content: "\2212" !important;
font-size: 30px !important;
color: #111111 !important;
}
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle > *,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button > *,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button > *,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle > *,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
html body.home .fr-mobile-menu > li.menu-item-has-children > button > *,
html body.home .fr-mobile-menu > li.fr-has-accordion > button > *,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle > *,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle > *,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button > *,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button > * {
display: none !important;
}
html body.fr-home-active .fr-mobile-menu li.is-open > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu li.is-open > .fr-submenu-toggle,
html body.home .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu li.is-open > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu li.is-open > .fr-mobile-submenu-toggle {
background: transparent !important;
border-color: transparent !important;
color: #111111 !important;
box-shadow: none !important;
}
html body.fr-home-active .fr-mobile-menu > li > .sub-menu,
html body.home .fr-mobile-menu > li > .sub-menu,
html body.front-page .fr-mobile-menu > li > .sub-menu {
display: none !important;
margin: 0 !important;
padding: 6px 0 8px !important;
list-style: none !important;
background: #fbfbfb !important;
border-top: 1px solid #eeeeee !important;
border-bottom: 1px solid #eeeeee !important;
}
html body.fr-home-active .fr-mobile-menu > li.is-open > .sub-menu,
html body.home .fr-mobile-menu > li.is-open > .sub-menu,
html body.front-page .fr-mobile-menu > li.is-open > .sub-menu {
display: block !important;
}
html body.fr-home-active .fr-mobile-menu > li > .sub-menu > li,
html body.home .fr-mobile-menu > li > .sub-menu > li,
html body.front-page .fr-mobile-menu > li > .sub-menu > li {
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #eeeeee !important;
}
html body.fr-home-active .fr-mobile-menu > li > .sub-menu > li:last-child,
html body.home .fr-mobile-menu > li > .sub-menu > li:last-child,
html body.front-page .fr-mobile-menu > li > .sub-menu > li:last-child {
border-bottom: 0 !important;
}
html body.fr-home-active .fr-mobile-menu > li > .sub-menu a,
html body.home .fr-mobile-menu > li > .sub-menu a,
html body.front-page .fr-mobile-menu > li > .sub-menu a {
min-height: 38px !important;
height: auto !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
padding: 9px 24px 9px 72px !important;
color: #151515 !important;
background: transparent !important;
text-decoration: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 650 !important;
line-height: 1.18 !important;
letter-spacing: -0.004em !important;
}
}
@media (max-width: 380px) {
html body.fr-home-active .fr-mobile-modal-content,
html body.home .fr-mobile-modal-content,
html body.front-page .fr-mobile-modal-content {
width: 88vw !important;
max-width: 88vw !important;
}
html body.fr-home-active .fr-mobile-menu > li > a,
html body.home .fr-mobile-menu > li > a,
html body.front-page .fr-mobile-menu > li > a {
min-height: 52px !important;
height: 52px !important;
padding-left: 28px !important;
padding-right: 58px !important;
gap: 13px !important;
font-size: 17px !important;
}
html body.fr-home-active .fr-mobile-menu > li > a::before,
html body.home .fr-mobile-menu > li > a::before,
html body.front-page .fr-mobile-menu > li > a::before {
height: 22px !important;
}
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button {
top: 26px !important;
right: 14px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
}
html body.fr-home-active .fr-mobile-menu > li > .sub-menu a,
html body.home .fr-mobile-menu > li > .sub-menu a,
html body.front-page .fr-mobile-menu > li > .sub-menu a {
min-height: 36px !important;
padding: 8px 18px 8px 56px !important;
font-size: 14px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE MOBILE MENU PLUS ALIGN FINAL LOCK
Zakres: tylko mobile drawer na stronie głównej.
Cel: wyrównać plus/minus względem tekstu kategorii jak na single.
Dodać na samym końcu homepage.css, po wszystkich override menu.
========================================================= */
@media (max-width: 1023px) {
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button {
top: 24px !important;
transform: translateY(-50%) !important;
}
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button::before {
transform: translateY(-3px) !important;
}
}
@media (max-width: 380px) {
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-menu > li.fr-has-accordion > button {
top: 23px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE MOBILE MENU PLUS/MINUS EXACT ARTICLE LOCK
Zakres: tylko mobile drawer na stronie głównej.
Cel: ustawić plus/minus w tym samym miejscu jak w menu artykułu.
NIE RUSZAĆ: single post, desktop header, mega menu, search,
homepage layout, reklamy, Rankingi mobile final, typografia.
========================================================= */
@media (max-width: 1023px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li {
position: relative !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
position: absolute !important;
top: 50% !important;
right: 18px !important;
transform: translateY(-62%) !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #111111 !important;
box-shadow: none !important;
font-size: 0 !important;
line-height: 1 !important;
z-index: 50 !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before {
content: "+" !important;
display: block !important;
color: #111111 !important;
font-size: 30px !important;
font-weight: 800 !important;
line-height: 1 !important;
transform: translateY(-5px) !important;
background: transparent !important;
box-shadow: none !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
content: "\2212" !important;
font-size: 32px !important;
font-weight: 800 !important;
transform: translateY(-6px) !important;
}
}
@media (max-width: 380px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
transform: translateY(-66%) !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE MOBILE MENU PLUS/MINUS MICRO ALIGN v2
Zakres: tylko mobile drawer na stronie głównej.
Cel: obniżyć plus/minus minimalnie względem poprzedniej wersji
i ustawić go jak w menu artykułu.
NIE RUSZAĆ: single post, desktop header, mega menu, search,
homepage layout, reklamy, Rankingi mobile final, typografia.
========================================================= */
@media (max-width: 1023px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
top: 50% !important;
transform: translateY(-50%) !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button::before {
transform: translateY(-1px) !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open.fr-has-submenu > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.menu-item-has-children > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-accordion > button::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open.fr-has-submenu > button::before {
transform: translateY(-2px) !important;
}
}
@media (max-width: 380px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.fr-has-submenu > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.menu-item-has-children > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-accordion > button,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.fr-has-submenu > button {
transform: translateY(-50%) !important;
}
}
/* =========================================================
4RINGS — MOBILE MEGA MENU FINAL LOCK 2026-06-02
Zakres:
1) HOME: plus/minus trzyma się wiersza głównej kategorii,
także po rozwinięciu podmenu.
2) SINGLE: kolorowa kreska bliżej nazwy kategorii.
Nie rusza desktopu, sekcji homepage, reklam ani układu artykułu.
========================================================= */
@media (max-width: 1023px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li {
position: relative !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
position: absolute !important;
top: 28px !important;
right: 18px !important;
transform: translateY(-50%) !important;
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #111111 !important;
box-shadow: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 1 !important;
z-index: 60 !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle span,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle span {
display: none !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before {
content: "+" !important;
display: block !important;
color: #111111 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 36px !important;
line-height: 1 !important;
font-weight: 780 !important;
transform: translateY(-1px) !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle.is-open::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle.is-open::before {
content: "\2212" !important;
transform: translateY(-2px) !important;
}
body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
gap: 12px !important;
}
}
@media (max-width: 380px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle {
top: 26px !important;
right: 14px !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > button.fr-mobile-submenu-toggle::before {
font-size: 34px !important;
}
body.single-post .fr-mobile-modal .fr-mobile-menu > li > a,
body.single-post .fr-mobile-modal-content .fr-mobile-menu > li > a,
body.fr-single-template .fr-mobile-modal .fr-mobile-menu > li > a,
body.fr-single-template .fr-mobile-modal-content .fr-mobile-menu > li > a {
gap: 12px !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE MOBILE MENU SYNC WITH SINGLE FINAL
Cel: homepage ma mieć takie same odstępy i lekkie plusy jak menu artykułu.
UWAGA: blok celowo jest PRZED „Rankingi mobile final”, aby lock Rankingów został ostatni.
========================================================= */
@media (max-width: 1023px) {
html body.home .fr-mobile-modal .fr-mobile-menu > li > a,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > a,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > a,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > a,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > a,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > a,
html body.home .fr-mobile-menu > li > a,
html body.front-page .fr-mobile-menu > li > a,
html body.fr-home-active .fr-mobile-menu > li > a {
position: relative !important;
min-height: 52px !important;
height: 52px !important;
width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 4px minmax(0, auto) !important;
column-gap: 10px !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 58px 0 34px !important;
color: #111111 !important;
background: #ffffff !important;
text-align: left !important;
text-decoration: none !important;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
font-size: 17px !important;
font-weight: 760 !important;
line-height: 1.08 !important;
letter-spacing: -0.012em !important;
transform: none !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > a::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > a::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > a::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > a::before,
html body.home .fr-mobile-menu > li > a::before,
html body.front-page .fr-mobile-menu > li > a::before,
html body.fr-home-active .fr-mobile-menu > li > a::before {
content: "" !important;
grid-column: 1 !important;
justify-self: start !important;
align-self: center !important;
position: static !important;
display: block !important;
width: 4px !important;
min-width: 4px !important;
max-width: 4px !important;
height: 22px !important;
min-height: 22px !important;
max-height: 22px !important;
flex: 0 0 4px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
transform: none !important;
inset: auto !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle {
position: absolute !important;
top: 26px !important;
right: 18px !important;
transform: translateY(-50%) !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #111111 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 0 !important;
line-height: 1 !important;
z-index: 80 !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.home .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li > .fr-mobile-submenu-toggle::before {
content: "\002B" !important;
display: block !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 24px !important;
font-weight: 500 !important;
line-height: 1 !important;
color: #111111 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: translateY(-1px) !important;
}
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-modal-content .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.home .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.home .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.front-page .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.is-open > .fr-submenu-toggle::before,
html body.fr-home-active .fr-mobile-menu > li.is-open > .fr-mobile-submenu-toggle::before {
content: "\2212" !important;
font-size: 25px !important;
font-weight: 500 !important;
transform: translateY(-1px) !important;
}
}
/* =========================================================
4RINGS — HOMEPAGE CARD TITLES FINAL 2026-06-05
Cel: czytelniejsze małe tytuły hero + spójna waga tytułów kart.
UWAGA: blok celowo przed „Rankingi mobile final lock”.
========================================================= */
@media (min-width: 769px) {
.fr-homepage .fr-hero-side .fr-hero-copy strong,
.fr-homepage .fr-hero-side .fr-hero-card .fr-hero-copy strong,
.fr-homepage .fr-side-grid .fr-hero-copy strong,
.fr-homepage .fr-side-grid .fr-hero-card .fr-hero-copy strong {
font-size: 13px !important;
line-height: 1.25 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
}
.fr-homepage .fr-news-row h3,
.fr-homepage .fr-feature-card h3,
.fr-homepage .fr-card h3,
.fr-homepage article h3,
.fr-homepage .fr-card-copy h3,
.fr-homepage .fr-news-copy h3,
.fr-homepage .fr-home-worth-reading h3,
.fr-homepage .fr-layout-latest h3,
.fr-homepage .fr-layout-chinese h3,
.fr-homepage .fr-layout-tests h3,
.fr-homepage .fr-layout-drives h3,
.fr-homepage .fr-layout-ranking h3,
.fr-homepage .fr-layout-guides h3,
.fr-homepage .fr-layout-market h3 {
font-weight: 700 !important;
}
/* =========================================================
4RINGS — HERO EDITORIAL v22 / MOTOR1-TOPGEAR STYLE
Układ: 1 główny artykuł + 3 większe boksy pod spodem.
Dodane przed finalnym lockiem Rankingów mobile — nie ruszać tego locka.
========================================================= */
body.fr-home-active .fr-homepage .fr-today-bar {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
width: 100% !important;
max-width: 100% !important;
margin: 34px 0 48px !important;
padding: clamp(18px, 2.2vw, 28px) !important;
background: #06111f !important;
color: #fff !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
display: grid !important;
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr) !important;
gap: 24px !important;
align-items: stretch !important;
margin: 0 0 24px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 {
display: block !important;
position: relative !important;
width: 100% !important;
overflow: hidden !important;
background: #111 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 390px !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 8px 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: 100% !important;
margin: 0 0 12px !important;
padding: 5px 8px !important;
border-radius: 0 !important;
border-left: 3px solid var(--fr-badge-accent, #E12626) !important;
background: #fff !important;
color: #111 !important;
font-size: 9px !important;
line-height: 1 !important;
font-weight: 760 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
box-shadow: -2px 0 10px color-mix(in srgb, var(--fr-badge-accent, #E12626) 38%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22,
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 {
display: block !important;
color: #fff !important;
text-decoration: none !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
display: -webkit-box !important;
margin: 0 !important;
padding-bottom: 3px !important;
color: #fff !important;
font-size: clamp(32px, 3.35vw, 48px) !important;
line-height: 1.08 !important;
font-weight: 820 !important;
letter-spacing: -0.028em !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-excerpt-v22 {
display: -webkit-box !important;
max-width: 620px !important;
margin: 16px 0 0 !important;
color: rgba(255, 255, 255, .78) !important;
font-size: clamp(15px, 1.35vw, 18px) !important;
line-height: 1.45 !important;
font-weight: 500 !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-meta-v22 {
display: inline-flex !important;
margin-top: 16px !important;
color: rgba(255, 255, 255, .72) !important;
font-size: 12px !important;
line-height: 1.2 !important;
font-weight: 760 !important;
letter-spacing: .045em !important;
text-transform: uppercase !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 24px !important;
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
background: #091827 !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 {
aspect-ratio: 16 / 9 !important;
flex: 0 0 auto !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 {
min-width: 0 !important;
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
align-items: flex-start !important;
padding: 12px 13px 14px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
margin-bottom: 8px !important;
padding: 4px 6px !important;
border-left-width: 3px !important;
font-size: 8px !important;
font-weight: 740 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
display: -webkit-box !important;
margin: 0 !important;
padding-bottom: 3px !important;
color: #fff !important;
font-size: clamp(16px, 1.25vw, 19px) !important;
line-height: 1.22 !important;
font-weight: 700 !important;
letter-spacing: -0.012em !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 .fr-editorial-meta-v22 {
margin-top: auto !important;
padding-top: 10px !important;
font-size: 10.5px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22:hover strong,
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22:hover strong {
color: #fff !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 4px !important;
}
@media (max-width: 1024px) and (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
grid-template-columns: 1fr !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
padding: 2px 0 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
gap: 18px !important;
}
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
margin: 24px 0 34px !important;
padding: 16px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
display: block !important;
margin-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
padding: 16px 0 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
font-size: 27px !important;
line-height: 1.06 !important;
-webkit-line-clamp: 3 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-excerpt-v22 {
font-size: 15px !important;
-webkit-line-clamp: 2 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
display: none !important;
}
}
/* =========================================================
4RINGS — HERO EDITORIAL v24 POLISH FINAL TUNE
Zakres: hero Motor1/Top Gear, plakietki, tytuły, kadrowanie,
oraz ograniczenie ciemnego tła sekcji Chińskie marki do kontenera.
Dodane przed finalnym lockiem Rankingów mobile.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
padding: 24px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
grid-template-columns: minmax(0, 2.05fr) minmax(260px, 1fr) !important;
gap: 24px !important;
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 392px !important;
aspect-ratio: 16 / 9 !important;
}
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 img {
object-position: center 48% !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 img {
object-position: center center !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
min-height: 16px !important;
margin: 0 0 7px !important;
padding: 3px 5px !important;
border-left-width: 2px !important;
border-left-color: var(--fr-badge-accent, var(--fr-badge-accent-lock, #E12626)) !important;
border-radius: 0 !important;
background: #f4f5f6 !important;
color: #111 !important;
font-size: 7.5px !important;
line-height: 1.05 !important;
font-weight: 720 !important;
letter-spacing: .035em !important;
text-transform: uppercase !important;
box-shadow: -2px 0 8px color-mix(in srgb, var(--fr-badge-accent, var(--fr-badge-accent-lock, #E12626)) 34%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
padding-bottom: .16em !important;
font-size: clamp(30px, 3.08vw, 44px) !important;
line-height: 1.14 !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
padding-bottom: .18em !important;
font-size: clamp(14px, 1.02vw, 16.5px) !important;
line-height: 1.30 !important;
font-weight: 650 !important;
letter-spacing: -0.006em !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 {
padding: 10px 12px 13px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 .fr-editorial-meta-v22 {
padding-top: 8px !important;
font-size: 10px !important;
line-height: 1.25 !important;
font-weight: 650 !important;
}
/* Sekcja Chińskie marki: ciemne tło tylko w obrębie kontenera, bez czarnych pól po bokach. */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
box-shadow: none !important;
clip-path: none !important;
width: 100% !important;
max-width: 1080px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 28px !important;
padding-right: 28px !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
width: calc(100% - 32px) !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* =========================================================
4RINGS — HERO EDITORIAL v25 FINAL TUNE
Zakres: pełniejszy tytuł głównego hero, dolne boksy hero na mobile,
mniejsze plakietki i bezpieczny line-height bez ucinania liter.
Dodane przed finalnym lockiem Rankingów mobile.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
padding: 24px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
grid-template-columns: minmax(0, 1.78fr) minmax(300px, 1.08fr) !important;
gap: 24px !important;
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 388px !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
justify-content: center !important;
padding: 8px 0 8px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
display: block !important;
padding-bottom: .20em !important;
font-size: clamp(28px, 2.45vw, 38px) !important;
line-height: 1.18 !important;
font-weight: 780 !important;
letter-spacing: -0.022em !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-excerpt-v22 {
margin-top: 13px !important;
font-size: clamp(14px, 1.05vw, 16px) !important;
line-height: 1.48 !important;
-webkit-line-clamp: 3 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
gap: 18px !important;
}
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
min-height: 14px !important;
padding: 2px 4px !important;
border-left-width: 2px !important;
border-radius: 0 !important;
font-size: 6.8px !important;
line-height: 1.12 !important;
font-weight: 700 !important;
letter-spacing: .032em !important;
box-shadow: -2px 0 7px color-mix(in srgb, var(--fr-badge-accent, var(--fr-badge-accent-lock, #E12626)) 30%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
display: -webkit-box !important;
padding-bottom: .24em !important;
font-size: clamp(13px, .95vw, 15px) !important;
line-height: 1.36 !important;
font-weight: 620 !important;
letter-spacing: -0.004em !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 .fr-editorial-meta-v22 {
font-size: 9.5px !important;
line-height: 1.35 !important;
font-weight: 620 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 {
margin: 20px 0 32px !important;
padding: 14px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
display: block !important;
margin: 0 0 14px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 0 !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
padding: 13px 0 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong {
display: block !important;
padding-bottom: .20em !important;
font-size: 25px !important;
line-height: 1.18 !important;
font-weight: 780 !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-excerpt-v22 {
display: -webkit-box !important;
margin-top: 10px !important;
font-size: 14px !important;
line-height: 1.45 !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 14px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 {
display: grid !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 10px !important;
align-items: stretch !important;
background: #091827 !important;
border: 1px solid rgba(255, 255, 255, .08) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 {
width: 96px !important;
min-height: 86px !important;
height: 100% !important;
aspect-ratio: auto !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 {
padding: 9px 10px 10px 0 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
margin-bottom: 6px !important;
font-size: 6.5px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
font-size: 13.5px !important;
line-height: 1.32 !important;
font-weight: 650 !important;
-webkit-line-clamp: 3 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22 .fr-editorial-meta-v22 {
margin-top: 6px !important;
padding-top: 0 !important;
font-size: 9px !important;
}
}
/* =========================================================
4RINGS — HERO EDITORIAL v26 FINAL POLISH TUNE
Zakres: poszerzenie głównego zdjęcia hero, mniejsze plakietki,
kolory pasków według kategorii, pełny placeholder mobile bez czarnych boków.
Dodane przed finalnym lockiem Rankingów mobile.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-editorial-main-v22 {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
gap: 18px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
gap: 18px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-media-v22 {
min-height: 388px !important;
aspect-ratio: 16 / 9 !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 {
padding: 8px 2px 8px 0 !important;
}
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
min-height: 12px !important;
padding: 2px 3px !important;
border-left-width: 2px !important;
border-left-style: solid !important;
border-left-color: var(--fr-badge-accent, #E12626) !important;
border-radius: 0 !important;
font-size: 6px !important;
line-height: 1.08 !important;
font-weight: 680 !important;
letter-spacing: .028em !important;
text-transform: uppercase !important;
box-shadow: -2px 0 7px color-mix(in srgb, var(--fr-badge-accent, #E12626) 34%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-aktualnosci { --fr-badge-accent: #E12626 !important; border-left-color: #E12626 !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-testy { --fr-badge-accent: #1565C0 !important; border-left-color: #1565C0 !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rankingi { --fr-badge-accent: #1E8E3E !important; border-left-color: #1E8E3E !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-poradniki { --fr-badge-accent: #5B3CC4 !important; border-left-color: #5B3CC4 !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-napedy { --fr-badge-accent: #FFC400 !important; border-left-color: #FFC400 !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-rynek { --fr-badge-accent: #F57C00 !important; border-left-color: #F57C00 !important; }
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-chinskie { --fr-badge-accent: #8B1E3F !important; border-left-color: #8B1E3F !important; }
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
margin-bottom: 5px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-main-title-v22 strong,
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
padding-bottom: .30em !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
line-height: 1.40 !important;
font-weight: 600 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-main-copy-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
min-height: 12px !important;
padding: 2px 3px !important;
border-left-width: 2px !important;
border-left-color: var(--fr-badge-accent, #E12626) !important;
font-size: 6px !important;
line-height: 1.08 !important;
font-weight: 680 !important;
box-shadow: -2px 0 7px color-mix(in srgb, var(--fr-badge-accent, #E12626) 34%, transparent) !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-badge {
margin-bottom: 5px !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-title-v22 strong {
line-height: 1.36 !important;
font-weight: 620 !important;
padding-bottom: .25em !important;
}}
/* =========================================================
4RINGS — CHIŃSKIE MARKI GAP FIX v66
Zakres: tylko odstęp Najnowsze / reklama / Chińskie marki.
NIE UKRYWA placeholdera reklamy.
NIE RUSZA Rankingi mobile final — blok dodany przed finalnym lockiem.
Cel:
- nie chować fr-ad-after-latest,
- zmniejszyć puste pole nad nagłówkiem „Chińskie marki”,
- skasować nadmiar margin/padding z wejścia dark hubu,
- utrzymać stabilne wymiary placeholdera, jeśli slot reklamy jest aktywny.
========================================================= */
@media (min-width: 769px) {
/* Najnowsze kończy się ciaśniej, ale bez zmiany układu wpisów. */
body.fr-home-active .fr-homepage .fr-latest-section,
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage section.fr-latest-section {
margin-bottom: 18px !important;
padding-bottom: 0 !important;
}
/* Slot po Najnowsze ma zostać widoczny, jeśli jest renderowany — nie chowamy placeholdera. */
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 20px auto 18px !important;
padding: 0 !important;
overflow: hidden !important;
clear: both !important;
background: #f3f3f3 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: 300px !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
background: #f3f3f3 !important;
box-sizing: border-box !important;
}
/* Najważniejsze: ciemny hub nie zaczyna się dużym pustym polem. */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese {
margin-top: 14px !important;
margin-bottom: 34px !important;
padding-top: 24px !important;
padding-bottom: 42px !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese {
margin-top: 14px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head {
margin-top: 0 !important;
margin-bottom: 22px !important;
}
}
@media (max-width: 768px) {
/* Na mobile nie dokładamy dużego slotu po Najnowsze — zostaje schowany zgodnie z polityką mobile ads. */
body.fr-home-active .fr-homepage .fr-latest-section,
body.fr-home-active .fr-homepage .fr-layout-latest,
body.fr-home-active .fr-homepage section.fr-latest-section {
margin-bottom: 14px !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: none !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage section.fr-section.fr-layout-chinese {
margin-top: 10px !important;
margin-bottom: 28px !important;
padding-top: 22px !important;
padding-bottom: 32px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-section-head {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
}
/* AWARYJNY BEZPIECZNIK:
Jeśli przeglądarka nadal trzyma stary margin-block z wcześniejszych bloków,
ten selektor o większej specyficzności zbija tylko wejście sekcji Chinese hub. */
html body.fr-home-active .fr-homepage > .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-wrap section.fr-section.fr-layout-chinese {
margin-top: 14px !important;
}
@media (max-width: 768px) {
html body.fr-home-active .fr-homepage > .fr-wrap > section.fr-section.fr-layout-chinese,
html body.fr-home-active .fr-homepage .fr-wrap section.fr-section.fr-layout-chinese {
margin-top: 10px !important;
}
}
/* =========================================================
4RINGS — FINAL PRE-PRODUCTION POLISH v67
Zakres: etap 1/2 przed produkcją.
Nie rusza typografii bazowej i nie rusza bloku „Rankingi mobile final”.
========================================================= */
/* 1. Badge: lepszy kontrast i odcięcie od zdjęć bez zmiany systemu plakietek */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-card-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-news-copy .fr-badge,
body.fr-home-active .fr-homepage .fr-feature-card .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-badge,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge {
border: 1px solid rgba(0, 0, 0, .08) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .10) !important;
}
/* Napędy: żółty badge zawsze z ciemnym tekstem dla kontrastu */
body.fr-home-active .fr-homepage .fr-cat-napedy,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-badge,
body.fr-home-active .fr-homepage .fr-editorial-hero-v22 .fr-cat-napedy,
body.fr-home-active .fr-homepage .fr-rankings-fresh-badge.fr-cat-napedy {
--badge-bg: #FFC400 !important;
--badge-fg: #111111 !important;
background: #FFC400 !important;
color: #111111 !important;
border-color: rgba(0, 0, 0, .16) !important;
}
/* 2. Równe i spokojniejsze karty w hero dolnym oraz sekcjach kafelkowych */
@media (min-width: 769px) {
body.fr-home-active .fr-homepage .fr-editorial-bottom-v22 {
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-v22,
body.fr-home-active .fr-homepage .fr-latest-grid article,
body.fr-home-active .fr-homepage .fr-feature-grid .fr-feature-card,
body.fr-home-active .fr-homepage .fr-home-worth-reading article,
body.fr-home-active .fr-homepage .fr-evergreen-grid article {
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-card-copy,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-news-copy,
body.fr-home-active .fr-homepage .fr-feature-grid .fr-card-copy,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-card-copy,
body.fr-home-active .fr-homepage .fr-evergreen-grid .fr-card-copy {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
body.fr-home-active .fr-homepage .fr-editorial-tile-copy-v22 .fr-meta,
body.fr-home-active .fr-homepage .fr-latest-grid .fr-meta,
body.fr-home-active .fr-homepage .fr-feature-grid .fr-meta,
body.fr-home-active .fr-homepage .fr-home-worth-reading .fr-meta,
body.fr-home-active .fr-homepage .fr-evergreen-grid .fr-meta {
margin-top: auto !important;
}
}
/* 3. Ujednolicone proporcje zdjęć w sekcjach listowych/kafelkowych */
body.fr-home-active .fr-homepage .fr-card-image,
body.fr-home-active .fr-homepage .fr-news-image,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image {
aspect-ratio: 16 / 9 !important;
background: #eeeeee !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-card-image img,
body.fr-home-active .fr-homepage .fr-news-image img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 img,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image img,
body.fr-home-active .fr-homepage .fr-card-image .fr-img,
body.fr-home-active .fr-homepage .fr-news-image .fr-img,
body.fr-home-active .fr-homepage .fr-editorial-tile-media-v22 .fr-img,
body.fr-home-active .fr-homepage .fr-rankings-fresh-image .fr-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* 4. Placeholdery reklamowe: dalej stabilne pod CLS, ale wizualnie mniej „ciężkie”. */
body.fr-home-active .fr-homepage .fr-ad-box {
border: 1px solid #eeeeee !important;
background: #f6f6f6 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-box {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* =========================================================
KONIEC — 4RINGS FINAL PRE-PRODUCTION POLISH v67
========================================================= */
/* =========================================================
4RINGS — DESKTOP SPLIT FEATURE LAYOUT v71
Zakres: desktop homepage / sekcje Chińskie marki i Napędy.
Cel:
- Chińskie marki: dokładny układ typu Rankingi — duży artykuł po lewej,
cztery małe artykuły po prawej w jednej wysokości z główną kartą.
- Napędy: lustrzane odbicie — cztery małe po lewej, duży artykuł po prawej.
- Małe artykuły są w osobnej kolumnie/listingu, więc ich łączna wysokość
zawsze zgrywa się z główną kartą.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.42fr) minmax(330px, .86fr) !important;
gap: 28px !important;
align-items: stretch !important;
width: 100% !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-split-grid {
grid-template-columns: minmax(330px, .86fr) minmax(0, 1.42fr) !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main,
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list {
min-width: 0 !important;
align-self: stretch !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
display: block !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 0 16px !important;
border-bottom: 1px solid #E6E6E3 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
border-bottom-color: rgba(255,255,255,.14) !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 16 / 9 !important;
height: auto !important;
margin: 0 0 10px !important;
overflow: hidden !important;
background: #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-card-copy {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
min-width: 0 !important;
padding: 0 12px !important;
margin: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-card-copy h3 {
display: -webkit-box !important;
margin: 0 !important;
font-size: 24px !important;
line-height: 1.13 !important;
font-weight: 800 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main .fr-card-copy p {
display: -webkit-box !important;
margin: 0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-feature-card {
display: grid !important;
grid-template-columns: 132px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
height: 100% !important;
min-height: 0 !important;
min-width: 0 !important;
padding: 0 0 10px !important;
margin: 0 !important;
border: 0 !important;
border-bottom: 1px solid #E6E6E3 !important;
background: transparent !important;
box-shadow: none !important;
position: static !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list .fr-feature-card {
border-bottom-color: rgba(255,255,255,.14) !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-feature-card:last-child {
border-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-card-image {
display: block !important;
width: 132px !important;
max-width: 132px !important;
height: 88px !important;
aspect-ratio: auto !important;
margin: 0 !important;
overflow: hidden !important;
background: #eeeeee !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-img {
display: block !important;
width: 132px !important;
height: 88px !important;
max-width: 132px !important;
object-fit: cover !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-card-copy {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
min-width: 0 !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-card-copy h3 {
display: -webkit-box !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.13 !important;
font-weight: 800 !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-card-copy p {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list .fr-meta {
margin-top: auto !important;
font-size: 11px !important;
line-height: 1.2 !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main h3,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main h3 a,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list h3 a {
color: #ffffff !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main p,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list p,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-meta {
color: rgba(255,255,255,.72) !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-brand-strip {
margin-top: 14px !important;
padding-top: 12px !important;
padding-bottom: 10px !important;
}
}
@media (max-width: 1024px) {
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-grid,
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-split-main {
order: 1 !important;
}
body.fr-home-active .fr-homepage .fr-layout-split-feature .fr-feature-side-list {
order: 2 !important;
}
}
/* =========================================================
KONIEC — DESKTOP SPLIT FEATURE LAYOUT v71
========================================================= */
/* =========================================================
4RINGS — DESKTOP SPLIT FEATURE TITLE WEIGHT SYNC v73
Zakres: tylko desktop homepage / 4 małe boksy w sekcjach:
- Chińskie marki
- Napędy
Cel:
- tytuły w małych boxach mają mieć font-weight: 700,
nie 800.
- wielkość 15px zostaje jak w poprzedniej poprawce.
Nie rusza mobile i nie rusza finalnego bloku Rankingi mobile final.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list .fr-card-copy h3,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-side-list .fr-card-copy h3 {
font-size: 15px !important;
line-height: 1.13 !important;
font-weight: 700 !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list .fr-card-copy h3 a,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-side-list .fr-card-copy h3 a {
font-size: inherit !important;
line-height: inherit !important;
font-weight: 700 !important;
}
}
/* =========================================================
KONIEC — DESKTOP SPLIT FEATURE TITLE WEIGHT SYNC v73
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE DESKTOP BREATHING SPACE v74
Zakres: tylko desktop homepage.
Cel:
- po finalnym ściskaniu sekcji dodać odrobinę powietrza między blokami,
- bez przebudowy layoutu,
- bez ruszania mobile,
- bez ruszania typografii,
- bez naruszania finalnego bloku Rankingi mobile final.
========================================================= */
@media (min-width: 1025px) {
/* Ogólny, delikatny oddech między głównymi sekcjami */
body.fr-home-active .fr-homepage .fr-section {
margin-top: 22px !important;
margin-bottom: 22px !important;
}
/* Hero zostaje bliżej górnego placeholdera — tu nie przesadzamy */
body.fr-home-active .fr-homepage .fr-hero-block {
margin-top: 14px !important;
margin-bottom: 20px !important;
}
/* Najnowsze po reklamie — lekko więcej oddechu */
body.fr-home-active .fr-homepage .fr-latest-section,
body.fr-home-active .fr-homepage .fr-section.fr-latest-section {
margin-top: 26px !important;
margin-bottom: 26px !important;
}
/* Reklamy/placeholdery: więcej separacji, ale nadal stabilne kontenery */
body.fr-home-active .fr-homepage .fr-ad {
margin-top: 28px !important;
margin-bottom: 30px !important;
}
/* Chińskie marki: trochę więcej powietrza nad i pod ciemną sekcją */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
margin-top: 30px !important;
margin-bottom: 28px !important;
}
/* Pasek producentów zostaje blisko artykułów, ale bez przyklejenia */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-brand-strip {
margin-top: 16px !important;
}
/* Warto przeczytać: oddech po Chińskich markach i przed reklamą */
body.fr-home-active .fr-homepage .fr-home-worth-reading.fr-section,
body.fr-home-active .fr-homepage .fr-section.fr-home-worth-reading {
margin-top: 26px !important;
margin-bottom: 30px !important;
}
/* Testy po placeholderze — lekko niżej */
body.fr-home-active .fr-homepage .fr-layout-tests.fr-section {
margin-top: 28px !important;
margin-bottom: 28px !important;
}
/* Napędy niech nie siedzą zbyt blisko Testów */
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
/* Rankingi: więcej powietrza nad sekcją po reklamie */
body.fr-home-active .fr-homepage .fr-rankings-fresh.fr-section,
body.fr-home-active .fr-homepage .fr-section.fr-rankings-fresh {
margin-top: 32px !important;
margin-bottom: 30px !important;
}
/* Poradniki po Rankingach */
body.fr-home-active .fr-homepage .fr-layout-guides.fr-section {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
/* Rynek po placeholderze */
body.fr-home-active .fr-homepage .fr-layout-market.fr-section {
margin-top: 32px !important;
margin-bottom: 28px !important;
}
/* Guzik na dole niech ma delikatnie więcej przestrzeni */
body.fr-home-active .fr-homepage .fr-more-link-wrap,
body.fr-home-active .fr-homepage .fr-home-more {
margin-top: 24px !important;
margin-bottom: 26px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE DESKTOP BREATHING SPACE v74
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE DESKTOP BREATHING SPACE v75
Zakres: tylko desktop homepage.
Cel: dodać jeszcze odrobinę powietrza w miejscach, które po v74 nadal wyglądają lekko zbite.
Bez ruszania mobile, typografii i finalnego bloku Rankingi mobile final.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-section {
margin-top: 38px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-home-worth-reading.fr-section,
body.fr-home-active .fr-homepage .fr-section.fr-home-worth-reading {
margin-top: 32px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-layout-tests.fr-section {
margin-top: 34px !important;
margin-bottom: 32px !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives.fr-section {
margin-top: 36px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh.fr-section,
body.fr-home-active .fr-homepage .fr-section.fr-rankings-fresh {
margin-top: 38px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-layout-guides.fr-section {
margin-top: 36px !important;
margin-bottom: 34px !important;
}
body.fr-home-active .fr-homepage .fr-layout-market.fr-section {
margin-top: 38px !important;
margin-bottom: 32px !important;
}
body.fr-home-active .fr-homepage .fr-ad {
margin-top: 30px !important;
margin-bottom: 34px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE DESKTOP BREATHING SPACE v75
========================================================= */
/* =========================================================
4RINGS — CHIŃSKIE MARKI REMOVE SEPARATOR LINE v76
Zakres: tylko desktop homepage / sekcja Chińskie marki.
Cel: usunąć poziomą linię między głównym artykułem a boksami producentów.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::before,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::after {
border-bottom: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
padding-bottom: 0 !important;
}
}
/* =========================================================
KONIEC — CHIŃSKIE MARKI REMOVE SEPARATOR LINE v76
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE REMOVE FINAL SECTION SEPARATORS v77
Zakres: desktop homepage.
Cel:
- usunąć poziomą linię w sekcji Chińskie marki pod głównym artykułem,
- usunąć poziomą linię po sekcji Napędy,
- usunąć poziomą linię po sekcji Rankingi.
========================================================= */
@media (min-width: 1025px) {
/* Chińskie marki — bez linii między głównym artykułem a boxami producentów */
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::before,
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::after {
border-bottom: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
padding-bottom: 0 !important;
}
/* Napędy — bez dolnej linii pod sekcją / główną kartą */
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature::before,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature::after,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::before,
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large::after {
border-bottom: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-drives.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
padding-bottom: 0 !important;
}
/* Rankingi — bez dolnej linii pod główną kartą / sekcją */
body.fr-home-active .fr-homepage .fr-rankings-fresh,
body.fr-home-active .fr-homepage .fr-rankings-fresh::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh::after,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main::before,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main::after {
border-bottom: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-rankings-fresh-main {
padding-bottom: 0 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE REMOVE FINAL SECTION SEPARATORS v77
========================================================= */
/* =========================================================
4RINGS — CHIŃSKIE MARKI MOBILE SIDE BOX SPACING v78
Zakres: tylko mobile homepage / sekcja Chińskie marki.
Cel:
- odsunąć 4 małe boxy od głównego artykułu,
- żeby data i czas czytania głównego artykułu nie dotykały pierwszego małego boxu,
- bez ruszania desktopu i bez naruszania Rankingi mobile final.
========================================================= */
@media (max-width: 1024px) {
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list {
margin-top: 16px !important;
padding-top: 2px !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-side-list > .fr-feature-card:first-child {
margin-top: 0 !important;
}
body.fr-home-active .fr-homepage .fr-layout-chinese.fr-layout-split-feature .fr-feature-split-main > .fr-feature-card.fr-feature-large {
margin-bottom: 0 !important;
}
}
/* =========================================================
KONIEC — CHIŃSKIE MARKI MOBILE SIDE BOX SPACING v78
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE FINAL WIDTH + TYPOGRAPHY NORMALIZATION v79
Zakres: desktop homepage + powtarzalne moduły kart.
Cel:
- wyrównać szerokość głównej sekcji hero do kontenera strony głównej,
- ujednolicić krój i rozmiary tytułów w powtarzalnych małych boxach,
- nie ruszać mobile menu, układu sekcji, reklam ani Rankingi mobile final.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage {
--fr-home-shell-width: 1240px;
--fr-home-shell-gutter: 64px;
--fr-font-final: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Hero ma trzymać tę samą oś i szerokość co sekcje poniżej */
body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block,
body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block,
body.fr-home-active .fr-homepage .fr-hero-block.fr-top-grid,
body.fr-home-active .fr-homepage .fr-top-grid {
width: min(var(--fr-home-shell-width), calc(100vw - var(--fr-home-shell-gutter))) !important;
max-width: var(--fr-home-shell-width) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* Powtarzalne małe boxy: jeden krój, jedna waga, jedna skala */
body.fr-home-active .fr-homepage .fr-hero-side .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-small .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3 a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title a,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3 a,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3 a {
font-family: var(--fr-font-final) !important;
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Meta w powtarzalnych małych boxach */
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-meta,
body.fr-home-active .fr-homepage .fr-hero-side .fr-meta,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side .fr-meta {
font-family: var(--fr-font-final) !important;
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 650 !important;
}
}
@media (min-width: 1440px) {
body.fr-home-active .fr-homepage {
--fr-home-shell-width: 1320px;
--fr-home-shell-gutter: 96px;
}
}
/* =========================================================
KONIEC — HOMEPAGE FINAL WIDTH + TYPOGRAPHY NORMALIZATION v79
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE BOX TYPOGRAPHY FINAL v91
Zakres: homepage / powtarzalne boxy i karty.
Cel:
- technicznie ujednolicić krój, wagę, line-height i rozmiary tytułów
w porównywalnych modułach,
- bez zmiany układu sekcji, mobile menu i Rankingi mobile final.
========================================================= */
body.fr-home-active .fr-homepage {
--fr-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
/* Małe boxy w splitach: Chińskie marki / Napędy / Rankingi */
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3 a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title a,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3 a,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3 a {
font-family: var(--fr-ui-font) !important;
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Główne artykuły w splitach: spójna hierarchia, ale większy tytuł */
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-large h3 a,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-large h3 a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-main-title a {
font-family: var(--fr-ui-font) !important;
font-weight: 750 !important;
letter-spacing: -0.018em !important;
line-height: 1.16 !important;
}
/* Klasyczne karty w sekcjach: Testy / Poradniki / Rynek / Warto przeczytać */
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage .fr-card h3 a,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3 a {
font-family: var(--fr-ui-font) !important;
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
}
/* Lista Najnowsze */
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-news-row h3 a {
font-family: var(--fr-ui-font) !important;
font-size: 17px !important;
line-height: 1.22 !important;
font-weight: 750 !important;
letter-spacing: -0.012em !important;
}
/* Hero: stabilna typografia w obrębie modułu */
body.fr-home-active .fr-homepage .fr-hero-copy strong,
body.fr-home-active .fr-homepage .fr-hero-copy strong a,
body.fr-home-active .fr-homepage .fr-hero-card h3,
body.fr-home-active .fr-homepage .fr-hero-card h3 a {
font-family: var(--fr-ui-font) !important;
font-weight: 750 !important;
letter-spacing: -0.014em !important;
}
/* Badge i meta: jeden system na homepage */
body.fr-home-active .fr-homepage .fr-badge,
body.fr-home-active .fr-homepage .fr-badge-link {
font-family: var(--fr-ui-font) !important;
font-size: 11px !important;
line-height: 1.15 !important;
font-weight: 750 !important;
letter-spacing: -0.005em !important;
}
body.fr-home-active .fr-homepage .fr-meta {
font-family: var(--fr-ui-font) !important;
font-size: 12px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-feature-side-list .fr-feature-card h3 a,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title,
body.fr-home-active .fr-homepage .fr-rankings-fresh-side-title a,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-chinese .fr-feature-side-list h3 a,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3,
body.fr-home-active .fr-homepage .fr-layout-drives .fr-feature-side-list h3 a,
body.fr-home-active .fr-homepage .fr-card h3,
body.fr-home-active .fr-homepage .fr-card h3 a,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3,
body.fr-home-active .fr-homepage .fr-home-worth-reading h3 a {
font-size: 15px !important;
line-height: 1.22 !important;
font-weight: 700 !important;
}
body.fr-home-active .fr-homepage .fr-news-row h3,
body.fr-home-active .fr-homepage .fr-news-row h3 a {
font-size: 16px !important;
line-height: 1.22 !important;
font-weight: 750 !important;
}
body.fr-home-active .fr-homepage .fr-meta {
font-size: 11.5px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE BOX TYPOGRAPHY FINAL v91
========================================================= */
/* =========================================================
4RINGS — NAJNOWSZE EXCERPT FINAL
Zakres: tylko sekcja Najnowsze na homepage.
Cel: wypełnić pustą przestrzeń krótką zajawką bez zmiany układu sekcji.
TYPOGRAPHY LOCK — NIE NADPISYWAĆ GLOBALNEJ TYPOGRAFII.
Blok celowo przed „Rankingi mobile final lock”.
========================================================= */
body.fr-home-active .fr-homepage .fr-latest-section .fr-latest-excerpt {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
overflow: hidden !important;
max-width: 720px !important;
margin: 9px 0 0 !important;
color: #4b5563 !important;
font-size: 15.5px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
letter-spacing: -0.005em !important;
}
body.fr-home-active .fr-homepage .fr-latest-section .fr-latest-card .fr-meta {
margin-top: 2px !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-latest-section .fr-latest-excerpt {
margin-top: 8px !important;
font-size: 14.5px !important;
line-height: 1.45 !important;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
}
/* =========================================================
KONIEC — NAJNOWSZE EXCERPT FINAL
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE OPTAD360 AD LABEL FIX
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: wyłącznie wrappery reklam na stronie głównej.
Cel:
- nie ucinać etykiet "Ads by..." / "Powered by...",
- usunąć szare tło/ramki z naszych pustych wrapperów,
- zostawić stabilne wymiary slotów reklamowych.
Ten blok musi być przed „Rankingi mobile final lock”.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad,
body.fr-home-active .fr-homepage .fr-ad-top,
body.fr-home-active .fr-homepage .fr-ad-before-latest,
body.fr-home-active .fr-homepage .fr-ad-after-latest,
body.fr-home-active .fr-homepage .fr-ad-after-worth-reading,
body.fr-home-active .fr-homepage .fr-ad-after-drives,
body.fr-home-active .fr-homepage .fr-ad-after-guides {
position: relative !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin-top: 32px !important;
margin-bottom: 54px !important;
}
body.fr-home-active .fr-homepage .fr-ad .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-box {
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: none !important;
margin-left: auto !important;
margin-right: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body.fr-home-active .fr-homepage .fr-ad::before,
body.fr-home-active .fr-homepage .fr-ad::after,
body.fr-home-active .fr-homepage .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad-box::after {
content: none !important;
display: none !important;
}
@media (max-width: 768px) {body.fr-home-active .fr-homepage .fr-ad .fr-ad-box,
body.fr-home-active .fr-homepage .fr-ad-box {
overflow: visible !important;
height: 280px !important;
min-height: 280px !important;
max-height: none !important;
background: transparent !important;
border: 0 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE OPTAD360 AD LABEL FIX
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE AD AFTER LATEST SAFE SPACING FIX
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: wyłącznie placeholder/reklama między sekcją Najnowsze
a sekcją Chińskie marki.
Cel:
- reklama OptAd360 nie może nachodzić na dark hub Chińskie marki,
- etykieta Ads by / Powered by ma mieć miejsce pod kreacją,
- slot zachowuje stabilną wysokość pod CLS,
- nie ruszać finalnego bloku Rankingi mobile final.
Ten blok celowo jest przed „Rankingi mobile final lock”.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
min-height: 300px !important;
height: auto !important;
margin: 34px auto 86px !important;
padding: 0 !important;
clear: both !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
z-index: 1 !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
z-index: 1 !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest::before,
body.fr-home-active .fr-homepage .fr-ad-after-latest::after,
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese {
margin-top: 0 !important;
position: relative !important;
z-index: 2 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: block !important;
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
min-height: 280px !important;
height: auto !important;
margin: 28px auto 78px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
max-height: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese {
margin-top: 0 !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE AD AFTER LATEST SAFE SPACING FIX
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE AD AFTER LATEST OPTAD360 LABEL STRONG FIX
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: tylko reklama między „Najnowsze” a „Chińskie marki”.
Cel: etykieta OptAd360 / Ads by nie może nachodzić na dark hub.
Ten blok musi zostać przed „Rankingi mobile final lock”.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
min-height: 356px !important;
height: auto !important;
margin: 36px auto 42px !important;
padding: 0 0 58px !important;
clear: both !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
z-index: 1 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
/* Dodatkowy dystans dla pierwszej sekcji po reklamie, nawet gdy etykieta reklamy wychodzi poza iframe. */
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-chinese-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-section {
margin-top: 34px !important;
position: relative !important;
z-index: 2 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-after-latest {
width: 100% !important;
max-width: 100% !important;
min-height: 336px !important;
height: auto !important;
margin: 30px auto 38px !important;
padding: 0 0 56px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-chinese-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-section {
margin-top: 28px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE AD AFTER LATEST OPTAD360 LABEL STRONG FIX
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE AD AFTER LATEST RHYTHM FINE-TUNE V2
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Zakres: wyłącznie reklama między sekcją Najnowsze a Chińskie marki.
Cel:
- odrobinę większy odstęp nad placeholderem, czyli po sekcji Najnowsze,
- mniejszy odstęp pod placeholderem, czyli przed sekcją Chińskie marki,
- zachować miejsce na etykietę OptAd360 / Ads by bez nachodzenia na dark hub,
- nie ruszać finalnego bloku Rankingi mobile final.
Ten blok musi zostać przed „Rankingi mobile final lock”.
========================================================= */
body.fr-home-active .fr-homepage .fr-ad-after-latest {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
min-height: 328px !important;
height: auto !important;
margin: 44px auto 18px !important;
padding: 0 0 28px !important;
clear: both !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
z-index: 1 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
display: block !important;
position: relative !important;
overflow: visible !important;
width: 100% !important;
max-width: 970px !important;
height: 300px !important;
min-height: 300px !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest::before,
body.fr-home-active .fr-homepage .fr-ad-after-latest::after,
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box::before,
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box::after {
content: none !important;
display: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-chinese-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-section {
margin-top: 8px !important;
position: relative !important;
z-index: 2 !important;
}
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-ad-after-latest {
width: 100% !important;
max-width: 100% !important;
min-height: 310px !important;
height: auto !important;
margin: 34px auto 14px !important;
padding: 0 0 30px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest .fr-ad-box {
width: 100% !important;
max-width: 100% !important;
height: 280px !important;
min-height: 280px !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-layout-chinese.fr-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + section.fr-section.fr-layout-chinese,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-chinese-section,
body.fr-home-active .fr-homepage .fr-ad-after-latest + .fr-section {
margin-top: 8px !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE AD AFTER LATEST RHYTHM FINE-TUNE V2
========================================================= */
/* =========================================================
4RINGS — HOMEPAGE HERO AXIS FIX EXACT 2026-06-09
Cel: usunąć realne przesunięcie hero wynikające z wymuszonej
szerokości większej niż kontener i efektu margin-right:-52px.
Trafia w faktyczny element:
TYPOGRAPHY LOCK — NIE NADPISYWAĆ TYPOGRAFII.
Blok musi zostać przed „Rankingi mobile final lock”.
========================================================= */
@media (min-width: 1025px) {
body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block.fr-editorial-hero-v22,
body.fr-home-active .fr-homepage .fr-wrap > .fr-hero-block.fr-editorial-hero-v22,
body.fr-home-active .fr-homepage section.fr-hero-block.fr-editorial-hero-v22,
body.home .fr-homepage section.fr-hero-block.fr-editorial-hero-v22,
body.home section.fr-hero-block.fr-editorial-hero-v22 {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 14px !important;
margin-bottom: 20px !important;
transform: none !important;
translate: none !important;
left: auto !important;
right: auto !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
body.fr-home-active .fr-homepage section.fr-hero-block.fr-editorial-hero-v22 > *,
body.home section.fr-hero-block.fr-editorial-hero-v22 > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
body.fr-home-active .fr-homepage .fr-wrap > section.fr-hero-block.fr-editorial-hero-v22,
body.fr-home-active .fr-homepage section.fr-hero-block.fr-editorial-hero-v22,
body.home section.fr-hero-block.fr-editorial-hero-v22 {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
translate: none !important;
left: auto !important;
right: auto !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
}
/* =========================================================
KONIEC — HOMEPAGE HERO AXIS FIX EXACT
========================================================= */
/* =========================================================
4RINGS — RANKINGI MOBILE FINAL LOCK — RE-APPLIED LAST
DO NOT REMOVE. DO NOT MOVE.
Ten blok zostaje na końcu homepage.css zgodnie z ustaleniami.
========================================================= */
@media (max-width: 768px) {
body.fr-home-active .fr-homepage .fr-layout-ranking {
display: block !important;
overflow: visible !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-grid,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
align-items: start !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card,
body.fr-home-active .fr-homepage .fr-layout-ranking article {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
padding: 0 0 20px !important;
margin: 0 !important;
border-bottom: 1px solid #eeeeee !important;
overflow: visible !important;
position: relative !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card:nth-of-type(n+4),
body.fr-home-active .fr-homepage .fr-layout-ranking article:nth-of-type(n+4) {
display: none !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image,
body.fr-home-active .fr-homepage .fr-layout-ranking article .fr-card-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9 !important;
margin: 0 0 14px !important;
overflow: hidden !important;
position: relative !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-img,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-copy,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-copy {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 12px !important;
margin: 0 !important;
box-sizing: border-box !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-badge {
display: inline-flex !important;
width: auto !important;
font-size: 11px !important;
padding: 5px 8px !important;
margin: 0 0 10px !important;
background: #1E8E3E !important;
color: #ffffff !important;
border-color: #1E8E3E !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card h3,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card h3 {
width: 100% !important;
font-size: 20px !important;
line-height: 1.22 !important;
font-weight: 800 !important;
margin: 0 0 10px !important;
padding-bottom: 0.1em !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-align: left !important;
color: #111 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-meta {
display: block !important;
font-size: 12px !important;
line-height: 1.25 !important;
margin-top: 6px !important;
color: #666666 !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card .fr-card-image::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card .fr-card-image::before {
position: absolute !important;
top: 0 !important;
left: 0 !important;
z-index: 6 !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #1E8E3E !important;
color: #ffffff !important;
font-size: 14px !important;
line-height: 1 !important;
font-weight: 800 !important;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(1) .fr-card-image::before { content: "1" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(2) .fr-card-image::before { content: "2" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card:nth-of-type(3) .fr-card-image::before { content: "3" !important; }
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-rank-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card-rank,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-ranking-number,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-feature-card::before,
body.fr-home-active .fr-homepage .fr-layout-ranking .fr-card::before {
display: none !important;
content: none !important;
}
}