/* ===== Gober168 brand overrides ===== */ :root{ --gbr-primary:#1f6feb; --gbr-dark:#0b1f3a; --gbr-accent:#15c39a; } /* Hero */ .hero-content{ padding:0 15px; } .hero-content h1{ color:#fff; font-size:46px; line-height:1.18; font-weight:800; margin-bottom:22px; text-shadow:0 2px 18px rgba(0,0,0,.45); } .hero-content p{ color:#eaf0f7; font-size:18px; line-height:1.6; max-width:760px; margin:0 auto 28px; text-shadow:0 1px 10px rgba(0,0,0,.4); } .hero-cta{ display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; } /* tombol outline disamakan persis dgn .fancy-btn (lihat blok Buttons) */ .fancy-btn-outline{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:48px; padding:0 32px; border:2px solid #fff; background:transparent; color:#fff; border-radius:50px; font-size:14px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:.6px; text-decoration:none; cursor:pointer; transition:all .2s ease; } .fancy-btn-outline:hover{ background:#fff; color:var(--gbr-dark); } @media (max-width:767px){ .hero-content h1{ font-size:30px; } .hero-content p{ font-size:16px; } } /* Service / step / value titles keep heading look */ .service-title,.step-title,.value-title,.blog-card-title{ margin-top:0; } /* ===== Article (post) typography ===== */ .post-area{ padding-top:120px; } .post-breadcrumb{ font-size:14px; color:#7a8aa0; margin-bottom:18px; } .post-breadcrumb a{ color:var(--gbr-primary); text-decoration:none; } .post-meta{ font-size:14px; color:#7a8aa0; margin-bottom:24px; } .post-meta strong{ color:var(--gbr-dark); } .post-body h1{ font-size:34px; line-height:1.25; font-weight:800; margin-bottom:18px; color:var(--gbr-dark); } .post-body h2{ font-size:26px; line-height:1.3; font-weight:700; margin:38px 0 14px; color:var(--gbr-dark); } .post-body h3{ font-size:20px; line-height:1.35; font-weight:700; margin:26px 0 10px; color:var(--gbr-dark); } .post-body p{ font-size:17px; line-height:1.75; color:#27313f; margin-bottom:16px; } .post-body ul,.post-body ol{ font-size:17px; line-height:1.7; color:#27313f; margin:0 0 18px 22px; } .post-body li{ margin-bottom:8px; } .post-lead{ font-size:19px; line-height:1.7; color:#3a4658; } .post-body figure{ margin:24px 0; } .post-body figure img{ width:100%; height:auto; border-radius:10px; } .post-body figcaption{ font-size:13px; color:#8a97a8; text-align:center; margin-top:8px; } /* comparison table */ .post-table{ width:100%; border-collapse:collapse; margin:22px 0; font-size:16px; } .post-table th,.post-table td{ border:1px solid #e1e7ef; padding:12px 14px; text-align:left; vertical-align:top; } .post-table th{ background:var(--gbr-dark); color:#fff; font-weight:600; } .post-table tr:nth-child(even) td{ background:#f6f9fc; } /* callouts */ .post-callout{ border-left:4px solid var(--gbr-primary); background:#f2f7ff; padding:16px 20px; border-radius:0 8px 8px 0; margin:22px 0; } .post-callout.warn{ border-left-color:#e0a800; background:#fff9ec; } .post-callout.fill{ border-left-color:var(--gbr-accent); background:#eefaf6; } /* FAQ */ .faq-item{ border-bottom:1px solid #e6ebf2; padding:16px 0; } .faq-item h3{ margin:0 0 8px; font-size:18px; } .faq-item p{ margin:0; } /* CTA box */ .post-cta{ background:var(--gbr-dark); color:#fff; border-radius:14px; padding:30px; margin:36px 0; text-align:center; } .post-cta h3{ color:#fff !important; margin-top:0; } .post-cta p{ color:#d8e2f0; } .post-cta a.fancy-btn{ margin-top:10px; } /* article list cards reuse blog styles; small spacing tweak */ .artikel-list-area{ padding-top:120px; } /* ============================================================ FIX: dependensi tema (bootstrap/FA/classy-nav) hilang dari export. Bootstrap + Font Awesome + animate.css di-load via CDN di . Di bawah ini: navbar mandiri + jaminan konten selalu tampil. ============================================================ */ /* Konten animasi WOW selalu tampil walau JS gagal (root cause 'kartu hilang') */ .wow{ visibility:visible !important; opacity:1 !important; animation:none !important; } /* ===== Header / Navbar (pengganti classy-nav.css) ===== */ .header-area{ position:fixed; top:0; left:0; width:100%; z-index:1000; background:#fff; box-shadow:0 2px 14px rgba(11,31,58,.08); } .header-area .container{ max-width:1140px; } .classy-navbar{ display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 6px; } .nav-brand{ display:inline-flex; align-items:center; } .nav-brand img{ height:38px; width:auto; } #nav{ display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:4px; flex-wrap:wrap; } #nav li{ margin:0; } #nav li a{ display:block; padding:9px 15px; color:#0b1f3a; font-weight:600; font-size:15px; text-decoration:none; border-radius:7px; transition:all .2s ease; } #nav li a:hover{ color:#1f6feb; background:#f1f6ff; } /* hamburger toggler (override tema breakpoint-off pakai !important) */ .classy-navbar-toggler{ display:none; cursor:pointer; padding:6px 8px; background:transparent; border:0; } .navbarToggler{ display:inline-block !important; } .navbarToggler span{ display:block !important; width:26px !important; height:3px !important; background:#0b1f3a !important; margin:5px 0 !important; border-radius:2px; transition:.3s ease; } .classycloseIcon{ display:none !important; } /* Nilai Kami: panel biru -> teks harus terang (fix kontras) */ .how_we_work_details .value-title{ color:#ffffff; } .how_we_work_details .how_we_single_content p{ color:#d7e0ee; } /* Metode Kerja: section background biru -> judul & subtitle harus terang */ .work_process_area .section-heading h2{ color:#ffffff; } .work_process_area .section-heading p{ color:#d7e0ee; } /* beri ruang agar header fixed tidak menutup konten halaman dalam */ .post-area, .artikel-list-area{ padding-top:120px !important; } /* ===== Hero rapikan ===== */ .welcome_area{ min-height:100vh; display:flex; align-items:center; position:relative; } .welcome_area .container{ position:relative; z-index:2; } .bg-overlay1::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,20,40,.82), rgba(8,20,40,.55)); } /* ===== Kartu layanan / proses / blog: beri kotak rapi ===== */ .single_service_content{ background:#fff; border:1px solid #eef1f6; border-radius:14px; padding:30px 26px; height:100%; box-shadow:0 6px 22px rgba(11,31,58,.05); transition:transform .2s ease, box-shadow .2s ease; margin-bottom:26px; } .single_service_content:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(11,31,58,.10); } .service_icon i{ font-size:34px; color:#1f6feb; margin-bottom:14px; display:inline-block; } .service-title{ font-size:19px; font-weight:700; color:#0b1f3a; margin:6px 0 10px; } .service_text p{ color:#5b6b80; font-size:15px; line-height:1.65; margin:0; } .our_service_area, .work_process_area, .blog_area, .contact_us_area, .about_us_area{ padding:70px 0; } .section-heading{ margin-bottom:34px; } .section-heading h2{ font-size:32px; font-weight:800; color:#0b1f3a; } .section-heading p{ color:#6b7a90; max-width:680px; margin:10px auto 0; } .work_process_single_content{ background:#fff; border-radius:14px; padding:26px; margin-bottom:24px; border:1px solid #eef1f6; box-shadow:0 6px 22px rgba(11,31,58,.05); } .work_process_icon i{ font-size:26px; color:#15c39a; margin-bottom:10px; display:inline-block; } .step-title{ font-size:18px; font-weight:700; color:#0b1f3a; } .work_process_single_content p{ color:#5b6b80; font-size:15px; line-height:1.6; } /* anchor sections tidak ketutup header fixed saat diklik dari menu */ #about, #service, #contact, #blog{ scroll-margin-top:84px; } /* About + Values */ .about_us_thumb_2{ position:relative !important; text-align:center; margin-bottom:10px; } .about_us_thumb_2 img{ width:100%; max-width:380px; border-radius:14px; box-shadow:0 12px 30px rgba(11,31,58,.12); } .about_us_content{ padding-left:6px; } .about_us_content h3{ font-size:26px; font-weight:800; color:#0b1f3a; margin-top:0; } .about_us_content h4{ font-size:16px; color:#1f6feb; font-weight:600; margin-bottom:14px; } .about_us_content hr{ border:0; border-top:1px solid #e6ebf2; margin:14px 0 18px; } .about_us_content p{ color:#46566b; line-height:1.7; } @media (max-width:767px){ .about_us_content{ padding-left:0; margin-top:26px; text-align:left; } } .how_we_work_thumb{ min-height:340px; background-size:cover; background-position:center; border-radius:0; } .how_we_work_details{ padding:46px 30px; } .value-title{ font-size:18px; font-weight:700; color:#0b1f3a; } .how_we_single_content{ margin-bottom:22px; } .how_we_single_content p{ color:#5b6b80; font-size:15px; line-height:1.6; } /* Blog cards */ .blog_single_content{ background:#fff; border:1px solid #eef1f6; border-radius:14px; overflow:hidden; box-shadow:0 6px 22px rgba(11,31,58,.05); margin-bottom:28px; height:100%; transition:transform .2s ease, box-shadow .2s ease; } .blog_single_content:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(11,31,58,.10); } .blog_thumb img{ width:100%; height:200px; object-fit:cover; display:block; } .blog_text{ padding:22px; } .blog_post_date h5{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#1f6feb; font-weight:700; margin:0 0 8px; } .blog-card-title{ font-size:18px; font-weight:700; color:#0b1f3a; line-height:1.35; margin:0 0 10px; } .blog_text p{ color:#5b6b80; font-size:14.5px; line-height:1.6; } .blog_text a[href]{ color:#1f6feb; font-weight:600; text-decoration:none; } /* Buttons — solid & outline harus identik metriknya */ .fancy-btn{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; height:48px; padding:0 32px; background:#1f6feb; color:#fff !important; border:2px solid #1f6feb; border-radius:50px; font-size:14px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:.6px; text-decoration:none; cursor:pointer; transition:all .2s ease; } .fancy-btn:hover{ background:#1a5fd0; border-color:#1a5fd0; color:#fff !important; } /* Contact */ .contact_us_area{ background:#f7f9fc; } .form-control{ border:1px solid #d8e0ea; border-radius:10px; padding:12px 16px; margin-bottom:14px; width:100%; } .contact_info{ margin-bottom:18px; } .contact_info i{ color:#1f6feb; font-size:20px; margin-right:8px; } .contact_info h5{ font-weight:700; color:#0b1f3a; margin:6px 0 2px; } .contact_info p{ color:#5b6b80; margin:0; } .footer_social_icon a{ display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; background:#0b1f3a; color:#fff; border-radius:50%; margin-right:8px; } .footer_social_icon a:hover{ background:#1f6feb; } .bottom-footer-area{ background:#0b1f3a; padding:22px 0; } .bottom-footer-area p{ color:#c7d2e0; margin:0; font-size:14px; } .bottom-footer-area a{ color:#fff; } /* Mobile — hamburger menu */ @media (max-width:991px){ .classy-navbar{ position:relative; min-height:58px; padding:8px 12px; flex-wrap:nowrap; } .classy-navbar-toggler{ display:block !important; } .classy-menu{ position:absolute; top:100%; left:0; width:100%; background:#fff; box-shadow:0 10px 24px rgba(11,31,58,.14); max-height:0; overflow:hidden; transition:max-height .3s ease; } .header-area.nav-open .classy-menu{ max-height:400px; } #nav{ flex-direction:column; width:100%; gap:0; align-items:stretch; } #nav li{ width:100%; margin:0; } #nav li a{ display:block; width:100%; padding:15px 22px; border-top:1px solid #eef1f6; border-radius:0; font-size:15px; } /* animasi ikon hamburger -> X saat terbuka */ .header-area.nav-open .navbarToggler span:nth-child(1){ transform:translateY(8px) rotate(45deg); } .header-area.nav-open .navbarToggler span:nth-child(2){ opacity:0; } .header-area.nav-open .navbarToggler span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); } .how_we_work_details{ padding:34px 20px; } .post-area, .artikel-list-area{ padding-top:88px !important; } }