/* ===================================================== GibsFest 2K26 — MOBILE FIX About Section + Competition Section Tambahkan link ini di SETELAH semua CSS lain ===================================================== */ /* ===================================================== GLOBAL MOBILE SAFEGUARDS ===================================================== */ *, *::before, *::after { box-sizing: border-box !important; } html, body { overflow-x: hidden !important; max-width: 100vw !important; } .container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; width: 100%; overflow: visible !important; } /* ===================================================== ABOUT SECTION — MOBILE FIX ===================================================== */ /* --- About grid: 2 kolom → 1 kolom di tablet/mobile --- */ @media (max-width: 1024px) { .about-section { padding: 4rem 0 !important; overflow: visible !important; } .about-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; margin-bottom: 3rem !important; } .about-visual { height: 280px !important; padding: 1.5rem !important; } .logo-3d-large img { max-width: 250px !important; } .about-text h3 { font-size: 1.8rem !important; } } /* --- Stats: 3 kolom → tergantung lebar layar --- */ @media (max-width: 1024px) { .about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 1.2rem !important; padding: 0 !important; margin-bottom: 3rem !important; } .stat-item { padding: 1.5rem 1rem !important; border-radius: 14px !important; } .stat-number { font-size: 2.8rem !important; } .stat-label { font-size: 0.8rem !important; letter-spacing: 0.5px !important; } } /* Stats 3 kolom masih bisa di 480px - 768px, tapi lebih kecil */ @media (max-width: 768px) { .about-section { padding: 3rem 0 !important; } .about-section .container { padding: 0 1rem !important; overflow: visible !important; } .about-grid { grid-template-columns: 1fr !important; gap: 2rem !important; margin-bottom: 2.5rem !important; } /* About text */ .about-text h3 { font-size: 1.5rem !important; margin-bottom: 1rem !important; } .about-text p { font-size: 0.95rem !important; line-height: 1.7 !important; } /* Logo visual box */ .about-visual { height: 220px !important; padding: 1.2rem !important; border-radius: 14px !important; } .logo-3d-large img { max-width: 180px !important; } /* Stats: tetap 3 kolom tapi lebih compact */ .about-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 0.8rem !important; padding: 0 !important; margin-bottom: 2.5rem !important; } .stat-item { padding: 1.2rem 0.6rem !important; border-radius: 12px !important; border-width: 1.5px !important; } .stat-number { font-size: 2.2rem !important; margin-bottom: 0.5rem !important; } .stat-label { font-size: 0.7rem !important; letter-spacing: 0.3px !important; line-height: 1.3 !important; } /* Features grid: 1 kolom di mobile */ .features-grid { grid-template-columns: 1fr !important; gap: 1rem !important; padding: 0 !important; } .feature-card { padding: 1.8rem 1.5rem !important; border-radius: 14px !important; } .feature-icon { font-size: 2.5rem !important; margin-bottom: 1rem !important; } .feature-card h4 { font-size: 1.1rem !important; margin-bottom: 0.6rem !important; } .feature-card p { font-size: 0.9rem !important; } } /* Layar sangat kecil (< 400px): stats 1 kolom */ @media (max-width: 400px) { .about-stats { grid-template-columns: 1fr !important; gap: 0.8rem !important; } .stat-item { padding: 1.5rem 1rem !important; display: flex !important; align-items: center !important; gap: 1rem !important; text-align: left !important; } .stat-number { font-size: 2.5rem !important; margin-bottom: 0 !important; min-width: 80px !important; } .stat-label { font-size: 0.85rem !important; text-align: left !important; } } /* ===================================================== COMPETITION SECTION — MOBILE FIX ===================================================== */ /* Competition section container */ .competitions-section { padding: 4rem 0 !important; overflow: visible !important; } .competitions-section .container { padding: 0 1rem !important; overflow: visible !important; } /* Competition grid responsif */ .competition-grid { display: grid !important; width: 100% !important; overflow: visible !important; } /* Desktop: 3 kolom */ @media (min-width: 1025px) { .competition-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 2rem !important; } } /* Tablet: 2 kolom */ @media (max-width: 1024px) and (min-width: 601px) { .competition-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.2rem !important; } } /* Mobile: 1 kolom PENUH */ @media (max-width: 600px) { .competition-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } } /* Competition card base fix */ .competition-card, .competition-grid > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* ← CRITICAL: cegah meluber */ box-sizing: border-box !important; overflow: hidden !important; } @media (max-width: 768px) { .competition-card, .competition-grid > * { border-radius: 14px !important; } /* Category tab / header di dalam card */ .competition-card .card-category, .competition-grid > * .card-category { font-size: 0.7rem !important; padding: 0.3rem 0.8rem !important; letter-spacing: 1px !important; } /* Nama lomba */ .competition-card h3, .competition-grid > * h3, .competition-card .card-title, .competition-grid > * .card-title { font-size: 1rem !important; line-height: 1.3 !important; } /* Deskripsi lomba */ .competition-card p, .competition-grid > * p, .competition-card .card-desc, .competition-grid > * .card-desc { font-size: 0.85rem !important; line-height: 1.5 !important; } /* Tombol detail */ .btn-details, .competition-card .btn-details, .competition-grid > * .btn-details { width: 100% !important; padding: 0.7rem 1rem !important; font-size: 0.85rem !important; text-align: center !important; justify-content: center !important; } /* Emoji/ikon di card */ .competition-card .card-icon, .competition-grid > * .card-icon, .competition-card .competition-icon { font-size: 2rem !important; } } /* ===================================================== COMPETITION CATEGORY TABS / FILTER — MOBILE FIX ===================================================== */ @media (max-width: 768px) { /* Filter tabs jika ada */ .competition-filters, .category-tabs, .filter-tabs { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: center !important; margin-bottom: 1.5rem !important; overflow-x: auto !important; padding-bottom: 0.5rem !important; -webkit-overflow-scrolling: touch !important; } .filter-btn, .tab-btn, .category-btn { flex-shrink: 0 !important; padding: 0.5rem 1rem !important; font-size: 0.8rem !important; white-space: nowrap !important; } /* Category accordion / dropdown jika ada */ .competition-accordion-header { font-size: 0.95rem !important; padding: 1rem !important; } } /* ===================================================== COMPETITION CATEGORY LABEL — TEKS WRAP DI MOBILE Fix: "LOMBA TINGKAT SD & SMP" terpotong ===================================================== */ /* Semua kemungkinan nama class untuk category label/header */ .competition-category, .category-label, .category-header, .comp-category, .card-category, .competition-level, .level-badge, .competition-tab-header, .competition-group-title, .category-title, .comp-group-label { white-space: normal !important; /* override nowrap */ word-break: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; text-overflow: unset !important; text-overflow: clip !important; } /* Target spesifik: elemen yang tampak sebagai rounded pill label di atas grup kompetisi */ [class*="category"], [class*="level"], [class*="group-title"], [class*="comp-label"] { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } @media (max-width: 768px) { /* Label kategori: izinkan wrap & sesuaikan ukuran */ .competition-category, .category-label, .category-header, .comp-category, .card-category, .competition-level, .level-badge, .competition-tab-header, .competition-group-title, .category-title, .comp-group-label, [class*="category"], [class*="level-label"], [class*="group-title"] { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; text-overflow: unset !important; /* Jika berupa pill/badge, pastikan lebar menyesuaikan */ width: auto !important; max-width: 100% !important; display: inline-flex !important; align-items: center !important; flex-wrap: wrap !important; text-align: center !important; justify-content: center !important; line-height: 1.4 !important; padding: 0.5rem 1.2rem !important; font-size: clamp(0.7rem, 3vw, 0.9rem) !important; } /* Wrapper/container dari label kategori */ .category-wrapper, .competition-header, .comp-header, .competition-section-header, [class*="category-wrap"], [class*="comp-header"] { width: 100% !important; overflow: visible !important; display: flex !important; justify-content: flex-start !important; flex-wrap: wrap !important; margin-bottom: 1rem !important; } /* Jika label berada di dalam card */ .competition-card .competition-category, .competition-card [class*="category"], .competition-card [class*="level"] { white-space: normal !important; max-width: calc(100% - 2rem) !important; font-size: 0.72rem !important; padding: 0.35rem 0.9rem !important; line-height: 1.4 !important; } } /* Extra kecil: font lebih kecil lagi */ @media (max-width: 400px) { .competition-category, .category-label, .competition-group-title, [class*="category"], [class*="level-label"] { font-size: 0.68rem !important; letter-spacing: 1px !important; padding: 0.4rem 0.8rem !important; } } /* ===================================================== COMPETITION CARD SCROLL HORIZONTAL (jika kompetisi di-render sebagai horizontal scroll di mobile) ===================================================== */ @media (max-width: 600px) { /* Jika grid menggunakan scroll horizontal, override ke vertikal */ .competition-grid[data-scroll="horizontal"] { display: grid !important; grid-template-columns: 1fr !important; overflow-x: visible !important; flex-wrap: unset !important; } } /* ===================================================== SECTION HEADER — RESPONSIVE ===================================================== */ @media (max-width: 768px) { .section-header { margin-bottom: 2rem !important; padding: 0 0.5rem !important; } .section-label { font-size: 0.7rem !important; letter-spacing: 1.5px !important; padding: 0.4rem 0.8rem !important; } .section-title { font-size: clamp(1.6rem, 7vw, 2.5rem) !important; letter-spacing: 1px !important; line-height: 1.2 !important; word-break: break-word !important; } .section-description { font-size: 0.9rem !important; line-height: 1.6 !important; padding: 0 0.5rem !important; } .title-underline { margin: 0.8rem auto 1rem !important; } } /* ===================================================== HORIZONTAL OVERFLOW SAFEGUARD GLOBAL ===================================================== */ @media (max-width: 768px) { main, section, .container, .about-section, .competitions-section { max-width: 100vw !important; overflow-x: hidden !important; } /* Pastikan tidak ada elemen yang melebihi lebar layar */ img { max-width: 100% !important; height: auto !important; } /* Teks panjang tidak meluber */ h1, h2, h3, h4, p, span { word-break: break-word !important; overflow-wrap: break-word !important; } } /* ===================================================== PATCH: Competition Category Label — Text Wrap Mobile Tempel di BAWAH file competition-styles.css kamu ===================================================== */ @media (max-width: 768px) { /* ── 1. OVERRIDE nowrap di SEMUA elemen dalam competition section ── */ .competitions-section *, #competitions * { white-space: normal !important; text-overflow: unset !important; } /* ── 2. Kecualikan elemen yang MEMANG harus satu baris ── */ .competitions-section .badge-text, .competitions-section .section-label, #competitions .badge-text, #competitions .section-label { white-space: nowrap !important; } /* ── 3. Category label / header pill ── */ /* Ini menarget elemen persis seperti di screenshot: pill merah bergaris dengan icon + teks "LOMBA TINGKAT SD & SMP" */ .competitions-section h3, .competitions-section h4, .competitions-section [class*="category"], .competitions-section [class*="level"], .competitions-section [class*="title"], .competitions-section [class*="label"], .competitions-section [class*="header"], #competitions h3, #competitions h4, #competitions [class*="category"], #competitions [class*="level"], #competitions [class*="title"], #competitions [class*="label"], #competitions [class*="header"] { white-space: normal !important; word-break: break-word !important; overflow-wrap: break-word !important; overflow: visible !important; max-width: 100% !important; line-height: 1.4 !important; } /* ── 4. Container pill ── */ .competitions-section [class*="category"], #competitions [class*="category"] { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 0.5rem 1rem !important; font-size: clamp(0.68rem, 2.8vw, 0.85rem) !important; letter-spacing: 1.5px !important; width: auto !important; max-width: 90vw !important; } } @media (max-width: 480px) { .competitions-section [class*="category"], #competitions [class*="category"] { font-size: 0.68rem !important; letter-spacing: 1px !important; padding: 0.45rem 0.9rem !important; } }