/* Fonts: ładowane przez w — bez @import,
który tworzy dodatkowy łańcuch żądań blokujących render. */
/* ============================================================
irwin-poland.com — przewodnik po Irwin Casino
Archetyp: cards (stos wyniesionych paneli)
Motyw: tinted · Kształt: moderate · Gęstość: dense · Persona: editorial
============================================================ */
:root{
/* --- paleta operatora --- */
--bg-base:#0d0323;
--bg-tint:#140832; /* tinted surface base — tło strony */
--bg-surface-1:#190a38;
--bg-surface-2:#291456;
--border-base:#291456;
--border-soft:rgba(219,83,255,.18);
--brand-gradient:linear-gradient(101deg,#462982 8%,#190a38 71%);
--surface-gradient:linear-gradient(180deg,#1d1041,#2b1e48);
/* --- akcenty --- */
--accent:#ACFF00;
--accent-hover:#C2FF44;
--accent-on:#0d0323;
--accent-shadow:#14341d;
--primary-magenta:#DB53FF;
--secondary-a:#FF5C00;
--secondary-b:#FF881B;
--gold:#FFC700;
--gold-muted:#EDB548;
--success:#20CA4F;
--info:#53E0FF;
--danger:#FF395D;
/* --- tekst --- */
--text-main:#FFFFFF;
--text-body:rgba(255,255,255,.82);
--text-muted:rgba(255,255,255,.58);
--text-faint:rgba(255,255,255,.42);
/* --- powierzchnie jasne (logo LOGO_TONE=dark → pasek jasny) --- */
--bar-bg:#FFFFFF;
--bar-bg-2:#F3F0FA;
--bar-text:#1B0B3A;
--bar-text-muted:#5A4A78;
--bar-border:#E2DBF2;
/* --- typografia --- */
--font-head:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-body:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-script:'Pacifico',cursive;
/* --- kształt (SHAPE=moderate) --- */
--r-sm:6px;
--r:10px;
--r-card:10px;
--r-pill:100px;
/* --- rytm (DENSITY=dense) --- */
--sp-1:.4rem;
--sp-2:.75rem;
--sp-3:1.15rem;
--sp-4:1.75rem;
--sp-5:2.6rem;
--section-pad:clamp(1.5rem,3.2vw,2.4rem);
--block-gap:clamp(1rem,2vw,1.5rem);
/* --- szerokość (cards → 1080–1160) --- */
--wrap:1120px;
--gutter:clamp(1rem,3.5vw,1.75rem);
--shadow-card:0 1px 0 rgba(255,255,255,.04),0 14px 34px -20px rgba(0,0,0,.85);
--shadow-bar:0 1px 0 rgba(0,0,0,.06),0 10px 30px -22px rgba(13,3,35,.6);
}
/* ============ RESET / BAZA ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
overflow-x:hidden;
background:var(--bg-tint);
background-image:
radial-gradient(80rem 40rem at 82% -12%,rgba(70,41,130,.55),transparent 62%),
radial-gradient(52rem 32rem at -10% 8%,rgba(219,83,255,.10),transparent 60%);
background-attachment:fixed;
color:var(--text-body);
font-family:var(--font-body);
font-size:16px;
font-weight:400;
line-height:1.68;
overflow-wrap:break-word;
}
/* якорь не должен уезжать под липкую шапку (переход с хешем с другой страницы) */
:where([id]){scroll-margin-top:5rem}
img{max-width:100%}
h1,h2,h3,h4,h5{
font-family:var(--font-head);
color:var(--text-main);
font-weight:700;
line-height:1.18;
margin:0 0 var(--sp-3);
text-wrap:balance;
}
/* wersaliki wymagają DODATNIEGO trekingu — ujemny sklejał litery */
h1{font-size:clamp(1.85rem,4.4vw,2.9rem);letter-spacing:.012em;text-transform:uppercase}
h2{font-size:clamp(1.35rem,2.7vw,1.95rem);letter-spacing:.018em;text-transform:uppercase}
h3{font-size:clamp(1.08rem,1.9vw,1.3rem)}
h4{font-size:1rem;letter-spacing:.02em}
p{margin:0 0 var(--sp-3)}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
strong,b{color:var(--text-main);font-weight:600}
small{font-size:.82rem}
ul,ol{margin:0 0 var(--sp-3);padding-inline-start:1.2rem}
li{margin-bottom:var(--sp-1)}
hr{border:0;border-top:1px solid var(--border-base);margin:var(--sp-4) 0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
/* akcent #ACFF00 na białym pasku daje 1.28:1 — na jasnych powierzchniach ciemny ring */
.ipl-header :focus-visible,.ipl-footer :focus-visible,.ipl-payments-strip :focus-visible{outline-color:var(--bar-text)}
::selection{background:var(--accent);color:var(--accent-on)}
/* ============ KONTENER + ARCHETYP „CARDS" ============ */
.ipl-container{
width:100%;
max-width:var(--wrap);
margin-inline:auto;
padding-inline:var(--gutter);
}
.ipl-container>*{min-width:0}
/* linki w prozie: odróżnialne nie tylko kolorem (WCAG 1.4.1) i nie konkurujące
z zielonym CTA o uwagę */
main
:where(.ipl-stack,.ipl-overview__inner,.ipl-two-cols__main,.ipl-legal,.ipl-panel,.ipl-verdict,.ipl-method,.ipl-faq__list,.ipl-cta__inner,.ipl-hero__body)
:where(p,li,dd,address) a:not(.ipl-btn){
color:var(--info);
text-decoration:underline;
text-decoration-thickness:1px;
text-decoration-color:rgba(83,224,255,.45);
text-underline-offset:.15em;
}
main
:where(.ipl-stack,.ipl-overview__inner,.ipl-two-cols__main,.ipl-legal,.ipl-panel,.ipl-verdict,.ipl-method,.ipl-faq__list,.ipl-cta__inner,.ipl-hero__body)
:where(p,li,dd,address) a:not(.ipl-btn):hover{
color:var(--info);
text-decoration-color:currentColor;
}
/* każda sekcja = wyniesiony panel na tle strony */
.ipl-section{
display:block;
margin-block:var(--block-gap);
}
.ipl-section>.ipl-container{
background:var(--bg-surface-1);
border:1px solid var(--border-base);
border-radius:var(--r-card);
box-shadow:var(--shadow-card);
padding-block:var(--section-pad);
padding-inline:clamp(1rem,3vw,2rem);
}
/* płaski, wyraźniejszy wariant — gradient dawał u góry różnicę ~4% (niewidoczną),
a u dołu widoczny uskok na styku z kolejnym panelem */
.ipl-section--alt>.ipl-container{background:#221052}
.ipl-section--flat>.ipl-container{
background:none;border:0;box-shadow:none;
}
main{display:block;padding-block:var(--block-gap) var(--sp-5)}
/* wspólny wewnętrzny stos — rytm pionowy bez sklejek */
.ipl-stack{display:flex;flex-direction:column;gap:var(--sp-3)}
/* margin-BLOCK, nie tylko -bottom: inaczej marginesy tabel/akapitów sumowały się
z gapem i dawały pod tabelą ~3.6rem przy 1.15rem między akapitami */
.ipl-stack>*{margin-block:0}
.ipl-stack>.ipl-table-wrap{margin-block:var(--sp-2)}
.ipl-stack>:where(ul,ol,table,.ipl-table-wrap)+p{margin-block-start:0}
/* MIARA WIERSZA — bez tego proza szła na pełne 1056px ≈ 139 znaków w wierszu
(komfort: 60–80). Dotyczy tekstu ciągłego, nie tabel/siatek/paneli bocznych. */
.ipl-legal :where(p,li),
.ipl-stack>:where(p,ul,ol):not(.ipl-cats),
.ipl-overview__inner>:where(p,ul,ol),
.ipl-method>p,
.ipl-faq details>:not(summary),
.ipl-faq summary{max-width:74ch}
.ipl-eyebrow{
font-family:var(--font-head);
font-size:.72rem;
font-weight:700;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--primary-magenta);
margin:0 0 var(--sp-2);
display:block;
}
.ipl-lede{font-size:1.06rem;color:var(--text-body)}
.ipl-note{font-size:.82rem;color:var(--text-muted);line-height:1.6}
.ipl-script{font-family:var(--font-script);text-transform:none;font-weight:400;letter-spacing:0}
/* ============ IKONY ============ */
.ipl-icon{
width:1.5em;height:1.5em;
display:inline-block;
vertical-align:middle;
flex-shrink:0;
stroke:currentColor;
fill:none;
stroke-width:2;
color:var(--accent);
}
.ipl-icon--lg{width:2rem;height:2rem}
/* ============ PRZYCISKI ============ */
.ipl-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.5rem;
font-family:var(--font-head);
font-size:.82rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
line-height:1.1;
min-height:44px; /* minimalny cel dotykowy */
padding:.85rem 1.6rem;
border:0;
border-radius:var(--r-pill);
background:var(--accent);
color:var(--accent-on);
cursor:pointer;
text-decoration:none;
transition:background .18s ease,transform .18s ease;
}
.ipl-btn:hover{background:var(--accent-hover);color:var(--accent-on);text-decoration:none;transform:translateY(-1px)}
.ipl-btn:active{transform:translateY(0)}
.ipl-btn--ghost{
background:transparent;
color:var(--text-main);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);
}
.ipl-btn--ghost:hover{background:rgba(255,255,255,.08);color:var(--text-main)}
.ipl-btn--sm{padding:.6rem 1.1rem;font-size:.74rem;min-height:40px}
.ipl-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
/* ============ SKIP LINK ============ */
.ipl-skip{
position:absolute;
left:-9999px;
top:0;
z-index:1000;
padding:.75rem 1.25rem;
background:var(--accent);
color:var(--accent-on);
font-family:var(--font-head);
font-weight:700;
font-size:.85rem;
border-radius:0 0 var(--r-sm) 0;
}
.ipl-skip:focus{left:0;color:var(--accent-on);text-decoration:none}
/* ============ HEADER (jasny pasek — logo ma ciemny wordmark) ============ */
.ipl-header{
position:sticky;
top:0;
z-index:900;
background:var(--bar-bg);
border-bottom:1px solid var(--bar-border);
box-shadow:var(--shadow-bar);
}
.ipl-header__bar{
max-width:var(--wrap);
margin-inline:auto;
padding:.5rem var(--gutter);
display:flex;
align-items:center;
gap:clamp(.5rem,2vw,1.5rem);
min-width:0;
}
.ipl-logo{
display:inline-flex;
align-items:center;
flex-shrink:0;
text-decoration:none;
min-width:0;
}
.ipl-logo:hover{text-decoration:none}
.ipl-logo__img{
display:block;
height:40px;
width:auto;
object-fit:contain;
}
/* wordmark obok znaku graficznego — sam ikonograf 42px nie identyfikował serwisu */
.ipl-logo__text{
display:none;
font-family:var(--font-head);
font-size:.95rem;
font-weight:700;
letter-spacing:.01em;
line-height:1.15;
color:var(--bar-text);
white-space:nowrap;
margin-inline-start:.55rem;
}
/* pokazywany tylko tam, gdzie realnie mieści się w pasku: w trybie burgera od 480px
i na szerokim desktopie od 1024px (między 901–1023px pasek zajmuje pełne menu) */
@media (min-width:480px) and (max-width:900px){.ipl-logo__text{display:inline-block}}
@media (min-width:1024px){.ipl-logo__text{display:inline-block}}
.ipl-header__spacer{flex:1 1 auto;min-width:0}
.ipl-nav{
display:flex;
align-items:center;
gap:clamp(.35rem,1.4vw,1.1rem);
min-width:0;
}
.ipl-nav ul{
display:flex;
align-items:center;
gap:clamp(.2rem,1.2vw,.9rem);
list-style:none;
margin:0;
padding:0;
}
.ipl-nav li{margin:0;min-width:0}
.ipl-nav a:not(.ipl-btn){
display:block;
font-family:var(--font-head);
font-size:.86rem;
font-weight:600;
letter-spacing:.01em;
color:var(--bar-text);
padding:.55rem .55rem;
border-radius:var(--r-sm);
text-decoration:none;
white-space:nowrap;
transition:color .15s ease,background .15s ease;
}
.ipl-nav a:not(.ipl-btn):hover{
color:#3D1370;
background:var(--bar-bg-2);
text-decoration:none;
}
.ipl-nav a:not(.ipl-btn)[aria-current="page"]{
color:#3D1370;
box-shadow:inset 0 -2px 0 var(--primary-magenta);
}
/* desktop: kopia CTA wewnątrz