/* ===================================================================== Creatifa — Responsive overrides Halaman ini aslinya DESKTOP-ONLY (tanpa @media). File ini menambah perilaku responsif TANPA mengubah tampilan desktop (>1024px): semua aturan ada di dalam @media (max-width: 1024px) ke bawah. Breakpoint: Mobile <768 | iPad/Tablet 768–1024 | Desktop >1024 Di-load PALING AKHIR di supaya meng-override snapshot. ===================================================================== */ /* ---------------- TABLET & MOBILE (<= 1024px) ---------------- */ @media (max-width: 1024px) { img, video { max-width: 100%; } /* Header: sembunyikan nav desktop + tombol kontak, munculkan hamburger */ .style-2370 { display: none !important; } /* nav desktop */ .style-2395 { display: none !important; } /* tombol Kontak */ .style-2406 { display: flex !important; /* wrap hamburger */ justify-content: flex-end; align-items: center; } /* header jadi: logo (kiri) | hamburger (kanan) */ .style-2357 { display: block !important; } .style-2358 { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 16px !important; } /* Hero */ .style-74 { font-size: 64px !important; line-height: 1.06 !important; } /* h1 */ .style-73 { padding: 140px 0 80px !important; } /* Judul section (h2) */ .style-89, .style-331, .style-563 { font-size: 40px !important; } /* Footer: kolom dari 5 -> 3 */ .style-2178 { grid-template-columns: repeat(3, 1fr) !important; gap: 40px 24px !important; } .style-2239 { grid-template-columns: repeat(3, 1fr) !important; gap: 36px 20px !important; } } /* ---------------- MOBILE (<= 768px) ---------------- */ @media (max-width: 768px) { /* Hero */ .style-74 { font-size: 38px !important; line-height: 1.1 !important; margin-bottom: 20px !important; } .style-73 { padding: 116px 0 56px !important; } .style-76 { font-size: 16px !important; } /* subjudul */ /* Judul section */ .style-89, .style-331, .style-563 { font-size: 28px !important; } .style-563 { width: 100% !important; } /* Kurangi padding vertikal section besar */ .style-87, .style-559, .style-329 { padding-top: 56px !important; padding-bottom: 56px !important; } /* Footer: kolom -> 2, lalu baris bawah (copyright) menumpuk */ .style-2178 { grid-template-columns: 1fr 1fr !important; gap: 28px 18px !important; } .style-2239 { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; } .style-2340 ul { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } } /* ---------------- iPad / Tablet khusus (768–1024) ---------------- */ @media (min-width: 768px) and (max-width: 1024px) { .style-74 { font-size: 64px !important; } /* h1 sedikit lebih besar dari mobile */ .style-2178 { grid-template-columns: repeat(3, 1fr) !important; } } /* ===================================================================== PHASE 2 — Carousel testimoni & Marquee layanan Dua section ini pakai layout kolom 50/50; di layar kecil ditumpuk. ===================================================================== */ @media (max-width: 1024px) { /* Layanan "Di titik temu…": kolom kiri/kanan 50% -> tumpuk 100% */ .style-333, .style-334 { width: 100% !important; } /* Testimoni: judul (kiri) & area kartu (kanan) -> tumpuk 100% */ .style-568, .style-569 { width: 100% !important; } } @media (max-width: 768px) { /* Kartu testimoni: lebarkan agar kutipan enak dibaca + jarak antar kartu */ .style-571, .style-572 { max-width: 100% !important; } .style-571 { margin-bottom: 28px !important; } /* beri sedikit jarak atas area kartu setelah judul ditumpuk */ .style-569 { margin-top: 24px !important; } } /* ===================================================================== MENU HAMBURGER (overlay .style-6) — frosted glass + UI bersih Berlaku kapan pun menu terbuka (class .is-open dari app.js). ===================================================================== */ .style-6.is-open { display: block !important; position: fixed !important; inset: 0 !important; z-index: 3000 !important; background: rgba(250, 250, 250, 0.40) !important; -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6); overflow-y: auto; padding: 20px 22px 56px !important; animation: cfaMenuFade .3s ease both; } @keyframes cfaMenuFade { from { opacity: 0; } to { opacity: 1; } } .style-6.is-open .style-7, .style-6.is-open .style-33 { max-width: 620px; margin: 0 auto; width: 100%; } /* tombol close (kanan-atas) & back (kiri-atas) -> bulat */ .style-6.is-open [aria-label="Close"], .style-6.is-open [aria-label="Back"] { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(17,17,20,.14); background: rgba(255,255,255,.6); display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, transform .2s ease; } .style-6.is-open [aria-label="Close"]:hover, .style-6.is-open [aria-label="Back"]:hover { background:#fff; transform: scale(1.06); } .style-6.is-open [aria-label="Close"] { float: right; } .style-6.is-open [aria-label="Back"] { float: left; margin-right: 8px; } .style-6.is-open [aria-label="Close"] svg, .style-6.is-open [aria-label="Back"] svg { width: 42px; height: 42px; } /* daftar nav utama (panel kiri) */ .style-6.is-open .style-13, .style-6.is-open .style-42 { clear: both; } .style-6.is-open .style-14 { display: flex; flex-direction: column; gap: 2px; margin: 32px 0 0; padding: 0; } .style-6.is-open .style-14 > li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(17,17,20,.10); list-style: none; } .style-6.is-open .style-14 > li > a, .style-6.is-open .style-14 > li > span { flex: 1; font-family: 'Graphik Web', system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 1.7rem; letter-spacing: -0.02em; color: #141414; padding: 16px 2px; transition: color .2s ease, transform .2s ease; } .style-6.is-open .style-14 > li:hover > a, .style-6.is-open .style-14 > li:hover > span { color: #5946f5; transform: translateX(6px); } .style-6.is-open .style-14 > li svg { width: 22px; height: 22px; opacity: .45; flex: none; } /* submenu (panel kanan) */ .style-6.is-open .style-42 strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #6c6c75; margin: 8px 0 14px; } .style-6.is-open .style-42 ul { display: flex; flex-direction: column; padding: 0; } .style-6.is-open .style-42 li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(17,17,20,.08); list-style: none; } .style-6.is-open .style-42 li a { flex: 1; font-family: 'Graphik Web', system-ui, sans-serif; font-weight: 500; font-size: 1.3rem; color: #141414; padding: 14px 2px; transition: color .2s ease, transform .2s ease; } .style-6.is-open .style-42 li:hover a { color: #5946f5; transform: translateX(6px); } .style-6.is-open .style-42 li svg { width: 14px; height: 14px; opacity: .45; flex: none; } /* ===================================================================== Anchor offset (biar section tidak ketutup header fixed) + brush kecil ===================================================================== */ section[id], footer[id] { scroll-margin-top: 88px; } @media (max-width: 1024px) { .brush { max-width: 230px !important; } } /* iPad */ @media (max-width: 768px) { .brush { max-width: 150px !important; } } /* mobile */ /* ===================================================================== GALERI "Semua karya" (#portfolio) — pola grid mobile Desktop: bento (tak disentuh). iPad: 2 kolom. Mobile: 1 kolom. Kartu = cover 4:3 + nama. Deskripsi (hover-only) disembunyikan biar tidak ada celah kosong; container gambar dari 583px tetap -> 4:3. ===================================================================== */ @media (max-width: 1024px) { #portfolio .style-269 { display: block !important; } #portfolio .style-270 { display: grid !important; grid-template-columns: 1fr 1fr !important; /* iPad: 2 kolom */ gap: 32px 20px !important; } #portfolio .style-270 > * { grid-area: auto !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; } /* cover gambar -> rasio 4:3 responsif (cover asli 1600x1200) */ #portfolio div:has(> video) { height: auto !important; padding-bottom: 0 !important; aspect-ratio: 4 / 3 !important; margin-bottom: 14px !important; border-radius: 10px; } #portfolio video { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; z-index: 0 !important; } /* deskripsi hover-only -> sembunyikan (penyebab celah kosong) */ #portfolio .style-270 p { display: none !important; } /* nama project */ #portfolio .style-270 span { font-size: 20px !important; line-height: 1.3 !important; } } @media (max-width: 768px) { #portfolio .style-270 { grid-template-columns: 1fr !important; gap: 26px !important; } /* mobile: 1 kolom */ #portfolio .style-270 span { font-size: 22px !important; } }