html, body {
overflow-x: clip; /* Zastępuje overflow-x: hidden i pozwala działać sticky! */
}
/* --- STYLE DLA PROMOCJI CENOWEJ --- */
.old-price {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.1rem;
color: #64748b; /* Szary kolor */
text-decoration: line-through;
text-decoration-thickness: 2px;
margin-bottom: -5px;
display: block;
font-weight: 500;
}
.promo-code-badge {
font-size: 0.75rem;
color: #10b981; /* Zielony kolor sukcesu */
font-weight: 700;
text-transform: uppercase;
background: rgba(16, 185, 129, 0.1);
padding: 2px 8px;
border-radius: 4px;
margin-top: 4px;
display: inline-block;
border: 1px solid rgba(16, 185, 129, 0.2);
}
/* Opcjonalnie: zmiana koloru głównej ceny na zielony, gdy jest promocja */
.rc-price-val.promo-active {
color: var(--brand-cyan);
}
/* --- RABAT "PIERWSZA FAKTURA" (FIRSTSERVER) — cena /mo: przekreslona + zielona --- */
.rc-price-firstrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rc-price-old {
font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 600;
color: #64748b; text-decoration: line-through; text-decoration-thickness: 2px;
letter-spacing: -0.5px; line-height: 1;
}
.rc-price-now {
font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700;
color: #10b981; letter-spacing: -1px; line-height: 1;
}
.rc-price-permo { color: #98a2b8; font-size: 0.9rem; font-weight: 600; }
.rc-fi-total { color: #e7ecf5; font-weight: 700; }
.rc-fi-billed { color: #98a2b8; }
.fi-promo {
margin-top: 8px; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 7px 10px; border-radius: 10px;
background: linear-gradient(90deg, rgba(34,211,238,0.10), rgba(16,185,129,0.08));
border: 1px solid rgba(34,211,238,0.28);
}
.fi-promo-label {
font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px;
color: #94a3b8; font-weight: 700;
}
.fi-promo-code { font-size: 0.72rem; font-weight: 600; color: #6ee7b7; }
.fi-promo-code b { letter-spacing: 0.5px; color: #a7f3d0; }
/* --- OMNIBUS INFO --- */
.omnibus-info {
margin-top: 15px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.65rem;
color: #64748b;
text-align: left; /* Do lewej */
line-height: 1.3;
display: flex; /* Ustawienie w jednej linii */
flex-wrap: wrap; /* Zabezpieczenie na wąskie ekrany */
gap: 4px; /* Odstęp między tekstem a ceną */
}
.omnibus-info strong {
color: #94a3b8;
font-weight: 600;
}
/* --- TŁO ZANIKAJĄCE DLA NAGŁÓWKA --- */
.header-image-bg {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 100vw; height: 100%;
/* Grafike hero (per gra) ustawia strona inline na tym divie. NIE przez zmienna CSS:
url() w custom property rozwiazuje sie wzgledem tego arkusza (assets/css/), nie dokumentu. */
background-size: cover; background-position: center; background-repeat: no-repeat;
z-index: 0; opacity: 0.3; pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
/* ===== TIER SECTION (premium Wariant B) ===== */
.tier-section {
width: 100%; max-width: 1400px;
margin: -60px auto 60px auto;
position: relative; z-index: 5;
padding: 0 40px;
}
.tier-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
/* --- KARTA --- */
.tier-card {
position: relative;
border-radius: 16px;
overflow: hidden;
background-color: #0b0c10;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 50px -25px rgba(0,0,0,0.6);
display: flex;
flex-direction: column;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
cursor: pointer;
}
.tier-card:hover {
transform: translateY(-5px);
border-color: rgba(255,255,255,0.18);
}
/* Akcenty per-tier (kolor + glow) */
.tier-card[data-tier="budget"] { --tier-color: #10b981; --tier-glow: rgba(16,185,129,0.4); --tier-soft: rgba(16,185,129,0.18); --tier-grad: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.tier-card[data-tier="comfort"] { --tier-color: #22d3ee; --tier-glow: rgba(34,211,238,0.4); --tier-soft: rgba(34,211,238,0.18); --tier-grad: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%); }
.tier-card[data-tier="pro"] { --tier-color: #a78bfa; --tier-glow: rgba(139,92,246,0.4); --tier-soft: rgba(167,139,250,0.18); --tier-grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
/* Karta wyróżniona (.active) */
.tier-card.active {
background-color: #12141a;
border: 1.5px solid var(--tier-color);
box-shadow: 0 30px 80px -30px var(--tier-glow);
}
/* --- HEADER ROW (tytuł + opis po lewej, cena po prawej) --- */
.tier-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.tier-header-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tier-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
color: var(--tier-color);
margin: 0;
}
.tier-subtitle {
font-size: 0.72rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
margin: 0;
}
/* Badge — overlay na hero, ukrywamy na karcie wybranej */
.tier-badge {
display: inline-block;
position: absolute;
top: 12px;
right: 12px;
background: rgba(7,8,12,0.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--tier-color);
border: 1px solid var(--tier-color);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: 999px;
white-space: nowrap;
z-index: 5;
}
/* Etykieta przycisku — zmiana na "Wybrano" gdy karta aktywna */
.tier-btn-label-active { display: none; }
.tier-card.active .tier-btn-label { display: none; }
.tier-card.active .tier-btn-label-active { display: inline; }
/* --- HERO (obszar postaci) --- */
.tier-hero {
position: relative;
height: 210px;
overflow: hidden;
background: transparent;
}
.tier-card.active .tier-hero {
background:
linear-gradient(160deg, var(--tier-soft) 0%, rgba(0,0,0,0) 70%);
}
.tier-hero::before {
content: attr(data-watermark);
position: absolute;
bottom: -14px; right: -6px;
font-family: 'Space Grotesk', sans-serif;
font-size: 86px;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1px var(--tier-color);
opacity: 0.08;
pointer-events: none;
white-space: nowrap;
}
.tier-hero::after {
content: '';
position: absolute;
left: 50%; top: 55%;
transform: translate(-50%, -50%);
width: 220px; height: 220px;
border-radius: 50%;
background: var(--tier-glow);
filter: blur(55px);
opacity: 0.5;
pointer-events: none;
}
.tier-floor {
position: absolute;
left: 50%; bottom: 12px;
transform: translateX(-50%);
width: 55%; height: 12px;
background: radial-gradient(ellipse at center, var(--tier-soft) 0%, transparent 70%);
filter: blur(6px);
pointer-events: none;
}
.tier-img {
position: absolute;
left: 50%; bottom: 0;
transform: translateX(-50%);
height: 105%;
width: auto;
object-fit: contain;
object-position: bottom;
filter:
drop-shadow(0 18px 22px rgba(0,0,0,0.6))
drop-shadow(0 0 22px var(--tier-glow));
pointer-events: none;
z-index: 2;
}
/* --- DIVIDER --- */
.tier-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--tier-color) 50%, transparent 100%);
opacity: 0.45;
width: 100%;
}
/* --- BODY (cena + chips + CTA) --- */
.tier-body {
padding: 16px 20px 18px;
display: flex;
flex-direction: column;
gap: 12px;
background: transparent;
}
.tier-price-block {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
text-align: right;
flex-shrink: 0;
}
.tier-price-label {
font-size: 0.62rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.tier-price-row {
font-family: 'Space Grotesk', sans-serif;
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 4px;
margin-top: 2px;
}
.tier-price-row .tier-price-val {
font-size: 1.7rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.tier-price-row .tier-price-cur {
font-size: 0.8rem;
color: var(--tier-color);
font-weight: 600;
}
.tier-price-foot {
font-size: 0.65rem;
color: #64748b;
margin-top: 1px;
}
/* Spec chips */
.tier-chips { display: flex; flex-direction: row; gap: 8px; }
.tier-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: rgba(255,255,255,0.025);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.05);
flex: 1 1 0;
min-width: 0;
}
.tier-chip-icon {
width: 28px; height: 28px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
color: var(--tier-color);
flex-shrink: 0;
}
.tier-chip-icon svg { width: 16px; height: 16px; }
.tier-chip-body { flex: 1; min-width: 0; }
.tier-chip-label {
font-size: 0.625rem;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
}
.tier-chip-val {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: #fff;
font-weight: 600;
margin-top: 2px;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- CTA --- */
.tier-btn {
padding: 12px 18px;
border-radius: 12px;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-weight: 700;
font-size: 0.875rem;
color: #fff;
background: transparent;
border: 1px solid var(--tier-color);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all .3s ease;
}
.tier-btn:hover {
background: rgba(255,255,255,0.04);
}
.tier-btn svg { width: 18px; height: 18px; }
.tier-card.active .tier-btn {
background: var(--tier-grad);
border: none;
box-shadow: 0 10px 28px -8px var(--tier-glow);
}
.tier-card.active .tier-btn:hover {
filter: brightness(1.08);
}
/* Flagi */
.flag-icon { width: 20px; height: auto; border-radius: 2px; }
/* --- BILLING STRIP --- */
.billing-container {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 16px;
/* Dwa rodzaje sticky dla pewności: */
position: -webkit-sticky;
position: sticky;
/* Odstęp pod navbarem (navbar ma 84px) — mały oddech */
top: 96px;
z-index: 99;
}
/* Baner promo aktywny -> navbar schodzi o --promo-height; sticky pasek musi zejsc tyle samo. */
body.has-promo .billing-container { top: calc(96px + var(--promo-height)); }
/* --- NOWY WYGLĄD PILLA ROZLICZEŃ --- */
.billing-panel {
background: rgba(15, 17, 21, 0.75);
backdrop-filter: blur(12px); /* Delikatne szkło pod panelem */
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px; /* Zaokrąglone rogi całego panelu */
padding: 8px 16px 10px 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5); /* Cień oddzielający pasek od tła */
}
.billing-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.65rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
margin-top: 0px;
}
/* Korygujemy nieco stare tło przycisków, żeby nie gry€o się z panelem */
.billing-bg {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px; /* Lekki odstęp między przyciskami */
padding: 4px; /* Wewnętrzny margines, żeby przyciski nie dotykały krawędzi */
border-radius: 50px; /* Mocne zaokrąglenie boków */
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.bill-btn {
padding: 7px 18px; border-radius: 40px; border: none; background: transparent; color: var(--text-secondary);
font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: 'Inter', sans-serif; font-size: 0.8rem;
display: flex; align-items: center; gap: 6px; position: relative;
}
.bill-btn:hover { color: #fff; }
.bill-btn.active { background: var(--brand-gradient); color: #fff; box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3); }
.bill-badge { font-size: 0.65rem; background: #22c55e; color: #fff; padding: 2px 5px; border-radius: 4px; font-weight: 700; }
.bill-btn.active .bill-badge { background: #15803d; color: #fff; }
.loc-flag { width: 20px; height: 14px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); display: inline-block; }
@media (max-width: 650px) {
.billing-container {
top: 90px;
margin-top: 12px;
margin-bottom: 12px;
}
body.has-promo .billing-container { top: calc(90px + var(--promo-height)); }
.billing-panel {
padding: 8px 10px 10px;
gap: 6px;
border-radius: 18px;
width: min(340px, 92vw);
}
.billing-title { font-size: 0.6rem; letter-spacing: 0.6px; }
/* Na telefonie okresy w siatce 2×2 zamiast jednego rzędu */
.billing-bg {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
border-radius: 14px;
padding: 6px;
}
.bill-btn { justify-content: center; padding: 9px 6px; font-size: 0.72rem; gap: 4px; }
.bill-badge { font-size: 0.58rem; padding: 1px 4px; }
}
/* --- STEP MARKERS (poradnik wyboru) --- */
.step-marker {
position: absolute;
top: 40px;
width: 240px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
text-align: center;
pointer-events: none;
z-index: 6;
font-family: 'Space Grotesk', sans-serif;
}
.step-marker-left { left: -200px; }
.step-marker-right { right: -200px; }
.step-num {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--brand-gradient);
color: #fff;
font-size: 1.25rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(34, 211, 238, 0.35);
position: relative;
}
.step-num::after {
content: 'STEP';
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-size: 0.6rem;
font-weight: 600;
color: #64748b;
letter-spacing: 0.15em;
}
.step-text {
font-size: 1rem;
color: #fff;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
white-space: nowrap;
}
.step-text small {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
color: var(--text-secondary);
font-weight: 400;
margin-top: 4px;
letter-spacing: 0;
white-space: normal;
}
.step-arrow {
width: 120px;
height: auto;
margin-top: 4px;
opacity: 0.9;
filter: invert(1) drop-shadow(0 0 10px rgba(34, 211, 238, 0.45));
}
.step-marker-right .step-arrow { transform: scaleX(-1); }
@media (max-width: 1600px) {
.step-marker { display: none; }
}
/* --- SUGGEST MARKER (luźna sugestia przy CTA kalkulatora) --- */
.suggest-marker {
position: absolute;
right: -200px;
top: -110px;
width: 240px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
pointer-events: none;
z-index: 6;
font-family: 'Space Grotesk', sans-serif;
transform: rotate(5deg);
}
.suggest-text {
font-size: 1.35rem;
color: var(--brand-cyan);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
text-shadow: 0 0 18px rgba(34, 211, 238, 0.6);
}
.suggest-text small {
display: block;
font-family: 'Inter', sans-serif;
font-size: 0.82rem;
color: var(--text-secondary);
font-weight: 400;
margin-top: 6px;
text-shadow: none;
letter-spacing: 0;
}
.suggest-arrow {
width: 130px;
height: auto;
opacity: 0.95;
filter: invert(1) drop-shadow(0 0 12px rgba(34, 211, 238, 0.5));
transform: scaleX(-1);
}
@media (max-width: 1600px) {
.suggest-marker { display: none; }
}
/* --- CENNIK (GRID - SCROLL TARGET) --- */
.mc-grid-section {
width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px 80px 40px; position: relative; z-index: 4;
}
/* Offset dla scrollowania (żeby navbar nie zasłaniał) */
#pricingGrid {
scroll-margin-top: 240px; /* Kluczowe dla poprawnego przewijania */
}
.mc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* ============================================================= */
/* --- GAMEHOST+ BANNER (Game Swaps promo, above pricing grid) --- */
/* ============================================================= */
.ghplus-banner {
position: relative;
overflow: hidden;
border-radius: 16px;
margin-bottom: 28px;
padding: 22px 30px;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 36px;
border: 1px solid rgba(129, 140, 248, 0.35);
background:
radial-gradient(ellipse at 92% 15%, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0) 55%),
radial-gradient(ellipse at 6% 120%, rgba(34, 211, 238, 0.14) 0%, rgba(34, 211, 238, 0) 55%),
linear-gradient(135deg, #14122b 0%, #0b0f1c 58%, #0a0f17 100%);
box-shadow:
0 24px 60px -24px rgba(99, 102, 241, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* gradient sheen line along the top edge */
.ghplus-banner::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(129, 140, 248, 0.7) 30%, rgba(34, 211, 238, 0.7) 70%, transparent 100%);
}
.ghplus-main { position: relative; z-index: 2; min-width: 0; }
.ghplus-logo-img { height: 40px; width: auto; display: block; margin-bottom: 14px; }
.ghplus-desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; max-width: 500px; margin-bottom: 16px; }
.ghplus-desc strong { color: #fff; font-weight: 600; }
/* compact inline steps — guides users without adding height */
.ghplus-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.ghplus-steps .st { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; font-weight: 600; color: #e2e8f0; }
.ghplus-steps .st b {
width: 20px; height: 20px; flex-shrink: 0; border-radius: 6px; display: grid; place-items: center;
font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; font-weight: 700; color: #0a0f17;
background: linear-gradient(135deg, #a5b4fc 0%, #22d3ee 100%);
}
.ghplus-steps .sep { color: rgba(148, 163, 184, 0.5); font-weight: 400; }
/* --- Right-side 3-column game carousel (vertical marquee) --- */
.gcar {
position: relative; z-index: 2; flex-shrink: 0;
display: grid; grid-template-columns: repeat(3, 78px); gap: 12px;
height: 172px; overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.gcar-col { overflow: hidden; }
.gcar-track { display: flex; flex-direction: column; gap: 12px; will-change: transform; }
.gcar-col:nth-child(1) .gcar-track { animation: gcarUp 20s linear infinite; }
.gcar-col:nth-child(2) .gcar-track { animation: gcarDown 24s linear infinite; }
.gcar-col:nth-child(3) .gcar-track { animation: gcarUp 18s linear infinite; }
@keyframes gcarUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes gcarDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.gcar-tile {
width: 78px; height: 104px; border-radius: 10px; overflow: hidden; flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(145deg, #1c2333 0%, #0f1420 100%);
box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.7);
}
.gcar-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
.ghplus-banner { grid-template-columns: 1fr; padding: 24px 24px; row-gap: 22px; }
.gcar { grid-template-columns: repeat(3, 1fr); width: 100%; height: 150px; }
.gcar-tile { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}
@media (max-width: 480px) {
.ghplus-banner { padding: 22px 18px; }
.ghplus-logo-img { height: 34px; }
}
.retro-card {
background-color: #121212; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 25px;
display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease, border-color 0.3s ease; min-height: 480px;
}
.retro-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 20px 40px rgba(0,0,0,0.6); }
.retro-card.popular { border: 1px solid var(--brand-cyan); background: rgba(34, 211, 238, 0.03); box-shadow: 0 0 30px rgba(34, 211, 238, 0.1); }
/* --- WIDE CARD (Diamond — premium flagship redesign) --- */
.retro-card.wide {
grid-column: 1 / -1;
position: relative;
overflow: hidden;
min-height: 240px;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
row-gap: 18px;
column-gap: 36px;
padding: 32px 40px;
border: 1px solid rgba(34, 211, 238, 0.35);
background:
radial-gradient(ellipse at 88% 50%, rgba(34, 211, 238, 0.16) 0%, rgba(34, 211, 238, 0) 55%),
radial-gradient(ellipse at 12% 110%, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0) 55%),
linear-gradient(135deg, #0b1622 0%, #0a0f17 100%);
box-shadow:
0 30px 80px -20px rgba(34, 211, 238, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.retro-card.wide:hover {
transform: translateY(-3px);
border-color: rgba(34, 211, 238, 0.6);
box-shadow:
0 40px 100px -20px rgba(34, 211, 238, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* Watermark "16 GB" w tle */
.retro-card.wide::before {
content: "16 GB";
position: absolute;
right: -10px; top: 50%;
transform: translateY(-50%);
font-family: 'Space Grotesk', sans-serif;
font-size: 180px;
font-weight: 700;
letter-spacing: -0.05em;
color: transparent;
-webkit-text-stroke: 1px var(--brand-cyan);
opacity: 0.08;
line-height: 1;
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
/* Siatka punktowa */
.retro-card.wide::after {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(34, 211, 238, 0.08) 1px, transparent 0);
background-size: 24px 24px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.retro-card.wide > * { position: relative; z-index: 1; }
/* New badge — pigułka w narożniku */
.retro-card.wide .new-badge {
top: 16px; left: 24px;
transform: none;
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
color: #fff;
border-radius: 999px;
padding: 5px 14px;
font-size: 0.68rem;
letter-spacing: 0.1em;
box-shadow: 0 6px 18px -4px rgba(34, 211, 238, 0.55);
}
/* Header (ikona + tytuł) */
.retro-card.wide .rc-header {
margin-bottom: 0; height: auto;
flex: 0 0 auto; min-width: 280px;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
gap: 22px;
text-align: left;
}
.retro-card.wide .rc-block-img {
width: 110px;
margin: 0;
filter:
drop-shadow(0 0 28px rgba(34, 211, 238, 0.55))
drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
animation: diamond-float 4.5s ease-in-out infinite;
}
@keyframes diamond-float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-6px) rotate(2deg); }
}
.retro-card.wide .rc-titles {
display: flex; flex-direction: column; justify-content: center;
}
.retro-card.wide .rc-titles::before {
content: "★ Budget Bestseller";
display: block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-cyan);
margin-bottom: 8px;
}
.retro-card.wide .rc-titles h3 {
font-size: 2rem;
margin-bottom: 6px;
background: linear-gradient(135deg, #ffffff 0%, #22d3ee 110%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.retro-card.wide .rc-titles p {
max-width: 240px;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* Spec grid */
.retro-card.wide .spec-grid {
margin-bottom: 0; flex: 1; max-width: 480px; gap: 14px;
align-self: center;
}
.retro-card.wide .spec-box {
padding: 11px 14px;
column-gap: 11px;
background: rgba(34, 211, 238, 0.04);
border: 1px solid rgba(34, 211, 238, 0.15);
border-radius: 12px;
transition: all .25s ease;
}
.retro-card.wide .spec-box:hover {
background: rgba(34, 211, 238, 0.08);
border-color: rgba(34, 211, 238, 0.4);
transform: translateY(-2px);
}
.retro-card.wide .spec-box .spec-icon { color: var(--brand-cyan); }
.retro-card.wide .spec-val { font-size: 1.15rem; font-weight: 700; color: #fff; }
.retro-card.wide .spec-label { color: var(--text-muted); font-size: 0.7rem; }
.retro-card.wide .rc-list { display: none; }
/* CTA */
.retro-card.wide .rc-cta-group {
display: flex; flex-direction: column; align-items: stretch; justify-content: center;
gap: 14px; flex: 0 0 auto; min-width: 230px;
}
.retro-card.wide .rc-price-box {
margin-bottom: 0;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 2px;
min-width: 0; width: 100%;
text-align: right;
}
.retro-card.wide .rc-price-val {
font-size: 2.6rem;
font-weight: 700;
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}
.retro-card.wide .rc-btn {
margin-top: 0; width: 100%; padding: 16px 32px;
background: linear-gradient(135deg, #22d3ee 0%, #3b82f6 100%);
border: none;
color: #fff;
font-weight: 700;
border-radius: 12px;
box-shadow: 0 10px 28px -8px rgba(34, 211, 238, 0.55);
transition: all .25s ease;
}
.retro-card.wide .rc-btn:hover {
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 14px 36px -8px rgba(34, 211, 238, 0.7);
}
.retro-card.wide .rc-btn::after {
content: " →";
margin-left: 6px;
display: inline-block;
transition: transform .25s ease;
}
.retro-card.wide .rc-btn:hover::after { transform: translateX(3px); }
/* Omnibus pod całą kartą - pełna szerokość zamiast 4. elementu w wierszu */
.retro-card.wide .omnibus-info {
flex-basis: 100%;
width: 100%;
margin-top: 6px;
padding-top: 14px;
justify-content: flex-end;
text-align: right;
font-size: 0.7rem;
}
/* Price-box w wide — lepsze odstępy gdy promocja jest aktywna */
.retro-card.wide .rc-price-box .old-price {
font-size: 1rem;
margin-bottom: 2px;
}
.retro-card.wide .rc-price-box .promo-code-badge {
margin-top: 6px;
font-size: 0.72rem;
}
.retro-card.wide .rc-price-box .rc-price-period {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 4px !important;
}
.new-badge {
position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
background: var(--brand-cyan); color: #000;
font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 4px 18px;
border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
letter-spacing: 0.5px; box-shadow: 0 2px 10px rgba(34, 211, 238, 0.35);
}
.pop-badge {
position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--brand-cyan); color: #000;
font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 4px 16px;
border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
}
.rc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px; height: 60px; }
.rc-titles h3 { font-family: 'Space Grotesk'; font-size: 1.4rem; color: #fff; margin: 0 0 5px 0; font-weight: 700; }
.rc-titles p { font-size: 0.85rem; color: var(--text-muted); margin: 0; line-height: 1.2; max-width: 160px; }
.rc-block-img {
width: 64px; height: auto; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); margin-top: -5px; margin-right: -5px;
}
.retro-card:hover .rc-block-img { transform: translateY(-10px) scale(1.1) rotate(5deg); }
.rc-price-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 25px; }
.rc-price-val { font-family: 'Space Grotesk'; font-size: 2.2rem; font-weight: 700; color: var(--brand-cyan); letter-spacing: -1px; line-height: 1; }
.rc-price-period {
font-size: 0.9rem; font-weight: 500; color: var(--text-muted); background: none; border: none; padding: 0; border-radius: 0;
}
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.spec-box { background: rgba(255,255,255,0.05); border-radius: 8px; }
/* Wiersz 1 (RAM, vCPU) — pionowo, nieco wyzsze kafelki */
.spec-box:nth-child(-n+2) {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 5px; padding: 13px 6px;
}
/* Wiersz 2 (dysk, backupy) — poziomo, kompaktowo; troche wiekszy odstep wartosc<->podpis */
.spec-box:nth-child(n+3) {
display: grid; grid-template-columns: auto 1fr; align-items: center;
column-gap: 9px; row-gap: 4px; padding: 9px 12px; text-align: left;
}
.spec-box:nth-child(n+3) .spec-icon { grid-column: 1; grid-row: 1 / 3; }
.spec-box:nth-child(n+3) .spec-val { grid-column: 2; grid-row: 1; }
.spec-box:nth-child(n+3) .spec-label { grid-column: 2; grid-row: 2; }
.spec-icon { color: var(--text-secondary); width: 17px; height: 17px; }
.spec-val { font-weight: 700; color: #fff; font-size: 0.9rem; line-height: 1.15; }
.spec-label { font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase; line-height: 1.12; }
.rc-list { list-style: none; padding: 0; margin-bottom: 25px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.rc-item { display: flex; align-items: center; gap: 10px; color: #94a3b8; font-size: 0.85rem; font-weight: 500; }
.rc-check { color: var(--brand-cyan); width: 16px; height: 16px; flex-shrink: 0; }
/* --- GameHost+ "Game Swaps" feature row (w liście każdego pakietu) --- */
.rc-item-swap { color: #e2e8f0; font-weight: 600; }
.rc-item-swap .ghp-badge { height: 15px; width: auto; flex-shrink: 0; vertical-align: middle; }
.gh-info { position: relative; display: inline-flex; align-items: center; margin-left: 2px; cursor: help; color: #64748b; transition: color .2s ease; }
.gh-info:hover, .gh-info:focus-visible { color: var(--brand-cyan); outline: none; }
.gh-info > svg { width: 15px; height: 15px; }
.gh-tip {
position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
width: 268px; max-width: 78vw; z-index: 40; pointer-events: none;
opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
background: linear-gradient(160deg, #141a2b 0%, #0d1119 100%);
border: 1px solid rgba(129, 140, 248, 0.35); border-radius: 12px; padding: 14px 15px;
box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.75);
text-align: left; white-space: normal;
}
.gh-info:hover .gh-tip, .gh-info:focus-within .gh-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* strzałka tooltipa */
.gh-tip::after {
content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent; border-top-color: #0d1119;
}
.gh-tip img { height: 20px; width: auto; display: block; margin-bottom: 9px; }
.gh-tip strong { display: block; color: #fff; font-size: 0.9rem; font-weight: 700; margin-bottom: 5px; font-family: 'Space Grotesk', sans-serif; }
.gh-tip p { color: #94a3b8; font-size: 0.8rem; line-height: 1.55; font-weight: 400; }
.gh-tip p b { color: var(--brand-cyan); font-weight: 600; }
/* Mobile: tooltip jako wyśrodkowany popover (inset:0 + margin:auto) — nigdy nie wychodzi poza ekran; działa na tap (focus) */
@media (max-width: 640px) {
.gh-tip {
position: fixed; inset: 0; margin: auto;
width: 90vw; max-width: 360px;
height: max-content; max-height: 80vh; overflow-y: auto;
transform: none;
}
.gh-info:hover .gh-tip, .gh-info:focus-within .gh-tip { transform: none; }
.gh-tip::after { display: none; }
}
.rc-btn {
width: 100%; padding: 14px; border-radius: 12px;
background: var(--brand-gradient); color: #fff; font-weight: 700; text-align: center; text-decoration: none; font-size: 0.95rem;
transition: all 0.3s; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3); position: relative; overflow: hidden;
margin-top: auto;
}
.rc-btn::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, 0.25); pointer-events: none; }
.rc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5); }
/* --- INFRASTRUCTURE SPOTLIGHT --- */
.infra-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 40px 80px 40px; position: relative; z-index: 4; }
.infra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.infra-card {
background: rgba(15, 17, 21, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 30px;
display: flex; align-items: flex-start; gap: 20px; position: relative; overflow: hidden; backdrop-filter: blur(10px); transition: border-color 0.3s;
}
.infra-card:hover { border-color: rgba(34, 211, 238, 0.3); }
.infra-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34, 211, 238, 0.08), transparent 40%);
opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 0;
}
.infra-grid:hover .infra-card::before { opacity: 1; }
.infra-icon {
width: 50px; height: 50px; background: rgba(34, 211, 238, 0.1); color: var(--brand-cyan); border-radius: 12px;
display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; position: relative; z-index: 1; border: 1px solid rgba(34, 211, 238, 0.2);
}
.infra-info { position: relative; z-index: 1; }
.infra-info h4 { color: #fff; font-family: 'Space Grotesk'; font-size: 1.2rem; margin-bottom: 8px; margin-top: 0; }
.infra-info p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; line-height: 1.5; }
/* Responsywność */
@media (max-width: 1200px) {
.mc-grid { grid-template-columns: repeat(2, 1fr); }
.infra-grid { grid-template-columns: repeat(2, 1fr); }
.retro-card.wide { flex-direction: column; align-items: stretch; gap: 20px; padding: 28px; min-height: 0; }
.retro-card.wide::before { font-size: 130px; right: -8px; }
.retro-card.wide .rc-header {
flex-direction: row; min-width: 0; align-items: center;
height: auto; margin-bottom: 0; gap: 18px; justify-content: flex-start;
}
.retro-card.wide .rc-block-img { width: 70px; margin: 0; }
.retro-card.wide .rc-titles h3 { font-size: 1.5rem; }
.retro-card.wide .rc-titles p { max-width: none; }
.retro-card.wide .rc-cta-group { min-width: 0; gap: 14px; align-items: stretch; }
.retro-card.wide .rc-price-box {
margin-bottom: 0; min-width: 0;
flex-direction: row; align-items: baseline;
justify-content: space-between; gap: 8px; text-align: left;
order: -1;
}
.retro-card.wide .rc-price-val { font-size: 2.2rem; }
.retro-card.wide .spec-grid { margin-bottom: 0; max-width: none; gap: 10px; }
.retro-card.wide .spec-box { padding: 12px 6px; }
.retro-card.wide .rc-list { display: flex; }
.retro-card.wide .rc-btn { width: 100%; padding: 14px; margin-top: 0; }
.retro-card.wide .omnibus-info {
justify-content: flex-start;
text-align: left;
padding-top: 10px;
margin-top: 0;
}
}
@media (max-width: 768px) {
.retro-card.wide { padding: 22px; gap: 16px; border-radius: 14px; }
.retro-card.wide::before { font-size: 96px; right: -6px; opacity: 0.06; }
.retro-card.wide::after { background-size: 18px 18px; opacity: 0.35; }
.retro-card.wide .new-badge { top: 12px; left: 14px; padding: 4px 10px; font-size: 0.6rem; }
.retro-card.wide .rc-header { gap: 14px; }
.retro-card.wide .rc-block-img { width: 60px; animation: none; }
.retro-card.wide .rc-titles::before { font-size: 0.58rem; margin-bottom: 6px; letter-spacing: 0.14em; }
.retro-card.wide .rc-titles h3 { font-size: 1.3rem; margin-bottom: 4px; }
.retro-card.wide .rc-titles p { font-size: 0.82rem; }
.retro-card.wide .spec-grid { gap: 8px; }
.retro-card.wide .spec-box { padding: 10px 4px; }
.retro-card.wide .spec-val { font-size: 1rem; }
.retro-card.wide .spec-label { font-size: 0.62rem; }
.retro-card.wide .rc-price-val { font-size: 1.9rem; }
.retro-card.wide .rc-btn { padding: 13px; font-size: 0.9rem; }
}
@media (max-width: 480px) {
.retro-card.wide { padding: 18px; gap: 14px; }
.retro-card.wide::before { font-size: 72px; opacity: 0.05; }
.retro-card.wide .rc-header { flex-direction: row-reverse; justify-content: flex-end; }
.retro-card.wide .rc-block-img { width: 52px; }
.retro-card.wide .rc-titles h3 { font-size: 1.2rem; }
.retro-card.wide .rc-titles p { font-size: 0.78rem; }
.retro-card.wide .spec-grid { grid-template-columns: 1fr; gap: 6px; }
.retro-card.wide .spec-box {
flex-direction: row; justify-content: flex-start;
align-items: center; gap: 10px;
padding: 10px 12px;
}
.retro-card.wide .spec-box .spec-icon { margin: 0; }
.retro-card.wide .spec-val { font-size: 0.95rem; }
.retro-card.wide .rc-price-box {
flex-direction: column; align-items: flex-start; gap: 2px;
}
.retro-card.wide .rc-price-val { font-size: 1.7rem; }
.retro-card.wide .rc-btn { padding: 12px; font-size: 0.88rem; }
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .infra-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) {
.mc-grid { grid-template-columns: 1fr; }
.page-header { padding-top: 140px; padding-bottom: 40px; }
.tier-section { margin-top: -20px; padding: 0 20px; }
.mc-grid-section, .infra-section { padding: 0 20px 60px 20px; }
}
/* --- NOWA SEKCJA CTA (Z RENDEREM) --- */
.cta-section {
width: 100%; max-width: 1400px; margin: 0 auto; padding: 40px 40px 100px 40px;
position: relative; z-index: 4;
}
.cta-container {
display: grid;
grid-template-columns: 1fr 1fr; /* Podział na dwie kolumny: tekst i obraz */
align-items: center;
gap: 40px;
/* Dodajemy subtelne tło i ramkę, żeby sekcja się wyróżniała */
background: linear-gradient(90deg, rgba(15, 17, 21, 0.6) 0%, rgba(15, 17, 21, 0.1) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 30px;
padding: 60px;
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
/* Dodatkowy efekt "glow" za renderem */
.cta-container::before {
content: ''; position: absolute; top: 50%; right: 10%; transform: translateY(-50%);
width: 300px; height: 300px;
background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
pointer-events: none; z-index: 0;
}
.cta-content { position: relative; z-index: 2; }
.cta-title {
font-family: 'Space Grotesk'; font-size: 3rem; font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.cta-text {
font-size: 1.1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 30px; max-width: 500px;
}
.cta-image-wrapper {
position: relative; z-index: 2;
display: flex; justify-content: center;
}
.cta-render {
width: 100%; max-width: 450px; height: auto;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); /* Cień pod postacią */
transform: scale(1.1) rotate(-2deg); /* Lekkie powiększenie i obrót dla dynamiki */
transition: transform 0.5s ease;
}
/* Lekka animacja renderu po najechaniu na sekcję */
.cta-container:hover .cta-render {
transform: scale(1.15) rotate(0deg) translateY(-10px);
}
/* Responsywność dla nowej sekcji */
@media (max-width: 900px) {
.cta-container {
grid-template-columns: 1fr; /* Na mobilkach jedna kolumna */
text-align: center;
padding: 40px 30px;
gap: 20px;
}
.cta-text { margin: 0 auto 30px auto; }
.cta-title { font-size: 2.2rem; }
.cta-render { margin-top: -20px; max-width: 350px; transform: scale(1); }
.cta-container::before { right: 50%; transform: translate(50%, -50%); } /* Centrujemy glow */
.cta-container:hover .cta-render { transform: scale(1.05) translateY(-5px); }
}
/* --- KREATOR SERWERA (3 kroki) --- */
.kreator2-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 44px 40px 80px 40px; position: relative; z-index: 4; }
.kreator2-box {
background: radial-gradient(120% 120% at 50% 0%, rgba(34,211,238,0.08) 0%, transparent 42%), rgba(15, 17, 21, 0.55);
border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 28px;
padding: 48px 48px 44px 48px; backdrop-filter: blur(10px); position: relative; overflow: hidden;
}
.kreator2-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 42px; }
.kreator2-title { font-family: 'Space Grotesk'; font-size: 2.2rem; font-weight: 700; color: #fff; line-height: 1.15; margin: 0; }
.kreator2-title span { color: var(--brand-cyan); }
.kreator2-sub { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.kreator2-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0 16px; }
.k2-step { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 26px 24px; transition: border-color .3s ease, transform .3s ease, background .3s ease; }
.k2-step:hover { border-color: rgba(34,211,238,0.35); transform: translateY(-5px); background: rgba(34,211,238,0.045); }
.k2-icon { width: 50px; height: 50px; border-radius: 14px; background: rgba(34,211,238,0.1); border: 1px solid rgba(34,211,238,0.25); display: grid; place-items: center; color: var(--brand-cyan); margin-bottom: 16px; animation: k2icon 6s ease-in-out infinite; }
.k2-icon svg { width: 24px; height: 24px; }
.kreator2-flow .k2-step:nth-child(1) .k2-icon { animation-delay: 0s; }
.kreator2-flow .k2-step:nth-child(3) .k2-icon { animation-delay: 2s; }
.kreator2-flow .k2-step:nth-child(5) .k2-icon { animation-delay: 4s; }
@keyframes k2icon {
0%, 28% { transform: scale(1.1); background: rgba(34,211,238,0.22); border-color: rgba(34,211,238,0.55); box-shadow: 0 0 22px rgba(34,211,238,0.35); }
40%, 100% { transform: scale(1); background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.25); box-shadow: 0 0 0 rgba(34,211,238,0); }
}
.k2-num { font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-cyan); margin-bottom: 6px; }
.k2-step h4 { font-family: 'Space Grotesk'; font-size: 1.15rem; color: #fff; margin: 0 0 8px 0; }
.k2-step p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; margin: 0; }
.k2-arrow { display: flex; align-items: center; justify-content: center; color: rgba(34,211,238,0.55); }
.k2-arrow svg { width: 26px; height: 26px; animation: k2arrow 2s ease-in-out infinite; }
.k2-arrow.a2 svg { animation-delay: .45s; }
@keyframes k2arrow { 0%,100% { transform: translateX(0); opacity: .4; } 50% { transform: translateX(5px); opacity: 1; } }
@keyframes k2arrowDown { 0%,100% { transform: rotate(90deg) translateX(0); opacity: .4; } 50% { transform: rotate(90deg) translateX(5px); opacity: 1; } }
@media (max-width: 860px) {
.kreator2-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; }
.kreator2-flow { grid-template-columns: 1fr; gap: 12px 0; }
.k2-arrow { padding: 2px 0; }
.k2-arrow svg { animation-name: k2arrowDown; }
}
@media (max-width: 560px) {
.kreator2-section { padding: 30px 20px 60px 20px; }
.kreator2-box { padding: 32px 22px 28px 22px; }
.kreator2-title { font-size: 1.7rem; }
}
/* --- SEKCJA SILNIKÓW (ENGINES) --- */
.engines-section {
width: 100%; max-width: 1400px; margin: 0 auto;
padding: 80px 40px;
position: relative; z-index: 4;
}
.eng-header {
text-align: center; margin-bottom: 50px;
}
.eng-header h2 {
font-family: 'Space Grotesk'; font-size: 2.5rem; color: #fff; margin-bottom: 15px;
}
.eng-header span { color: var(--brand-cyan); }
.eng-header p { color: var(--text-secondary); font-size: 1.1rem; }
.eng-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.eng-card {
background: rgba(15, 17, 21, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 20px;
display: flex; align-items: center; gap: 15px;
transition: all 0.3s ease;
cursor: default;
backdrop-filter: blur(10px);
}
.eng-card:hover {
border-color: var(--brand-cyan);
background: rgba(34, 211, 238, 0.05);
transform: translateY(-3px);
box-shadow: 0 10px 30px -5px rgba(0,0,0,0.5);
}
.eng-icon {
width: 48px; height: 48px;
border-radius: 10px;
object-fit: contain;
/* Domyślne tło dla ikon, jeśli są przezroczyste */
background: rgba(255,255,255,0.05);
padding: 8px;
}
.eng-info { display: flex; flex-direction: column; gap: 4px; }
.eng-name {
color: #fff; font-weight: 700; font-family: 'Space Grotesk'; font-size: 1.1rem;
}
.eng-tags { display: flex; gap: 5px; }
.eng-tag {
font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
padding: 2px 8px; border-radius: 4px;
background: rgba(255,255,255,0.1); color: var(--text-muted);
}
/* Kolory tagów dla konkretnych typów */
.eng-card:hover .eng-tag { color: #fff; background: rgba(255,255,255,0.2); }
/* Responsywność */
@media (max-width: 650px) {
.engines-section { padding: 40px 20px; }
.eng-header h2 { font-size: 2rem; }
}
/* --- KALKULATOR CTA (LEJEK KONWERSJI Z RENDEREM) --- */
.calculator-cta-wrapper {
width: 100%;
max-width: 1400px;
margin: -20px auto 60px auto;
padding: 0 40px;
position: relative;
z-index: 5;
}
.calc-cta-content {
position: relative;
background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(15, 17, 21, 0.9) 100%);
border: 1px solid rgba(34, 211, 238, 0.25);
border-radius: 20px;
/* Zwiększony padding z lewej do 260px - robimy bezpieczną "dziurę" na render! */
padding: 35px 50px 35px 260px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
backdrop-filter: blur(12px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 30px rgba(34, 211, 238, 0.03);
transition: transform 0.3s ease, border-color 0.3s ease;
}
/* Styl postaci Alex */
.calc-helper-img {
position: absolute;
bottom: -15px; /* Schodzimy niżej, żeby zniwelować narysowany w pliku PNG cień */
left: -40px; /* Wysuwamy w lewo, ucinając puste tło pliku PNG */
width: 320px; /* Wymuszamy konkretną szerokość, zamiast wysokości */
height: auto;
pointer-events: none;
z-index: 10;
transform-origin: bottom center; /* Animacja powiększania idzie od dołu do góry */
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.calc-cta-content:hover {
border-color: rgba(34, 211, 238, 0.5);
transform: translateY(-3px);
}
/* Ożywienie postaci przy hoverze na baner */
.calc-cta-content:hover .calc-helper-img {
transform: scale(1.08) rotate(-2deg);
}
.calc-text h3 {
font-family: 'Space Grotesk', sans-serif;
color: #fff;
font-size: 1.6rem;
margin: 0 0 10px 0;
font-weight: 700;
}
.calc-text p {
color: var(--text-secondary);
margin: 0;
font-size: 1rem;
line-height: 1.6;
max-width: 650px;
}
.calc-btn {
width: auto;
padding: 14px 35px;
white-space: nowrap;
background: rgba(34, 211, 238, 0.1);
border: 1px solid var(--brand-cyan);
color: var(--brand-cyan);
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
}
.calc-btn:hover {
background: var(--brand-cyan);
color: #000;
box-shadow: 0 0 25px rgba(34, 211, 238, 0.4);
}
/* --- RWD: RESPONSYWNOŚĆ (TELEFONY I TABLETY) --- */
@media (max-width: 900px) {
.calc-cta-content {
flex-direction: column;
text-align: center;
/* Zmieniamy padding - dużo miejsca na samej górze (100px) */
padding: 100px 30px 35px 30px;
margin-top: 60px; /* Margines na wystającą głowę postaci */
}
.calc-helper-img {
left: 50%; /* Wyśrodkowanie na osi X */
bottom: auto;
top: -90px; /* Alex wskakuje na samą górę baneru */
transform: translateX(-50%);
width: 280px; /* Nieco mniejsza na telefonach */
transform-origin: center center;
}
/* Poprawka animacji dla wyśrodkowanej postaci */
.calc-cta-content:hover .calc-helper-img {
transform: translateX(-50%) scale(1.08) translateY(-5px);
}
.calc-action, .calc-btn {
width: 100%;
}
}
@media (max-width: 650px) {
.calculator-cta-wrapper {
padding: 0 20px;
margin-top: -10px;
}
.calc-text h3 { font-size: 1.4rem; }
.calc-text p { font-size: 0.9rem; }
}
/* --- BENTO ENGINES (ADVANCED GRID) --- */
.bento-section {
width: 100%; max-width: 1400px; margin: 0 auto;
padding: 80px 40px;
position: relative; z-index: 4;
}
.bento-header { margin-bottom: 40px; text-align: left; }
.bento-header h2 { font-family: 'Space Grotesk'; font-size: 2.5rem; color: #fff; margin-bottom: 10px; }
.bento-header span { color: var(--brand-cyan); }
.bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 Kolumny */
grid-auto-rows: minmax(180px, auto);
gap: 20px;
}
/* Styl Bazowy Karty */
.be-card {
background: rgba(12, 14, 20, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 24px;
padding: 25px;
position: relative; overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex; flex-direction: column; justify-content: space-between;
backdrop-filter: blur(12px);
}
/* Hover Effect - Uniesienie i Podświetlenie ramki */
.be-card:hover {
transform: translateY(-5px);
border-color: rgba(34, 211, 238, 0.3);
background: rgba(15, 17, 21, 0.9);
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}
/* Ikona Silnika */
.be-icon {
width: 56px; height: 56px;
background: rgba(255,255,255,0.03);
border-radius: 16px;
padding: 10px;
margin-bottom: 15px;
border: 1px solid rgba(255,255,255,0.05);
transition: all 0.4s ease;
}
.be-card:hover .be-icon {
background: var(--brand-gradient); /* Ikona wypełnia się kolorem na hover */
border-color: transparent;
box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
transform: scale(1.1) rotate(-5deg);
}
.be-icon img { width: 100%; height: 100%; object-fit: contain; }
/* Treść */
.be-info h3 { font-family: 'Space Grotesk'; font-size: 1.4rem; color: #fff; margin: 0 0 5px 0; }
.be-info p { font-size: 0.9rem; color: var(--text-muted); margin: 0; line-height: 1.4; }
/* Tagi */
.be-tags { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.be-tag {
font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
padding: 6px 12px; border-radius: 8px;
background: rgba(255,255,255,0.05); color: var(--text-secondary);
border: 1px solid rgba(255,255,255,0.05);
}
/* Karty "Featured" (Szerokie) */
.be-card.wide {
grid-column: span 2; /* Zajmuje 2 kolumny */
background: linear-gradient(145deg, rgba(20,22,28,0.8), rgba(12,14,20,0.9));
}
/* Wyróżnione mają tło obrazkowe delikatne */
.be-card.wide::after {
content: ''; position: absolute; top: 0; right: 0; width: 60%; height: 100%;
background-size: cover; background-position: center; opacity: 0.1;
mask-image: linear-gradient(to left, black, transparent); -webkit-mask-image: linear-gradient(to left, black, transparent);
pointer-events: none;
}
.be-card.wide[data-bg="paper"]::after { background-image: url('https://assets.papermc.io/brand/papermc_logo.256.png'); }
.be-card.wide[data-bg="fabric"]::after { background-image: url('https://cdn.modrinth.com/data/P7dR8mSH/icon.png'); }
/* Responsywność */
@media (max-width: 1024px) {
.bento-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 650px) {
.bento-grid { grid-template-columns: 1fr; }
.be-card.wide { grid-column: span 1; }
.bento-section { padding: 40px 20px; }
}
/* --- POZOSTAŁE SILNIKI (MARQUEE / KARUZELA) --- */
.engines-marquee-section {
width: 100%; max-width: 1400px; margin: 0 auto;
padding: 0 40px 80px 40px;
position: relative; z-index: 4;
overflow: hidden; /* Ukrywa to co wyjeżdża poza ekran */
}
.marquee-label {
text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px;
}
.marquee-container {
position: relative;
width: 100%;
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
display: flex;
gap: 20px;
width: max-content;
animation: scrollMarquee 40s linear infinite;
}
/* Pauza po najechaniu myszką */
.marquee-container:hover .marquee-track {
animation-play-state: paused;
}
@keyframes scrollMarquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* Przesuwamy o połowę (bo duplikujemy zawartość) */
}
/* Wygląd Mini-Kafelka w karuzeli */
.eng-mini-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 50px; /* Pastylka */
padding: 8px 24px 8px 12px;
display: flex; align-items: center; gap: 12px;
white-space: nowrap;
transition: all 0.3s ease;
cursor: default;
}
.eng-mini-card:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.eng-mini-icon {
width: 32px; height: 32px;
border-radius: 50%;
padding: 4px;
border: 1px solid rgba(255,255,255,0.1);
object-fit: contain;
}
.eng-mini-name {
color: #fff; font-weight: 600; font-family: 'Space Grotesk'; font-size: 1rem;
}
.eng-mini-type {
font-size: 0.75rem; color: var(--text-secondary); margin-left: 5px; opacity: 0.7;
}
/* --- MODPACKS SECTION (FULL CONTROL) --- */
.modpacks-section {
width: 100%; max-width: 1400px; margin: 0 auto; padding: 40px 40px 100px 40px;
position: relative; z-index: 4;
}
.modpack-wrapper {
display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
background: rgba(15, 17, 21, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px; padding: 50px;
backdrop-filter: blur(10px);
align-items: center;
}
.mp-text h2 {
font-family: 'Space Grotesk'; font-size: 2.5rem; color: #fff; line-height: 1.1; margin-bottom: 20px;
}
.mp-text span { color: var(--brand-cyan); }
.mp-text p {
color: var(--text-secondary); font-size: 1rem; line-height: 1.6; margin-bottom: 30px;
}
/* --- MODPACKS: MOZAIKA (hero) --- */
.mpx-section { width: 100%; max-width: 1400px; margin: 0 auto; padding: 20px 40px 90px 40px; position: relative; z-index: 4; }
.mpx-hero-inner { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255,255,255,0.08); background: #0a0d13; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.mpx-hero-bg { position: absolute; inset: -20px 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0.4; z-index: 1; }
.mpx-hero-row { display: flex; gap: 14px; width: max-content; }
.mpx-hero-row.rowA { animation: mpxScrollL 55s linear infinite; }
.mpx-hero-row.rowB { animation: mpxScrollR 68s linear infinite; }
@keyframes mpxScrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mpxScrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mpx-cover { flex: 0 0 auto; width: 132px; height: 132px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg,#16273e,#0e131c); border: 1px solid rgba(255,255,255,0.06); }
.mpx-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpx-hero-overlay { position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse 75% 92% at 50% 50%, rgba(5,6,10,0.5) 0%, rgba(5,6,10,0.85) 52%, rgba(5,6,10,0.97) 100%); }
.mpx-hero-content { position: relative; z-index: 3; text-align: center; padding: 64px 24px; max-width: 700px; }
.mpx-hero-title { font-family: 'Space Grotesk'; font-size: 3.1rem; line-height: 1.04; color: #fff; margin: 0 0 12px 0; letter-spacing: -1px; }
.mpx-hero-title span { color: var(--brand-cyan); }
.mpx-hero-sub { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin: 0 0 20px 0; }
.mpx-hero-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 28px 0; }
.mpx-hero-src { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; font-size: 0.78rem; font-weight: 600; color: #cbd5e1; background: rgba(34,211,238,0.07); border: 1px solid rgba(34,211,238,0.22); }
.mpx-hero-src::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-cyan); box-shadow: 0 0 7px var(--brand-cyan); }
@media (max-width: 768px) {
.mpx-section { padding: 10px 20px 70px 20px; }
.mpx-hero-inner { min-height: 400px; border-radius: 18px; }
.mpx-hero-content { padding: 48px 18px; }
.mpx-hero-title { font-size: 2.2rem; }
.mpx-cover { width: 104px; height: 104px; }
}
/* --- FAQ: ciaśniejsze odstępy, płynniejsza animacja, brak wycieku paddingu --- */
.faq-container { gap: 10px; }
.faq-answer-wrapper { transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-answer-content { padding-bottom: 0; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s; }
.faq-item.active .faq-answer-content { padding-bottom: 24px; }
.faq-icon { transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1), color 0.3s ease; }
/* FAQ: pełna szerokość (jak sąsiednie sekcje) + 2 kolumny po 6 */
.faq-section { max-width: 1400px; padding-left: 40px; padding-right: 40px; }
.faq-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) {
.faq-columns { grid-template-columns: 1fr; gap: 10px; }
.faq-section { padding-left: 20px; padding-right: 20px; }
}
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(11, 12, 16, 0.95); /* Zamiast 0.85 i rozmycia */
/* USUNIĘTO backdrop-filter: blur(8px); */
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease; /* Optymalizacja: wskazujemy, co ma być animowane */
will-change: opacity; /* Karta graficzna z góry wie o animacji */
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content.modal-wide {
background: #12141a;
border: 1px solid rgba(34, 211, 238, 0.2);
border-radius: 24px;
padding: 40px;
max-width: 750px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 40px rgba(34, 211, 238, 0.05);
transform: translateY(20px) scale(0.95);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Krótsza animacja i wskazany konkretnie transform */
will-change: transform; /* Przyspieszenie sprzętowe */
}
/* Ukrycie paska scrolla, ale zachowanie funkcjonalności (dla estetyki) */
.modal-content.modal-wide::-webkit-scrollbar { width: 6px; }
.modal-content.modal-wide::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
.modal-overlay.active .modal-content {
transform: translateY(0) scale(1);
}
.modal-close {
position: absolute;
top: 20px; right: 25px;
color: var(--text-muted);
cursor: pointer;
transition: color 0.3s;
display: flex;
z-index: 10; /* Żeby zawsze był klikalny */
}
.modal-close:hover { color: #fff; }
.modal-header { text-align: center; margin-bottom: 30px; }
.modal-title {
font-family: 'Space Grotesk', sans-serif;
color: #fff;
font-size: 1.8rem;
margin-bottom: 10px;
}
.modal-desc {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.5;
}
/* Siatka dla boksów */
.modal-options-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Wygląd pojedynczego boksu */
.modal-option-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 30px;
display: flex;
flex-direction: column;
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; /* Zamiast transition: all */
will-change: transform, box-shadow;
}
.modal-option-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(34, 211, 238, 0.3);
transform: translateY(-5px);
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.mo-icon {
width: 50px; height: 50px;
background: rgba(34, 211, 238, 0.1);
color: var(--brand-cyan);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.mo-icon svg { width: 24px; height: 24px; }
.mo-icon.panel-icon {
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
.modal-option-card h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.3rem;
color: #fff;
margin-bottom: 10px;
}
.modal-option-card p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 25px;
text-align: justify;
}
/* --- RWD: ULEPSZONA WERSJA NA TELEFONY --- */
@media (max-width: 768px) {
.modal-options-grid {
grid-template-columns: 1fr; /* Boksy układają się jeden pod drugim */
gap: 15px;
}
.modal-content.modal-wide {
padding: 30px 20px;
width: 95%; /* Modal wypełnia więcej miejsca na wąskim ekranie */
border-radius: 20px;
}
.modal-header {
margin-top: 15px; /* Robimy miejsce na krzyżyk zamykania na telefonie */
margin-bottom: 20px;
}
.modal-title { font-size: 1.4rem; line-height: 1.2; }
.modal-desc { font-size: 0.9rem; }
.modal-option-card {
padding: 20px; /* Zmniejszamy grube marginesy wewnętrzne */
}
.mo-icon {
width: 40px; height: 40px;
margin-bottom: 15px;
}
.mo-icon svg { width: 20px; height: 20px; }
.modal-option-card h4 { font-size: 1.1rem; }
.modal-option-card p {
font-size: 0.85rem;
margin-bottom: 15px;
}
}
/* --- STYLIZACJA HOLOGRAFICZNEGO STOSU (NOWY POMYSŁ) --- */
.mp-visual {
position: relative;
min-height: 400px;
/* Ciemne tło z delikatną siatką */
background:
radial-gradient(circle at 50% 50%, rgba(20, 25, 35, 1) 20%, rgba(12, 14, 20, 1) 100%),
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 100% 100%, 40px 40px, 40px 40px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 24px;
display: flex; justify-content: center; align-items: center;
overflow: hidden;
perspective: 1000px; /* Kluczowe dla efektu 3D */
}
/* Kontener 3D */
.holo-stack {
position: relative;
width: 300px; height: 300px;
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(-10deg); /* Lekki obrót sceny */
}
/* Podstawa (Glow) */
.holo-base {
position: absolute;
bottom: 20px; left: 50%; transform: translateX(-50%) rotateX(70deg);
width: 200px; height: 200px;
background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%);
opacity: 0.4;
filter: blur(30px);
animation: pulseGlow 4s infinite ease-in-out;
}
/* Karta Modpacka */
.holo-card {
position: absolute;
width: 180px; height: 240px;
background: rgba(20, 20, 25, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(12px);
box-shadow:
0 20px 40px rgba(0,0,0,0.6),
inset 0 0 0 1px rgba(255,255,255,0.05);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 20px;
transition: transform 0.5s ease;
animation: floatCard 6s ease-in-out infinite;
}
/* Obrazek w karcie */
.holo-card img {
width: 90px; height: 90px;
object-fit: contain;
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
margin-bottom: 15px;
}
/* Tytuł w karcie */
.holo-label {
font-family: 'Space Grotesk'; font-weight: 700; color: #fff; font-size: 1rem;
background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 30px;
}
/* POZYCJONOWANIE KART */
/* Karta Lewa (Tył) - ZMIANA POZYCJI */
.card-left {
top: 50px; /* Lekka korekta wysokości dla lepszego efektu */
left: -60px; /* Ujemna wartość wysuwa kartę w lewo poza kontener */
z-index: 1;
transform: translateZ(-50px) scale(0.9);
border-color: rgba(59, 130, 246, 0.3); /* Blue */
animation-delay: 0s;
}
/* Karta Prawa (Tył) - ZMIANA POZYCJI */
.card-right {
top: 50px; /* Ujednolicona wysokość z lewą kartą */
right: -60px; /* Ujemna wartość wysuwa kartę w prawo poza kontener */
z-index: 1;
transform: translateZ(-50px) scale(0.9);
border-color: rgba(16, 185, 129, 0.3); /* Green */
animation-delay: 1s;
}
/* Karta Środkowa (Przód - Główna) */
.card-center {
top: 20px; left: 50%;
margin-left: -90px; /* Połowa szerokości */
z-index: 3;
transform: translateZ(50px);
border-color: var(--brand-cyan);
box-shadow: 0 0 30px rgba(34, 211, 238, 0.15);
animation-delay: 2s;
}
/* Animacje */
@keyframes floatCard {
0%, 100% { transform: translateY(0) translateZ(var(--z, 0)) scale(var(--s, 1)); }
50% { transform: translateY(-15px) translateZ(var(--z, 0)) scale(var(--s, 1)); }
}
/* Nadpisanie zmiennych dla konkretnych kart */
.card-left { --z: -50px; --s: 0.9; }
.card-right { --z: -50px; --s: 0.9; }
.card-center { --z: 50px; --s: 1.0; }
@keyframes pulseGlow {
0%, 100% { opacity: 0.3; transform: translateX(-50%) rotateX(70deg) scale(1); }
50% { opacity: 0.6; transform: translateX(-50%) rotateX(70deg) scale(1.2); }
}
/* Ukrywamy stare elementy */
.mp-code, .mp-render, .orbital-stage { display: none !important; }
/* Medale tierów (.rc-medal) są w style.css — wspólne dla stron gier, Minecrafta i Hytale. */
/* Inline SVG w kafelkach bento (strony gier — brak logotypów silników jak w MC) */
.be-icon svg { width: 100%; height: 100%; display: block; color: #fff; stroke-width: 1.6; }
/* Oddech między FAQ a stopką na stronach gier */
.faq-section { padding-bottom: 130px !important; }
/* --- Pozostale gry: kazda podstrona dostaje wejscie z innych podstron, a nie tylko
z sitemapy. Bez tego Google zostawial je jako "wykryte, obecnie niezindeksowane". --- */
.more-games { padding: 56px 0 8px; }
.more-games__in { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.more-games h2 { font-size: 1.15rem; margin: 0 0 16px; color: #fff; font-weight: 700; }
.more-games ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.more-games a { display: inline-block; padding: 7px 13px; border-radius: 999px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
color: #94a3b8; font-size: .84rem; text-decoration: none;
transition: color .2s, border-color .2s, background .2s; }
.more-games a:hover { color: #fff; border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.08); }
/* Odnosnik do bazy wiedzy przy liscie innych gier. Regula .more-games a robi z kazdego
odnosnika plakietke, wiec ten w zdaniu trzeba do zdania przywrocic. */
.more-games .wiki-hint { margin: 0 0 14px; color: #94a3b8; font-size: .9rem; line-height: 1.6; }
.more-games .wiki-hint a { display: inline; padding: 0; border: 0; background: none; border-radius: 0;
color: #22d3ee; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.more-games .wiki-hint a:hover { color: #67e8f9; background: none; border-color: transparent; }