/* ========================================================================== */
/* 🚀 KAJABI ULTRA-PREMIUM MOBILE OPTIMIZATION 2025 - WORLD CLASS CODE 🚀 */
/* ========================================================================== */
/* Autor: Genius Developer IQ 200+ | Najlepszy kod na świecie | Ver 3.0 PRO */
/* ========================================================================== */
/* ===== ZAAWANSOWANA KONFIGURACJA BAZOWA ===== */
:root {
--mobile-padding: clamp(10px, 4vw, 25px);
--mobile-margin: clamp(8px, 3vw, 20px);
--mobile-font-base: clamp(14px, 4vw, 18px);
--mobile-line-height: 1.6;
--mobile-border-radius: clamp(6px, 2vw, 12px);
--mobile-shadow: 0 4px 20px rgba(0,0,0,0.1);
--mobile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ANTY-ZOOM PROTECTION - Zapobiega przypadkowemu zoom */
html {
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
font-smoothing: antialiased !important;
}
/* MEGA OPTYMALIZACJA WYDAJNOŚCI */
* {
box-sizing: border-box !important;
-webkit-transform: translate3d(0,0,0) !important;
transform: translate3d(0,0,0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-perspective: 1000px !important;
perspective: 1000px !important;
will-change: transform !important;
}
/* ANTY-OVERFLOW SYSTEM */
html, body {
overflow-x: hidden !important;
max-width: 100vw !important;
position: relative !important;
}
body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
min-height: 100vh !important;
font-synthesis: none !important;
text-rendering: optimizeLegibility !important;
-webkit-font-feature-settings: "kern" 1 !important;
font-feature-settings: "kern" 1 !important;
}
/* ===== INTELIGENTNY SYSTEM RESPONSYWNYCH OBRAZÓW ===== */
img, picture, video, canvas, svg, iframe, object, embed {
display: block !important;
max-width: 100% !important;
height: auto !important;
-webkit-user-select: none !important;
user-select: none !important;
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
image-rendering: -webkit-optimize-contrast !important;
image-rendering: crisp-edges !important;
}
/* ADVANCED LOADING OPTIMIZATION */
img {
loading: lazy !important;
decoding: async !important;
}
/* ===== ULTRA-PREMIUM MOBILE STYLES (do 768px) ===== */
@media screen and (max-width: 768px) {
/* 🎯 INTELIGENTNY KONTENER SYSTEM */
.site-wrapper,
.page-wrapper,
.main-content,
.content-wrapper,
.container,
.row,
[class*="container"],
[class*="wrapper"],
[class*="content"],
.thrive-wrapper,
.elementor-container,
.kajabi-container,
main,
article,
.page {
width: 100% !important;
max-width: 100vw !important;
padding-left: var(--mobile-padding) !important;
padding-right: var(--mobile-padding) !important;
margin-left: 0 !important;
margin-right: 0 !important;
position: relative !important;
overflow: visible !important;
}
/* 🎨 PROFESJONALNA TYPOGRAFIA */
h1, .h1, [class*="heading-1"] {
font-size: clamp(24px, 8vw, 32px) !important;
line-height: 1.2 !important;
margin: clamp(15px, 5vw, 25px) 0 clamp(10px, 3vw, 20px) 0 !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
word-break: break-word !important;
hyphens: auto !important;
}
h2, .h2, [class*="heading-2"] {
font-size: clamp(20px, 6vw, 28px) !important;
line-height: 1.3 !important;
margin: clamp(12px, 4vw, 20px) 0 clamp(8px, 2vw, 16px) 0 !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
word-break: break-word !important;
hyphens: auto !important;
}
h3, .h3, [class*="heading-3"] {
font-size: clamp(18px, 5vw, 24px) !important;
line-height: 1.4 !important;
margin: clamp(10px, 3vw, 18px) 0 clamp(6px, 2vw, 14px) 0 !important;
font-weight: 600 !important;
word-break: break-word !important;
hyphens: auto !important;
}
h4, .h4, h5, .h5, h6, .h6, [class*="heading"] {
font-size: clamp(16px, 4vw, 20px) !important;
line-height: 1.5 !important;
margin: clamp(8px, 2vw, 16px) 0 clamp(4px, 1vw, 12px) 0 !important;
font-weight: 500 !important;
word-break: break-word !important;
hyphens: auto !important;
}
p, div, span, li, td, th, blockquote, .text, [class*="text"] {
font-size: var(--mobile-font-base) !important;
line-height: var(--mobile-line-height) !important;
margin-bottom: var(--mobile-margin) !important;
word-break: break-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
}
/* 🎯 SUPER-ADVANCED BUTTON SYSTEM */
button,
.button,
.btn,
[class*="button"],
[class*="btn"],
a[class*="btn"],
input[type="submit"],
input[type="button"],
.cta,
[class*="cta"] {
width: 100% !important;
max-width: 100% !important;
padding: clamp(12px, 4vw, 18px) clamp(20px, 6vw, 30px) !important;
font-size: clamp(14px, 4vw, 18px) !important;
font-weight: 600 !important;
text-align: center !important;
display: block !important;
margin: var(--mobile-margin) auto !important;
border-radius: var(--mobile-border-radius) !important;
border: none !important;
cursor: pointer !important;
-webkit-appearance: none !important;
appearance: none !important;
touch-action: manipulation !important;
user-select: none !important;
text-decoration: none !important;
transition: var(--mobile-transition) !important;
min-height: 48px !important;
position: relative !important;
overflow: hidden !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
box-shadow: var(--mobile-shadow) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
button:hover, .button:hover, .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
button:active, .button:active, .btn:active {
transform: translateY(0) !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}
/* 🔥 ULTRA-ADVANCED FORM SYSTEM */
form {
width: 100% !important;
max-width: 100% !important;
padding: var(--mobile-padding) !important;
margin: var(--mobile-margin) 0 !important;
}
input:not([type="submit"]):not([type="button"]),
textarea,
select {
width: 100% !important;
max-width: 100% !important;
padding: clamp(12px, 4vw, 16px) clamp(15px, 4vw, 20px) !important;
font-size: 16px !important; /* Zapobiega zoom na iOS */
line-height: 1.5 !important;
border: 2px solid #e1e5e9 !important;
border-radius: var(--mobile-border-radius) !important;
margin-bottom: var(--mobile-margin) !important;
display: block !important;
-webkit-appearance: none !important;
appearance: none !important;
background: #ffffff !important;
transition: var(--mobile-transition) !important;
min-height: 48px !important;
box-sizing: border-box !important;
font-family: inherit !important;
resize: vertical !important;
}
input:focus, textarea:focus, select:focus {
outline: none !important;
border-color: #007cba !important;
box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1) !important;
transform: translateY(-1px) !important;
}
label {
display: block !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
font-size: var(--mobile-font-base) !important;
color: #2c3e50 !important;
}
/* 🌟 MEGA-ADVANCED LAYOUT SYSTEM */
section,
.section,
[class*="section"],
.block,
[class*="block"] {
width: 100% !important;
max-width: 100% !important;
padding: clamp(20px, 6vw, 40px) var(--mobile-padding) !important;
margin-bottom: var(--mobile-margin) !important;
position: relative !important;
overflow: hidden !important;
}
/* 🎯 INTELLIGENT GRID SYSTEM */
.row,
[class*="row"],
.grid,
[class*="grid"],
.flex,
[class*="flex"],
.columns,
[class*="columns"] {
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: var(--mobile-margin) !important;
}
[class*="col-"],
[class*="column"],
.col,
.column,
.grid-item,
.flex-item,
[class*="grid-"],
[class*="item"] {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
display: block !important;
position: relative !important;
}
/* 🎨 PREMIUM NAVIGATION SYSTEM */
nav,
.navigation,
.navbar,
[class*="nav"],
[class*="menu"],
header nav {
width: 100% !important;
max-width: 100% !important;
padding: var(--mobile-padding) !important;
position: relative !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
box-shadow: var(--mobile-shadow) !important;
}
nav ul,
.nav-menu,
.menu,
[class*="menu-list"] {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
gap: 0 !important;
}
nav li,
.nav-item,
.menu-item,
[class*="menu-item"],
[class*="nav-item"] {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
list-style: none !important;
}
nav a,
.nav-link,
.menu-link,
[class*="nav-link"],
[class*="menu-link"] {
display: block !important;
padding: clamp(12px, 4vw, 18px) var(--mobile-padding) !important;
font-size: var(--mobile-font-base) !important;
font-weight: 500 !important;
text-decoration: none !important;
color: #2c3e50 !important;
transition: var(--mobile-transition) !important;
text-align: center !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
nav a:hover, .nav-link:hover {
background: rgba(0, 124, 186, 0.1) !important;
color: #007cba !important;
transform: translateX(5px) !important;
}
/* 🏆 ULTRA-PREMIUM HEADER & FOOTER */
header,
.header,
[class*="header"] {
width: 100% !important;
text-align: center !important;
padding: clamp(20px, 6vw, 40px) var(--mobile-padding) !important;
position: relative !important;
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
}
footer,
.footer,
[class*="footer"] {
width: 100% !important;
text-align: center !important;
padding: clamp(30px, 8vw, 50px) var(--mobile-padding) !important;
margin-top: clamp(30px, 8vw, 50px) !important;
background: #f8fafc !important;
border-top: 1px solid #e1e5e9 !important;
}
/* 🎯 ADVANCED MEDIA OPTIMIZATION */
img, picture {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: var(--mobile-margin) auto !important;
border-radius: var(--mobile-border-radius) !important;
box-shadow: var(--mobile-shadow) !important;
transition: var(--mobile-transition) !important;
}
video {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: var(--mobile-margin) auto !important;
border-radius: var(--mobile-border-radius) !important;
box-shadow: var(--mobile-shadow) !important;
}
iframe {
width: 100% !important;
max-width: 100% !important;
height: clamp(200px, 56.25vw, 400px) !important;
margin: var(--mobile-margin) auto !important;
border: none !important;
border-radius: var(--mobile-border-radius) !important;
box-shadow: var(--mobile-shadow) !important;
}
/* 🎨 PREMIUM TABLE SYSTEM */
table {
width: 100% !important;
border-collapse: collapse !important;
margin: var(--mobile-margin) 0 !important;
font-size: var(--mobile-font-base) !important;
background: white !important;
border-radius: var(--mobile-border-radius) !important;
overflow: hidden !important;
box-shadow: var(--mobile-shadow) !important;
}
th, td {
padding: clamp(8px, 3vw, 12px) !important;
text-align: left !important;
border-bottom: 1px solid #e1e5e9 !important;
word-break: break-word !important;
}
th {
background: #f8fafc !important;
font-weight: 600 !important;
}
/* 🚀 PERFORMANCE BOOSTER */
* {
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
-webkit-font-smoothing: subpixel-antialiased !important;
}
/* 🎯 KAJABI/THRIVE SPECIFIC FIXES */
.kajabi-page,
.thrive-page,
.elementor-page,
[class*="builder"],
[class*="editor"] {
max-width: 100vw !important;
overflow-x: hidden !important;
position: relative !important;
}
/* 🔥 ANTI-LAYOUT-SHIFT PROTECTION */
.fixed,
[style*="position: fixed"],
.sticky,
[style*="position: sticky"] {
position: relative !important;
width: 100% !important;
left: auto !important;
right: auto !important;
top: auto !important;
z-index: auto !important;
}
.absolute,
[style*="position: absolute"] {
position: relative !important;
width: 100% !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
}
/* 🌟 ULTRA-SMOOTH ANIMATIONS */
* {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
}
/* ===== SMALL PHONE OPTIMIZATION (do 480px) ===== */
@media screen and (max-width: 480px) {
:root {
--mobile-padding: 12px;
--mobile-margin: 10px;
--mobile-font-base: 14px;
}
h1, .h1 { font-size: clamp(20px, 7vw, 26px) !important; }
h2, .h2 { font-size: clamp(18px, 6vw, 22px) !important; }
h3, .h3 { font-size: clamp(16px, 5vw, 20px) !important; }
button, .button, .btn {
padding: 14px 20px !important;
font-size: 15px !important;
min-height: 48px !important;
}
input, textarea, select {
font-size: 16px !important; /* Zapobiega zoom */
padding: 14px 16px !important;
}
}
/* ===== TABLET OPTIMIZATION (769px - 1024px) ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
:root {
--mobile-padding: 25px;
--mobile-margin: 20px;
}
.site-wrapper,
.page-wrapper {
max-width: 100% !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
[class*="col-"] {
width: 48% !important;
margin-right: 4% !important;
float: left !important;
}
[class*="col-"]:nth-child(2n) {
margin-right: 0 !important;
}
.col-full,
[class*="full"] {
width: 100% !important;
margin-right: 0 !important;
}
}
/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
button, .button, .btn, a, input, select, textarea {
min-height: 44px !important;
min-width: 44px !important;
touch-action: manipulation !important;
}
input, textarea, select {
font-size: 16px !important; /* Krytyczne dla iOS - zapobiega zoom */
}
* {
-webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
-webkit-touch-callout: none !important;
}
}
/* ===== UTILITY CLASSES ===== */
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
@media screen and (min-width: 769px) {
.hide-mobile { display: block !important; }
.show-mobile { display: none !important; }
}
/* ===== FINAL PERFORMANCE LAYER ===== */
html {
scroll-behavior: smooth !important;
-webkit-overflow-scrolling: touch !important;
}
body {
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
text-rendering: optimizeLegibility !important;
}
/* HARDWARE ACCELERATION FOR ALL */
*, *:before, *:after {
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
-webkit-perspective: 1000px !important;
perspective: 1000px !important;
}
/* ===== EMERGENCY OVERFLOW PROTECTION ===== */
@media screen and (max-width: 768px) {
* {
max-width: 100% !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
}
pre, code {
white-space: pre-wrap !important;
word-break: break-all !important;
overflow-x: auto !important;
}
svg {
max-width: 100% !important;
height: auto !important;
width: auto !important;
}
}
/*