/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Nov 06 2025 | 08:42:51 */
/* =====================================================================
TABLE OF CONTENTS
=====================================================================
0) Brand variables
1) Page column & text
2) Headings
3) Chips
4) TOC classic + sticky
5) Heading unification & text styles
6) Popularity / trend icons
7) TOC styles on name pages
8) Utilities
9) Banners
10) Name-page-section
===================================================================== */
/* ========= 0) BRAND VARIABLES ========= */
.single-imiona-zenskie { --brand:#D110A7; --brand-contrast:#fff; --band-pink: #FFCEE478;}
.single-imiona-meskie { --brand:#1659C8; --brand-contrast:#fff; --band-blue: #CFCFFF2B;}
:root{
--brand: #6b7280;
--brand-contrast:#fff;
--chip-radius:999px;
--chip-border:2px;
--chip-font: Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
/* ========= 1) PAGE COLUMN & TEXT ========= */
.name-page .container,
.name-page .site-main,
.name-page .entry-content {
max-width: 1100px;
margin-inline: auto;
padding-inline: clamp(12px, 3vw, 24px);
}
.name-page p {
margin-block-start: 0.5em; /* reduce top margin */
margin-block-end: 0.5em; /* reduce bottom margin */
}
/* Comfortable measure (60–75 characters = readable) */
:root { --measure: 68ch; }
.name-page .prose,
.name-page .elementor-widget-text-editor,
.name-page .elementor-widget-theme-post-content,
.name-page .single-name-text, .single-name-html-text,
.name-page .text-normal,
.name-page .text-normal-link {
max-width: min(var(--measure), 100%);
margin-inline: auto;
}
/* Headings slightly wider */
.name-page h2, .name-page h3 {
max-width: 68ch;
margin-inline: auto;
}
/* Lists/blockquote same width */
.name-page .prose :where(p, ul, ol, blockquote){
max-width: var(--measure);
margin-inline: auto;
}
/* Safe word wrapping (PL requires lang="pl-PL" in ) */
.name-page p, .name-page li {
overflow-wrap: anywhere;
hyphens: auto;
}
/* Content container */
.name-page { max-width: 100ch !important; margin-inline: auto; }
.name-page .content { max-width: 68ch !important; margin-inline: auto; }
.name-sections-container {row-gap: 30px;}
/* Section vertical rhythm */
.name-page .section { padding-block: clamp(16px, 2.2vw, 28px); }
.name-page .section > *:first-child { margin-top: 0; }
/* ========= 2) HEADINGS ========= */
.name-page h2,
.name-page .h2-name-f,
.name-page .h2-name-m{
display: flex;
align-items: center;
gap: .5rem;
line-height: 1.2;
margin: clamp(12px, 1.6vw, 20px) 0 12px;
/* font: 700 clamp(20px, 2.6vw, 26px)/1.2 "Quicksand", system-ui, sans-serif; */
color: #0D0F16;
}
/* Decorative bar (better alignment than border-left) */
/*
.name-page h2::before,
.name-page .h2-name-f::before,
.name-page .h2-name-m::before{
content: "";
inline-size: 6px;
block-size: 1.2em;
background: var(--brand, #D110A7);
border-radius: 3px;
flex: 0 0 auto;
}
*/
.name-page .h1-name-section {
margin-left:20px;
text-align: center;
}
.name-page .h1-name-f, .name-page .h1-name-m { margin-bottom: 6px; }
.name-page .h1-name-sub { margin: 0 0 8px 6px; }
.name-page .boards { margin-top: 8px; }
.name-page .h1-name-sub, .name-page .h1-name-f , .name-page .h1-name-m{
margin: 0.25em 0; /* odstępy pionowe zamiast
*/
}
/* ========= 3) CHIPS ========= */
.chips-wrap{ display:grid; gap:.5rem; margin:.2rem 0 .2rem; }
.chips-nav{ display:flex; gap:.5rem; overflow-x:auto; padding:.25rem 0; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; }
.chips-nav .chip{
padding: .4rem .75rem;
font-weight: 600;
font-size: .95em;
scroll-snap-align:start;
}
.chip, .chip--primary, .chip--today{
display:inline-flex; align-items:center; gap:.5rem;
padding:.5rem .9rem; border-radius:var(--chip-radius); white-space:nowrap;
background:var(--brand); border:var(--chip-border) solid var(--brand);
color:var(--brand-contrast); text-decoration:none;
font-family:var(--chip-font); font-weight:600;
}
.chip:hover{ filter:brightness(.95); }
.chip--today:hover{filter:brightness(.80); }
.chip--primary:hover{filter:brightness(.90); }
.chip:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Variants */
.chip--ghost{
background:transparent; color:var(--brand);
border:var(--chip-border) solid var(--brand);
}
.chip--outline{
background:transparent; color:var(--brand);
border:var(--chip-border) solid var(--brand);
}
/* Chips – solid */
.chip {
background: var(--brand) !important;
border: 3px solid var(--brand) !important;
color: var(--brand-contrast) !important;
font-family: Quicksand, system-ui, sans-serif;
font-weight: 600 !important;
text-decoration: none;
}
/* Inherit color (SVG icons react to currentColor) */
.chip * { color: inherit !important; fill: currentColor; }
/* Ghost / outline */
.chip--ghost, .chip--outline {
background: transparent !important;
border-color: var(--brand) !important;
color: var(--brand) !important;
}
.chip--icon-right {
display: inline-flex; align-items: center; gap: .25rem;
}
.chip--icon-right .icon {
width: 1.05em; height: 1.05em;
flex: 0 0 auto;
}
.chip--inne, .chip--party, .chip--baby, chip--trivia, chip--trend-up {
display: inline-flex;
align-items: center;
gap: 0.3em; /* zmniejszony odstęp między ikoną a tekstem */
}
.chip--party .icon, .chip--inne .icon {
font-size: 1em;
line-height: 1;
flex-shrink: 0;
margin-bottom: -8px;
}
.chip--baby .icon {
font-size: 1.2em;
line-height: 1;
flex-shrink: 0;
}
.chip--trivia .icon {
font-size: 1.2em;
line-height: 1;
flex-shrink: 0;
margin-bottom: -4px;
}
.chip--trend-up .icon, .chip--trend-down .icon {
font-size: 1em;
line-height: 1;
flex-shrink: 0;
margin-bottom: -4px;
}
/* MOBILE: no scroll bar */
@media (max-width: 900px){
.chips-nav::-webkit-scrollbar{ width: 0; height: 0; }
}
/* TOC chips */
.toc-chips{ margin-top:.25rem; }
.toc-chips .chip{
background: transparent !important;
border: 1px solid var(--brand, #D110A7) !important;
color: var(--brand, #D110A7) !important;
padding: .45rem .75rem;
font-weight: 600;
font-size: .95em;
}
.toc-chips .chip-toggle{ display:inline-block; }
.toc-chips .chip-toggle summary{ list-style: none; display: inline-block; cursor: pointer; }
.toc-chips .chip-toggle summary::-webkit-details-marker{ display:none; }
.toc-chips .chip-toggle .txt-less{ display:none; }
.toc-chips .chip-toggle[open] .txt-more{ display:none; }
.toc-chips .chip-toggle[open] .txt-less{ display:inline; }
.toc-chips .more-chips{ display:none; }
.toc-chips .chip-toggle[open] .more-chips{ display:inline; }
.toc-chips .more-chips .chip{ margin-left:.5rem; }
.chips-nav {
display: flex;
flex-wrap: nowrap; /* default: no wrap (mobile) */
overflow-x: auto; /* allow horizontal scroll */
gap: 8px;
}
/* Desktop and larger screens */
@media (min-width: 768px) {
.chips-nav {
flex-wrap: wrap; /* allow wrapping */
overflow-x: visible;
justify-content: center; /* optional: center them */
}
}
/* ========= 4) TOC CLASSIC + STICKY ========= */
.toc{ border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; background:#fff; }
.toc__title{ display:block; margin-bottom:6px; font-weight:700; }
.toc ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
[id]{ scroll-margin-top: clamp(72px, 9vh, 120px); }
.elementor-section:has(.chips-nav.sticky-mobile){ overflow: visible !important; }
:root{
--header-offset-mobile: 0px;
--chips-bar-height: 56px;
}
/* WP admin bar (logged-in only) */
body.admin-bar{ --adminbar-offset: 32px; }
@media (max-width: 782px){ body.admin-bar{ --adminbar-offset: 46px; } }
.toc-nav-container,
.toc-nav-container .elementor-container,
.toc-nav-container .elementor-column,
.toc-nav-container .elementor-widget-wrap,
.toc-nav-container .elementor-widget-container{
overflow: visible;
}
@media only screen
and (max-width: 767px) /* mobile screens only */
and (orientation: portrait)
and (min-height: 600px) {
.top-nav-container{
position: sticky;
top: calc(var(--header-offset-mobile) + var(--adminbar-offset, 0px));
z-index: 1000;
background: var(--chips-bg, #fff);
}
.toc-nav-container{
position: sticky;
top: 52px;
z-index: 999;
background: var(--chips-bg, #fff);
border-bottom: 1px solid rgba(0,0,0,.06);
}
}
/* ========= 5) HEADING UNIFICATION & TEXT STYLES ========= */
.h1-name-f, .h1-name-m{
color:var(--brand); font-size:50px; line-height:2.6rem; font-weight:700;
}
.h1-name-sub{
display:block; font-size:1.2rem; color:#0D0F16; font-weight:400;
margin:2px 0 10px 6px; line-height:1.6rem;
}
.h2-name-f, .h2-name-m{
display:inline-block; height:24px; line-height:24px;
font:700 24px/24px Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial;
color:#0D0F16;
}
.single-name-text, .single-name-htm-text{ font:400 20px/1.9rem Quicksand, system-ui; color:#0D0F16; }
.text-normal{ font:500 20px/2.2rem Quicksand, system-ui; color:#0D0F16; margin:10px 0; }
.text-normal-link{ font:500 20px/2.2rem Quicksand, system-ui; color:#0D0F16; margin:20px 0 0; }
/* ========= 6) POPULARITY / TREND ICONS ========= */
[class^="popularity-all-"], [class^="popularity-new-"]{
background-size:contain; text-indent:-9999px; width:60px; height:20px; display:inline-block; position:relative;
}
[class^="trend-"]{
background-size:contain; text-indent:-9999px; width:24px; height:24px; display:inline-block; position:relative;
}
.popularity-all-5{ background-image:url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-5.png'); background-repeat:no-repeat; background-position:left; }
.popularity-all-4{ background-image:url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-4.png'); background-repeat:no-repeat; background-position:left; }
/* ========= 7) TOC STYLES ON NAME PAGES ========= */
.toc{ margin:0; line-height:0.7; font:700 16px/1 Quicksand, system-ui; }
.toc ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:20px; justify-content:center; font-size:14px; }
@media (max-width:1023px){ .toc ul{ column-gap:10px; row-gap:10; } .toc ul li{ line-height:1.5rem; font-weight:500; font-size:14px; } }
.toc ul li{ display:inline; line-height:.4rem; }
/* ========= 8) UTILITIES ========= */
.green-symbol{ color:#00BF63; font-size:1.2em; }
.red-symbol{ color:#D110A7; font-size:1.2em; }
.grey-symbol{ color:#54595F; font-size:1.2em; }
.white-medium-small {
font-family: Quicksand;
font-weight: 600;
line-height: 1.6rem;
color: #fff;
font-size: 22px;
}
.white-small-bold {
display: flex;
font-family: Quicksand;
font-weight: 600;
line-height: 1.2rem;
color: #fff;
font-size: 14px;
text-align: center;
}
/* ========= 9) BANNERS ========= */
.name-page figure.banner-card{
width:min(1100px,100%) !important;
margin:clamp(12px,2vw,24px) auto !important;
border-radius:14px; overflow:hidden;
box-shadow:0 8px 20px rgba(0,0,0,.06); position:relative;
}
@media (min-width:1024px){
.name-page figure.banner-card{ aspect-ratio:6 / 1; max-height:260px; }
}
.name-page .banner-card__link{ display:block; }
.name-page .banner-card picture,
.name-page .banner-card img{ display:block; width:100%; height:100%; }
.name-page .banner-card__img{ object-fit:cover; }
.name-page .banner-card.banner--flow > .banner-card__link,
.name-page .banner-card.banner--flow picture,
.name-page .banner-card.banner--flow .banner-card__img{
position:static !important; inset:auto !important; width:100% !important; height:auto !important;
}
.name-page .banner--label-below + .banner-card__label{
max-width:min(1100px,100%); margin:6px auto 12px;
font:600 12px/1.2 "Quicksand",system-ui,sans-serif; color:#8a8f98;
letter-spacing:.02em; padding-left:6px;
}
.name-page figure.banner-card{ float:none !important; }
.name-page .banner-card__img{ object-fit: cover; transform: scale(1); transition: transform .35s ease; }
@media (hover:hover) and (pointer:fine){
.name-page .banner--zoom:hover .banner-card__img{ transform: scale(1.04); }
}
/* ========= 10) NAME-PAGE-SECTION ========= */
.name-page-section{
box-sizing: border-box;
width: min(68ch, 100%);
max-width: 68ch;
margin-inline: auto;
display: block;
flex: 0 0 auto;
}
.name-page-section > .h2-name-f, .h2-name-m,
.name-page-section > .text-normal,
.name-page-section > .text-normal-link{ max-width: 100%; }
.h2-name-f, .h2-name-m{
position: relative;
/* padding-left: 0.6em; */
margin: 1.5em 0 0.75em;
line-height: 1.3;
font-size: 24px; /* 1.5rem; */
font-weight: 600;
}
.h2-name-f::before, .h2-name-m::before{
content: "";
position: absolute;
left: 0;
width: 0.4em;
background: #ff69b4;
border-radius: 0.25em;
}
.text-normal,
.text-normal-link{ margin: 0 0 1em 0; }
.name-page-section p{ word-wrap: break-word; }
.name-page-section img{ max-width: 100%; height: auto; }
.icon-label-nowrap{ white-space: nowrap; line-height: 2.7rem; }
.languages-inline {
list-style: none; /* still no bullets */
margin: 0;
padding-left: 1.5em; /* indent versus header */
display: grid;
grid-template-columns: 1fr;
gap: 6px;
}
.languages-inline li {
display: block;
}
/* Desktop layout: two columns */
@media (min-width: 768px) {
.languages-inline {
grid-template-columns: 1fr 1fr; /* two equal columns */
}
}
/* Klasa wspólna dla wykresów */
.chart-block {
width: 100%;
max-width: 100%;
text-align: center;
}
.chart-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* np. 2:1 */
min-height: 240px;
max-height: 560px;
}
canvas.name-chart {
display: block;
width: 100% !important;
height: 100% !important; /* <-- kluczowe */
}
figcaption {
text-align: left !important;
font-size: 12px !important; /* smaller text */
color: #666; /* subtle grey */
margin-top: 6px; /* space above caption */
font-style: italic; /* optional: italic style */
line-height: 1.4;
}
.name-page {
--page-max: 1100px;
--page-pad: clamp(12px, 3vw, 24px);
}
.name-page-section {
padding-top: 20px;
padding-bottom: 20px;
}
.name-page-section.section-band {
position: relative;
isolation: isolate; /* bezpieczny stacking dla ::before */
z-index: 0;
border-radius: 12px;
}
.name-page-section.section-band::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-radius: inherit;
/* trik: centrowanie względem ekranu, ale szerokość jak .name-page */
left: 50%;
transform: translateX(-50%);
width: min(var(--page-max), calc(100vw - 2 * var(--page-pad)));
background: var(--band-color, transparent);
z-index: -1; /* za treścią sekcji */
}
/* Wybór koloru */
.section-band--pink { --band-color: var(--band-pink); }
.section-band--blue { --band-color: var(--band-blue); }
.h3-chart {
display:inline-block; height:20px; line-height:22px !important;
font:600 16px/16px Quicksand, system-ui, -apple-system, Segoe UI, Roboto, Arial;
color:#0D0F16;
text-align: center;
margin: 1em 0;
}
.name-search-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 18px;
background: #8200BF;
color: #fff !important;
text-decoration: none;
font-weight: 600 !important;
border-radius: 999px;
transition: background 0.3s ease, transform 0.2s ease;
}
.name-search-button:hover {
background: #590183;
transform: translateY(-2px);
}
.name-search-button svg {
flex-shrink: 0;
}
/* ============================================================
PLAY BUTTON (reusable)
============================================================ */
.play-audio {
--btn-size: 32px; /* circle diameter */
--btn-fg: #fff; /* icon color */
--btn-bg: var(--brand, #D110A7);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--btn-size);
height: var(--btn-size);
border: 0;
border-radius: 9999px; /* circle */
background: var(--btn-bg);
color: var(--btn-fg);
cursor: pointer;
line-height: 1;
box-shadow: 0 0 0 0 transparent;
transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.play-audio i {
font-size: calc(var(--btn-size) * 0.55);
line-height: 1;
}
.play-audio:hover { transform: scale(1.05); }
.play-audio:active { transform: scale(0.97); }
.play-audio:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255,45,116,.3);
}
/* optional playing animation */
.play-audio.playing { transform: scale(1.06); }
.play-audio.playing i { animation: pulse 1s infinite; }
@keyframes pulse { 0%{transform:scale(1)} 50%{transform:scale(1.18)} 100%{transform:scale(1)} }
/* ============================================================
UTILITIES
============================================================ */
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* (optional) name header tweaks */
.h1-name-f, .h1-name-m { display: inline-flex; align-items: end; gap: 0.5em; }
.h1-name-section { line-height: 1.2; }
.h1-name-section .play-audio { mix-blend-mode: normal; }
/* ============================================================
FOREIGN LANGUAGES LIST (mobile-first)
li.lang-item uses a 3-col grid on mobile, single row on desktop
============================================================ */
li.lang-item {
display: grid;
grid-template-columns: 40px 1fr 40px; /* flag | text | player */
grid-template-rows: auto auto; /* row1: label, row2: name */
column-gap: .5rem;
row-gap: .125rem;
align-items: center;
padding: .25rem 0;
}
/* flag (col 1) */
.lang-flag {
grid-row: 1 / span 2; grid-column: 1;
display: flex; align-items: center; justify-content: center;
}
.flag-icon { width: 1.2em; height: auto; display: block; }
/* text (col 2) */
.lang-text {
grid-column: 2;
grid-template-rows: auto auto;
min-width: 0;
}
.lang-label { font-size: 20px; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.lang-name { font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
/* player (col 3) */
li.lang-item > .play-audio { grid-row: 1 / span 2; grid-column: 3; }
/* tablet / desktop ≥640px: single row, tight middle */
@media (min-width: 640px) {
li.lang-item {
grid-template-columns: 30px 1fr 36px;
grid-template-rows: auto; /* single row */
}
.lang-flag { grid-row: 1; grid-column: 1; }
li.lang-item > .play-audio { grid-row: 1; grid-column: 3; --btn-size: 32px; }
.lang-text {
grid-column: 2; grid-row: 1;
display: flex; align-items: center; gap: .5rem;
flex-wrap: wrap; min-width: 0;
}
.lang-label { white-space: nowrap; flex: 0 0 auto; }
.lang-name { flex: 1 1 auto; min-width: 0; }
}
/* wide desktop ≥800px: fix middle column to 600px */
@media (min-width: 800px) {
li.lang-item { grid-template-columns: 30px 600px 36px; }
.lang-text { max-width: 600px; }
}
/* Mobile zebra for languages (≤640px) */
@media (max-width: 640px) {
ul.languages-inline { margin: 0; padding: 0; list-style: none; }
ul.languages-inline > li.lang-item {
padding: .5rem .625rem;
border-radius: 12px; /* rounded, aligned with h2 */
}
ul.languages-inline > li.lang-item:nth-of-type(odd) { background: var(--zebra-odd, rgba(0,0,0,.03)); }
ul.languages-inline > li.lang-item:nth-of-type(even) { background: var(--zebra-even, transparent); }
@media (prefers-color-scheme: dark) {
ul.languages-inline > li.lang-item:nth-of-type(odd) { background: rgba(255,255,255,.06); }
}
}
/* Desktop: force single vertical list & subtle divider (kills theme columns) */
@media (min-width: 640px) {
ul.languages-inline {
column-count: 1 !important; column-width: auto !important; column-gap: 0 !important;
display: grid !important; grid-template-columns: 1fr !important; row-gap: .25rem;
margin: 0; padding-left: 40px; padding-top: 20px; list-style: none;
}
ul.languages-inline > li.lang-item {
break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
width: 100%;
border-bottom: 1px solid rgba(0,0,0,.08);
padding: .5rem 0;
}
ul.languages-inline > li.lang-item:last-child { border-bottom: none; }
@media (prefers-color-scheme: dark) {
ul.languages-inline > li.lang-item { border-color: rgba(255,255,255,.15); }
}
}
/* ──────────────────────────────────────────────
KNOWN CHARACTERS LIST (two-column layout)
────────────────────────────────────────────── */
ul.known-characters.two-col {
margin: 0;
padding: 0;
list-style: none;
}
ul.known-characters.two-col > li.known-row {
display: grid;
grid-template-columns: 1fr 50px; /* text | icons */
column-gap: .75rem;
align-items: center;
padding: .5rem 0;
border-bottom: 1px solid rgba(0,0,0,.08);
}
ul.known-characters.two-col > li.known-row:last-child {
border-bottom: none;
}
/* Left column: text */
.known-text { min-width: 0; }
.known-label a {
font-weight: 600;
text-decoration: none;
color: inherit;
}
.known-name {
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 .15rem 0;
color: #111;
line-height: 1.25;
}
.known-details {
font-size: .95rem;
line-height: 1.35;
color: #333;
}
/* Right column: stacked icons */
.known-icons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .4rem;
}
/* Wikipedia link button (neutral grey, smaller) */
.known-link {
--btn-size: 30px;
display: flex;
align-items: center;
justify-content: center;
width: var(--btn-size);
height: var(--btn-size);
border-radius: 50%;
background: #6b7280; /* neutral grey */
text-decoration: none;
transition: background .2s ease;
}
.known-link i { color: #fff; font-size: 14px; }
.known-link:hover,
.known-link:focus {
background: #4b5563;
}
/* ──────────────────────────────────────────────
MOBILE ZEBRA STRIPING (≤640px)
────────────────────────────────────────────── */
@media (max-width: 640px) {
ul.known-characters.two-col > li.known-row {
border-bottom: none; /* zebra instead */
padding: .5rem .625rem;
}
ul.known-characters.two-col > li.known-row:nth-of-type(odd) {
background: var(--zebra-odd, rgba(0,0,0,.03));
}
ul.known-characters.two-col > li.known-row:nth-of-type(even) {
background: var(--zebra-even, transparent);
}
@media (prefers-color-scheme: dark) {
ul.known-characters.two-col > li.known-row:nth-of-type(odd) {
background: rgba(255,255,255,.06);
}
}
}
/* ============================================================
THEME PALETTE & CATEGORY COLORS (variables + helper classes)
============================================================ */
:root{
--pink-main:#D110A7; --blue-main:#1659C8;
--pink-light:#E94DBF; --blue-light:#4D81E0;
--pink-dark:#880963; --blue-dark:#0D2E66;
--violet:#A31A91; --violet-light:#6A3FA6; --violet-dark:#B832A2;
}
.fa-book { color: var(--pink-main); } /* literatura */
.fa-briefcase { color: var(--blue-main); } /* biznes */
.fa-graduation-cap { color: var(--blue-light); } /* edukacja */
.fa-futbol { color: var(--pink-light); } /* sport */
.fa-landmark { color: var(--blue-dark); } /* instytucje */
.fa-film { color: var(--violet); } /* film */
.fa-tv { color: var(--violet-light); } /* telewizja */
.fa-music { color: var(--pink-light); } /* muzyka */
.fa-masks-theater { color: var(--violet-dark); } /* teatr */
.fa-star { color: var(--pink-light); } /* showbiz */
.fa-flask { color: var(--blue-main); } /* nauka */
.fa-ship { color: var(--blue-light); } /* podróże morskie */
.fa-camera { color: var(--violet); } /* fotografia */
.fa-gamepad { color: var(--blue-light); } /* gry */
.fa-scale-balanced { color: var(--blue-dark); } /* prawo */
.fa-moon { color: var(--violet-light); } /* noc */
.fa-mountain { color: var(--blue-light); } /* góry */
.fa-chart-line { color: var(--blue-main); } /* finanse */
.fa-car { color: var(--pink-light); } /* motoryzacja */
.fa-tree { color: var(--pink-dark); } /* natura */
.fa-globe { color: var(--blue-light); } /* globalność */
.fa-plane { color: var(--blue-main); } /* podróże */
.fa-compass { color: var(--violet-light); } /* eksploracja */
.fa-sun { color: var(--pink-light); } /* energia */
.fa-suitcase { color: var(--pink-main); } /* turystyka */
.fa-location-dot { color: var(--violet-dark); } /* lokalizacja */
.fa-route { color: var(--violet); } /* trasa */
.fa-map { color: var(--blue-light); } /* mapa */
/* brakujące ikony dopełniające */
.fa-crown { color: var(--pink-dark); } /* królowie, monarchia */
.fa-user { color: var(--blue-main); } /* osoba ogólna */
.fa-user-tie { color: var(--blue-dark); } /* biznes / redaktorzy */
.fa-external-link-alt { color: #fff; } /* ikona w przycisku */
.fa-snowflake { color: var(--violet); }
/* size for category icons in known list (balanced in its cell) */
.known-icon{ font-size:24px; line-height:1; }
.h2-icon, .h3-icon {
color: var(--brand);
margin-right: .5rem;
font-size: 1.2em; /* Font Awesome icons scale with font-size */
vertical-align: middle;
display: inline-flex; /* ensures centering works for SVG too */
align-items: center;
}
.h3-icon {
margin-right: .1rem;
}
@media (max-width: 768px) {
.h2-icon {
font-size: 1.2em;
margin-right: .8rem;
}
.h3-icon {
font-size: 1.2em;
margin-right: .4rem;
}
}
/* Ikony tylko w postach (artykułach) */
.single-post .h2-icon, .h3-icon {
color: #8200BF;
}
/* Ikony w stronach informacyjnych zostają brandowe (zostawiasz obecne reguły) */
.page .h2-icon {
color: inherit; /* albo Twój obecny kolor brandowy */
}
.h2-icon .morse-icon {
width: 0.8em; /* match FA icon size */
height: 0.8em;
}
.h2-icon.icon-yellow {
color: #f5c518 !important;
}
.known-characters.one-col { column-count: 1; }
.known-characters.two-col { column-count: 2; }
.known-characters.three-col{ column-count: 3; }
.known-row { break-inside: avoid; display: flex; justify-content: space-between; gap: .75rem; }
:root {
/* Brand primaries */
--pink-main: #D110A7;
--blue-main: #1659C8;
/* Pastel tints for card backgrounds */
--zebra-pink-a: #FEF5FB;
--zebra-pink-b: #FCE7F6;
--zebra-blue-a: #F5F8FD;
--zebra-blue-b: #E6EEFA;
/* Border colors (as vars) */
--zebra-pink-border-a: rgba(209, 16, 167, 0.25);
--zebra-pink-border-b: rgba(209, 16, 167, 0.10);
--zebra-blue-border-a: rgba(22, 89, 200, 0.25);
--zebra-blue-border-b: rgba(22, 89, 200, 0.10);
/* Neutral fallbacks (used when gender class is missing) */
--zebra-neutral-a: #f9f9f9;
--zebra-neutral-b: #ffffff;
--zebra-neutral-border-a: rgba(0, 0, 0, 0.10);
--zebra-neutral-border-b: rgba(0, 0, 0, 0.06);
/* Headings & icons defaults */
--h2-default: #111;
--icon-neutral: #666;
/* Brand-aligned icon tints */
--icon-pink: #E34CBE; /* lighter magenta */
--icon-blue: #4C80D9; /* lighter blue */
}
/* ========================================= */
/* Zebra base (item box styling) */
.zebra > .zebra-item {
padding: 20px 20px;
margin-bottom: 12px;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
/* ========================================= */
/* Variant: CARDS (background alternation) */
/* Neutral defaults so cards work even without gender class */
.zebra--cards {
--zebra-a: var(--zebra-neutral-a);
--zebra-b: var(--zebra-neutral-b);
}
/* Alternation when .zebra-item are direct children */
.zebra--cards > .zebra-item:nth-of-type(odd) { background: var(--zebra-a); }
.zebra--cards > .zebra-item:nth-of-type(even) { background: var(--zebra-b); }
/* Elementor case: alternate by widget index when .zebra-item sits inside HTML widget */
.zebra .elementor-widget-wrap > .elementor-widget-html:nth-of-type(odd) .zebra-item { background: var(--zebra-a); }
.zebra .elementor-widget-wrap > .elementor-widget-html:nth-of-type(even) .zebra-item { background: var(--zebra-b); }
/* Fallback if widgets are direct children of the zebra node */
.zebra > .elementor-widget-html:nth-of-type(odd) .zebra-item { background: var(--zebra-a); }
.zebra > .elementor-widget-html:nth-of-type(even) .zebra-item { background: var(--zebra-b); }
/* Gender overrides — both descendant AND same-element placement */
.female-names .zebra--cards,
.female-names.zebra--cards {
--zebra-a: var(--zebra-pink-a);
--zebra-b: var(--zebra-pink-b);
}
.male-names .zebra--cards,
.male-names.zebra--cards {
--zebra-a: var(--zebra-blue-a);
--zebra-b: var(--zebra-blue-b);
}
/* ========================================= */
/* Variant: BORDERS (border alternation) */
/* Neutral defaults */
.zebra--borders {
--zebra-border-a: var(--zebra-neutral-border-a);
--zebra-border-b: var(--zebra-neutral-border-b);
}
.zebra--borders > .zebra-item {
background: #fff;
border: 2px solid transparent;
}
.zebra--borders > .zebra-item:nth-of-type(odd) { border-color: var(--zebra-border-a); }
.zebra--borders > .zebra-item:nth-of-type(even) { border-color: var(--zebra-border-b); }
/* Gender overrides — both descendant AND same-element */
.female-names .zebra--borders,
.female-names.zebra--borders {
--zebra-border-a: var(--zebra-pink-border-a);
--zebra-border-b: var(--zebra-pink-border-b);
}
.male-names .zebra--borders,
.male-names.zebra--borders {
--zebra-border-a: var(--zebra-blue-border-a);
--zebra-border-b: var(--zebra-blue-border-b);
}
/* ========================================= */
/* Headings & Font Awesome icons */
.zebra { --icon-color: var(--icon-neutral); } /* default */
.female-names,
.female-names .zebra,
.female-names.zebra { --icon-color: var(--icon-pink); }
.male-names,
.male-names .zebra,
.male-names.zebra { --icon-color: var(--icon-blue); }
.zebra h2 {
font-size: 1.6rem;
font-weight: 600;
color: var(--brand)
margin: 0 0 12px;
display: flex;
align-items: center;
}
/* Cover FA and SVG variants */
.zebra h2 i.fa,
.zebra h2 .fa,
.zebra h2 .svg-inline--fa {
margin-right: 8px;
font-size: 1.1em;
color: var(--brand);
}
/* Optional heading tone variants (variable-driven) */
.alt-dark { --h2-color: #222; }
.alt-soft { --h2-color: #333; }
.alt-cool { --h2-color: #0F172A; }
/* ========================================= */
/* Show more/less toggle (mobile only) */
.zebra-hidden { display:none; }
.zebra-item.is-expanded .zebra-hidden {
display:block; /* block safer for links/paragraphs */
margin-top:.5rem; /* space so first link isn’t pressed by button */
}
.zebra-toggle {
display:block;
width:36px; height:36px;
margin:1rem auto 0;
border-radius:9999px;
border:1px solid currentColor;
background:transparent;
cursor:pointer;
padding:0;
line-height:0;
color: var(--icon-color, #555);
}
.zebra-toggle .fa,
.zebra-toggle .svg-inline--fa { font-size:16px; }
.female-names .zebra-toggle { color: var(--pink-main); }
.male-names .zebra-toggle { color: var(--blue-main); }
.zebra-toggle:hover,
.zebra-toggle:focus-visible {
outline:none;
color: #8200BF;
}
/* ========================================= */
/* Desktop simplification */
@media (min-width: 768px) {
.zebra > .zebra-item {
margin-bottom:0;
border-radius:0;
box-shadow:none;
padding-top:30px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
}
.zebra--cards > .zebra-item { background:transparent !important; }
.zebra--cards > .zebra-item + .zebra-item,
.zebra--borders > .zebra-item + .zebra-item {
border-top:1px solid rgba(0,0,0,.06);
}
.zebra--borders > .zebra-item { border-width:0; }
/* disable show-more on desktop */
.zebra-hidden { display:block !important; margin-top:0; }
}
/* ukryta część jako sekcja z animacją wysokości */
.zebra-hidden {
display: none; /* pozostaje wyłączone gdy zwinięte (mobile) */
overflow: hidden; /* ważne dla animacji height */
height: 0; /* punkt startowy dla animacji */
opacity: 0; /* dla subtelnego fade-in/out */
transition: height 260ms ease, opacity 220ms ease;
will-change: height, opacity;
}
/* gdy rozwinięte – po animacji JS ustawi height:auto, ale najpierw na moment height:scrollHeight */
.zebra-item.is-expanded .zebra-hidden {
/* nie ustawiamy tu height; steruje JS */
}
/* odstęp od przycisku (żeby link pod spodem nie „łapał” hovera przy kliknięciu) */
.zebra-item.is-expanded .zebra-hidden {
margin-top: .5rem;
}
/* na desktopie funkcja wyłączona – wszystko widoczne, bez animacji */
@media (min-width: 768px) {
.zebra-hidden {
display: block !important;
overflow: visible;
height: auto !important;
opacity: 1 !important;
transition: none !important;
margin-top: 0;
}
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.popularity-all-5 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-5.png') no-repeat left;
}
.popularity-all-4 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-4.png') no-repeat left;
}
.popularity-all-3 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-3.png') no-repeat left;
}
.popularity-all-2 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-2.png') no-repeat left;
}
.popularity-all-1 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-1.png') no-repeat left;
}
.popularity-all-0 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-all-0.png') no-repeat left;
}
.popularity-new-5 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-5.png') no-repeat left;
}
.popularity-new-4 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-4.png') no-repeat left;
}
.popularity-new-3 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-3.png') no-repeat left;
}
.popularity-new-2 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-2.png') no-repeat left;
}
.popularity-new-1 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-1.png') no-repeat left;
}
.popularity-new-0 {
background: url('https://oimionach.pl/staging/wp-content/uploads/popularity-new-0.png') no-repeat left;
}
.trend-downward-then-downward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-downward-then-downward.svg') no-repeat left;
}
.trend-downward-then-stable {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-downward-then-stable.svg') no-repeat left;
}
.trend-downward-then-upward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-downward-then-upward.svg') no-repeat left;
}
.trend-upward-then-downward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-upward-then-downward.svg') no-repeat left;
}
.trend-upward-then-stable {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-upward-then-stable.svg') no-repeat left;
}
.trend-upward-then-upward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-upward-then-upward.svg') no-repeat left;
}
.trend-stable-then-downward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-stable-then-downward.svg') no-repeat left;
}
.trend-stable-then-stable {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-stable-then-stable.svg') no-repeat left;
}
.trend-stable-then-upward {
background: url('https://oimionach.pl/staging/wp-content/uploads/trend-stable-then-upward.svg') no-repeat left;
}
.popularity-all-5, .popularity-all-4, .popularity-all-3, .popularity-all-2, .popularity-all-1, .popularity-all-0, .popularity-new-5, .popularity-new-4, .popularity-new-3, .popularity-new-2, .popularity-new-1, .popularity-new-0
{
background-size: contain; /* Ensure the icon scales properly */
text-indent: -9999px;
width: 60px;
height: 20px;
display: inline-block;
position: relative; /* Ensure tooltip is positioned relative to the label */
}
.trend-downward-then-downward, .trend-downward-then-stable, .trend-downward-then-upward,
.trend-upward-then-downward, .trend-upward-then-stable, .trend-upward-then-upward,
.trend-stable-then-downward, .trend-stable-then-stable, .trend-stable-then-upward
{
background-size: contain; /* Ensure the icon scales properly */
text-indent: -9999px;
width: 24px;
height: 24px;
display: inline-block;
position: relative; /* Ensure tooltip is positioned relative to the label */
}
.jet-checkboxes-list__label {
position: relative; /* Ensure tooltip is positioned relative to the label */
}
.popularity-tooltip {
text-indent: 0px;
visibility: hidden;
width: 130px;
background-color: #EBEBEB;
color: #54595F;
text-align: center;
border-radius: 5px;
padding: 4px;
position: absolute;
z-index: 1000;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
transition: opacity 0.3s;
font-family: Quicksand;
font-weight: 500;
font-size: 14px;
}
.jet-checkboxes-list__label:hover .popularity-tooltip {
visibility: visible;
}
/* ========================================= */
/* Zebra Ad & Placeholder (spójne z bazą) */
/* ========================================= */
.zebra-item--ad,
.zebra-ad-placeholder {
position: relative;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
padding: 20px;
margin-bottom: 12px;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
text-align: center; /* centrowanie przycisków inline */
transition: transform .2s ease, box-shadow .2s ease;
}
/* Hover efekt – subtelne uniesienie */
.zebra-item--ad:hover,
.zebra-ad-placeholder:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
/* Badge REKLAMA */
.zebra-item--ad::before,
.zebra-ad-placeholder::before {
content: " REKLAMA"; /* fa-tag + tekst */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 6px;
left: 16px;
font-size: 0.8rem;
letter-spacing: 0.5px;
color: #fff;
border-radius: 999px;
padding: 4px 12px;
line-height: 1;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
background: #666;
}
/* Kolory badge */
.female-names .zebra-item--ad::before,
.female-names .zebra-ad-placeholder::before {
background: var(--pink-main);
}
.male-names .zebra-item--ad::before,
.male-names .zebra-ad-placeholder::before {
background: var(--blue-main);
}
/* Gradientowe pastelowe tła */
.female-names .zebra-item--ad,
.female-names .zebra-ad-placeholder {
background: linear-gradient(180deg, #fdf2f8 0%, #fde6f3 100%);
}
.male-names .zebra-item--ad,
.male-names .zebra-ad-placeholder {
background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
}
/* H2 w ad/placeholder – identyczne jak zebra h2 */
.zebra-item--ad h2,
.zebra-ad-placeholder h2 {
font-size: 1.6rem;
font-weight: 600;
margin: 30px 0 12px; /* więcej oddechu pod badge */
display: flex;
align-items: center;
justify-content: flex-start; /* ✅ left aligned */
color: var(--h2-color, var(--h2-default));
}
/* Tekst */
.zebra-item--ad p,
.zebra-ad-placeholder p {
font-size: 20px;
font-weight: 500;
text-align: center;
line-height: 2.2rem;
margin: 12px 0 8px;
color: #0D0F16;
}
.zebra-item--ad p {
text-align: left;
}
.zebra-item--placeholder p {
text-align: center;
}
/* ========================================= */
/* Przyciski (Ad i Placeholder – spójne) */
/* ========================================= */
.zebra-item--ad .aff-btn,
.zebra-ad-placeholder .open-consent {
display: inline-block;
margin-top: 20px;
min-width: 160px;
padding: 10px 24px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 999px;
cursor: pointer;
line-height: 1.4rem;
border: 2px solid;
background: transparent;
transition: color .2s ease, border-color .2s ease;
}
/* Kolory bazowe */
.female-names .zebra-item--ad .aff-btn,
.female-names .zebra-ad-placeholder .open-consent {
color: var(--pink-main);
border-color: var(--pink-main);
}
.male-names .zebra-item--ad .aff-btn,
.male-names .zebra-ad-placeholder .open-consent {
color: var(--blue-main);
border-color: var(--blue-main);
}
/* Hover – tylko zmiana koloru na akcent */
.zebra-item--ad .aff-btn:hover,
.zebra-ad-placeholder .open-consent:hover {
color: #8200BF;
border-color: #8200BF;
background: transparent;
margin-top: 20px;
min-width: 160px;
padding: 10px 24px;
font-size: 1.05rem;
font-weight: 600;
border-radius: 999px;
cursor: pointer;
line-height: 1.4rem;
border: 2px solid;
}
/* Placeholder link container – centrowanie */
.zebra-ad-placeholder .consent-link {
display: flex;
justify-content: center;
margin-top: 18px;
}
/* Linki w treści reklamy */
.zebra-item--ad p a {
color: #8200BF;
font-weight: 600;
text-decoration: underline;
transition: color .2s ease, opacity .2s ease;
}
.zebra-item--ad p a:hover {
color: #8200BF; /* zostaje ten sam fiolet */
opacity: 0.8; /* subtelny efekt przy hover */
font-weight: 600;
text-decoration: none;
}
/* ========================================= */
/* Mobile adjustments */
/* ========================================= */
@media (max-width: 600px) {
.zebra-item--ad::before,
.zebra-ad-placeholder::before {
font-size: 0.85rem;
top: 6px;
left: 12px;
padding: 4px 12px;
margin-bottom: 16px;
}
.zebra-item--ad h2,
.zebra-ad-placeholder h2 {
font-size: 1.6rem;
}
.zebra-item--ad p,
.zebra-ad-placeholder p {
font-size: 20px;
font-weight: 500;
}
.zebra-ad-placeholder .consent-link {
margin-top: 20px;
}
.zebra-item--ad .aff-btn,
.zebra-ad-placeholder .open-consent {
font-size: 1.05rem;
}
}
/* --- Podstawowy wygląd tabeli --- */
.chart-data-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.875rem;
color: #111;
}
.chart-data-table th,
.chart-data-table td {
border: 1px solid #ddd;
padding: 6px 10px;
text-align: center;
white-space: nowrap; /* zapobiega łamaniu np. liczb */
}
.chart-data-table thead th {
background-color: #f9f9f9;
font-weight: 600;
color: #333;
}
.chart-data-table tbody tr:nth-child(even) {
background-color: #fdfdfd;
}
.chart-data-table tbody tr:hover {
background-color: #f3f3f3;
}
/* --- Wrapper z przewijaniem poziomym na mobile --- */
.chart-data-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* płynne przewijanie iOS */
}
.chart-data-table-wrapper::-webkit-scrollbar {
height: 6px;
}
.chart-data-table-wrapper::-webkit-scrollbar-thumb {
background: #bbb;
border-radius: 3px;
}
.chart-data-table-wrapper::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* --- Dodatkowe dopasowanie dla małych ekranów --- */
@media (max-width: 767px) {
.chart-data-table {
font-size: 0.8rem; /* odrobinę mniejsza czcionka */
}
}
/* ukrywanie tabel tylko w blokach wykresów */
.chart-zebra-hidden {
display: none;
}
.chart-zebra-item.is-expanded .chart-zebra-hidden {
display: block;
}
/* poprawka tylko dla tabel w chart-block */
.chart-block .zebra-toggle {
display: inline-block !important; /* przycisk zawsze widoczny */
}
.chart-block .chart-zebra-hidden {
display: none;
}
.chart-block .chart-zebra-item.is-expanded .chart-zebra-hidden {
display: block;
}
.chart-data-table th,
.chart-data-table td {
border: 1px solid #ddd;
padding: 6px 10px;
text-align: center;
}
/* liczby w nie łamią się */
.chart-data-table td {
white-space: nowrap;
}
/* nagłówki | mogą się łamać */
.chart-data-table th {
white-space: normal;
word-break: break-word; /* łamie długie słowa */
hyphens: auto; /* opcjonalnie dzielenie wyrazów */
}
/* ikonka w przycisku toggle */
.zebra-toggle i {
transition: transform 0.3s ease;
}
/* po rozwinięciu tabela → obrót w górę */
.chart-zebra-item.is-expanded .zebra-toggle i {
transform: rotate(180deg);
}
#pochodzenie {
scroll-margin-top: 80px; /* adjust to height of your sticky header */
}
@media (max-width: 1024px) {
.post-intro {
border-radius: var(--radius-xl, 12px);
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
}
:root {
--zebra-neutral-a: #f8f8f8;
--zebra-neutral-b: #ffffff;
}
/* === ZEBRA – unified design for articles === */
/* Default zebra-item styling */
.zebra .zebra-item {
background: #fff;
transition: background 0.2s ease;
}
/* Mobile & Tablet = cards style (rounded, shadow, padding) */
@media (max-width: 1024px) {
.zebra .zebra-item {
border-radius: var(--radius-xl, 12px);
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,0.05));
}
.zebra .zebra-item:last-child {
margin-bottom: 0;
}
}
/* Desktop = simplified, separators instead of cards */
@media (min-width: 1025px) {
.zebra .zebra-item {
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
padding: 2rem 0;
border-bottom: 1px solid #eee;
}
.zebra .zebra-item:last-child {
border-bottom: none;
}
}
/* === Zebra colors – neutral, female, male === */
/* Neutral */
@media (max-width: 1024px) {
.zebra.zebra--cards.neutral .zebra-item:nth-child(even) {
background: var(--zebra-neutral-a, #fafafa);
}
.zebra.zebra--cards.neutral .zebra-item:nth-child(odd) {
background: var(--zebra-neutral-b, #ffffff);
}
}
/* Female */
@media (max-width: 1024px) {
.zebra.zebra--cards.female-names .zebra-item:nth-child(even) {
background: var(--zebra-pink-a, #fff6f9);
}
.zebra.zebra--cards.female-names .zebra-item:nth-child(odd) {
background: var(--zebra-pink-b, #ffffff);
}
}
/* Male */
@media (max-width: 1024px) {
.zebra.zebra--cards.male-names .zebra-item:nth-child(even) {
background: var(--zebra-blue-a, #f6f9ff);
}
.zebra.zebra--cards.male-names .zebra-item:nth-child(odd) {
background: var(--zebra-blue-b, #ffffff);
}
}
.ad-slider {
position: relative;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
padding: 20px;
margin-bottom: 12px;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
text-align: center; /* centrowanie przycisków inline */
transition: transform .2s ease, box-shadow .2s ease;
}
.ad-slider::before {
content: " REKLAMA"; /* fa-tag + tekst */
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 10px;
left: 16px;
font-size: 0.8rem;
letter-spacing: 0.5px;
color: #fff;
border-radius: 999px;
padding: 4px 12px;
line-height: 1;
box-shadow: 0 2px 4px rgba(0,0,0,.15);
background: #666;
} |