/* ========================================================================== PT. ZENITH SINERGI UTAMA — STYLE.CSS Satu berkas gaya untuk seluruh halaman. Cara pakai: beri class lingkup pada tag setiap halaman. index.html -> produk.html -> tentang-kami.html -> peluang-zenner.html -> kebijakan-privasi.html-> kode-etik.html -> DAFTAR ISI 1. Halaman utama (.page-home) 2. Dasar halaman dalam (.page-inner) 3. Katalog produk (.page-produk) 4. Profil & ekosistem (.page-tentang) 5. Peluang ZENNER (.page-peluang) 6. Halaman legal (.page-legal) ========================================================================== */ /* Reset dasar yang berlaku di semua halaman */ *, *::before, *::after { box-sizing: border-box; } /* ========================================================================== 1. HALAMAN UTAMA (index.html) ========================================================================== */ :root { --biru: #1565D8; --biru-tua: #0A3F8F; --oranye: #F5A623; --oranye-tua: #E08A0B; --hijau: #2E8B57; --hijau-tua: #1E6B41; --hitam: #050505; --putih: #FFFFFF; --abu: #C9D3DE; --radius: 16px; --maxw: 1240px; --nav-h: 88px; } .page-home * {box-sizing:border-box;margin:0;padding:0 } html {scroll-behavior:smooth;scroll-padding-top:var(--nav-h) } body.page-home { margin:0; box-sizing:border-box; font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--hitam); color:var(--putih); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } .page-home img {max-width:100%;display:block } .page-home a {color:inherit;text-decoration:none } .page-home ul {list-style:none } .page-home .wrap {width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px } .page-home :focus-visible {outline:3px solid var(--oranye);outline-offset:3px;border-radius:4px } /* ============ NAVBAR ============ */ .page-home .nav { position:fixed;top:0;left:0;right:0;z-index:100; height:var(--nav-h); background:transparent; transition:background .35s ease, box-shadow .35s ease; } .page-home .nav.solid {background:var(--biru);box-shadow:0 2px 18px rgba(0,0,0,.35) } .page-home .nav-inner { max-width:var(--maxw);margin:0 auto;padding:0 24px;height:100%; display:flex;align-items:center;justify-content:space-between;gap:24px; } .page-home .brand {display:flex;align-items:center;gap:12px } .page-home .brand-mark { width:52px;height:52px;flex:0 0 52px;object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); } .page-home .brand-name {font-size:22px;font-weight:700;letter-spacing:.2px;white-space:nowrap } .page-home .menu {display:flex;align-items:center;gap:30px } .page-home .menu a {font-size:17px;font-weight:400;color:#fff;opacity:.95;position:relative;padding:6px 0 } .page-home .menu a::after { content:'';position:absolute;left:0;bottom:0;height:2px;width:0; background:var(--oranye);transition:width .25s ease; } .page-home .menu a:hover::after, .page-home .menu a[aria-current="true"]::after {width:100% } .page-home .btn-gabung { background:var(--oranye);color:#fff;font-size:17px;font-weight:500; padding:12px 30px;border-radius:999px;white-space:nowrap; transition:transform .2s ease, background .2s ease; } .page-home .btn-gabung:hover {background:var(--oranye-tua);transform:translateY(-2px) } .page-home .burger { display:none;background:none;border:0;cursor:pointer;padding:8px; width:44px;height:44px; } .page-home .burger span {display:block;height:2px;background:#fff;margin:6px 0;transition:.3s } .page-home .burger.open span:nth-child(1) {transform:translateY(8px) rotate(45deg) } .page-home .burger.open span:nth-child(2) {opacity:0 } .page-home .burger.open span:nth-child(3) {transform:translateY(-8px) rotate(-45deg) } /* ============ HERO ============ */ .page-home .hero { position:relative;min-height:100vh;padding-top:var(--nav-h); display:flex;align-items:center;overflow:hidden; background: radial-gradient(120% 90% at 88% 55%, rgba(21,101,216,.85) 0%, rgba(10,35,70,.6) 42%, transparent 70%), radial-gradient(110% 100% at 2% 8%, #F0A32B 0%, #A96A16 26%, #2A1C0B 55%, #070707 78%); } .page-home .hero::after { /* garis lengkung putih seperti mockup */ content:'';position:absolute;top:-18%;right:16%; width:min(1000px,105vw);aspect-ratio:1/1; border:1.5px solid rgba(255,255,255,.5);border-radius:50%; pointer-events:none; } .page-home .hero-grid { position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:60px 24px; display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center; } .page-home .hero h1 { font-size:clamp(38px,5.4vw,72px);font-weight:300;line-height:1.12;letter-spacing:-.5px; margin-bottom:22px; } .page-home .hero p.lead { font-size:clamp(15px,1.25vw,18px);font-weight:300;color:#EDF1F5;max-width:640px;margin-bottom:34px; } .page-home .btn-outline { display:inline-block;border:2px solid var(--oranye);color:#fff; font-size:20px;font-weight:400;padding:14px 34px;border-radius:999px; transition:background .25s ease,color .25s ease; } .page-home .btn-outline:hover {background:var(--oranye);color:#fff } .page-home .hero-visual {position:relative;height:600px } .page-home .hero-photo { position:absolute;right:0;top:0;width:74%;height:520px;border-radius:6px;overflow:hidden; background:linear-gradient(150deg,#E8E4DE 0%,#CFC8BF 45%,#4A3B33 100%); box-shadow:0 30px 70px rgba(0,0,0,.45); display:flex;align-items:flex-end;justify-content:center; } .page-home .ph-label {font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(0,0,0,.45);padding:14px;font-weight:500 } /* mockup HP dibuat murni dengan CSS */ .page-home .phone { position:absolute;left:2%;bottom:2%;width:230px;height:460px; background:#0D0D0D;border-radius:34px;border:7px solid #1A1A1A; box-shadow:0 26px 60px rgba(0,0,0,.6);overflow:hidden;z-index:3; } .page-home .phone-screen {height:100%;background:#0F1115;display:flex;flex-direction:column;padding:14px 12px 0 } .page-home .ps-top {display:flex;justify-content:space-between;font-size:9px;color:#8A93A0;margin-bottom:10px } .page-home .ps-title {font-size:11px;font-weight:600;letter-spacing:1px;color:#fff;margin-bottom:10px } .page-home .ps-card { background:linear-gradient(120deg,var(--oranye) 0%,#E2670F 100%); border-radius:12px;padding:12px;margin-bottom:12px; } .page-home .ps-card small {font-size:9px;color:rgba(255,255,255,.85);display:block } .page-home .ps-card b {font-size:17px;font-weight:600 } .page-home .ps-actions {display:flex;gap:22px;justify-content:center;margin-bottom:14px } .page-home .ps-act {display:flex;flex-direction:column;align-items:center;gap:5px;font-size:8px;color:#B9C1CC } .page-home .ps-dot {width:26px;height:26px;border-radius:50%;background:var(--hijau);display:grid;place-items:center;color:#fff;font-size:11px } .page-home .ps-dot.b {background:var(--biru) } .page-home .ps-promo { background:linear-gradient(110deg,#12467F,#1E7BC8);border-radius:10px;padding:10px; font-size:9px;color:#DDE9F6;flex:1; } .page-home .ps-promo b {display:block;font-size:11px;color:#fff;margin-bottom:3px } .page-home .ps-nav {display:flex;justify-content:space-between;padding:8px 4px;border-top:1px solid #1E222A;font-size:7px;color:#7C8593 } /* Titik indikator (dots) */ .page-home .dots {display:flex;gap:12px;justify-content:center;margin-top:34px } .page-home .dots button { width:15px;height:15px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.4);transition:background .25s ease,transform .25s ease;padding:0; } .page-home .dots button[aria-selected="true"] {background:#fff;transform:scale(1.12) } .page-home .hero-dots {position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:4;margin:0 } /* ============ SECTION UMUM ============ */ .page-home .section {padding:96px 0;background:var(--hitam) } .page-home .section-head {text-align:center;max-width:900px;margin:0 auto 54px } .page-home .section-head h2 { font-size:clamp(34px,4.6vw,62px);font-weight:300;letter-spacing:-.5px;line-height:1.15;margin-bottom:14px; } .page-home .section-head p {font-size:clamp(15px,1.3vw,20px);font-weight:300;color:#D6DDE5 } /* ============ KARTU (produk & ekosistem) ============ */ .page-home .cards { display:grid;grid-template-columns:repeat(3,1fr);gap:34px; } .page-home .card { position:relative;border-radius:var(--radius);overflow:hidden; aspect-ratio:7/5;display:flex;flex-direction:column;justify-content:space-between; padding:22px;border:2px solid var(--hijau); transition:transform .3s ease,box-shadow .3s ease; } .page-home .card:hover {transform:translateY(-6px);box-shadow:0 22px 45px rgba(0,0,0,.55) } .page-home .card::before {content:'';position:absolute;inset:0;background:rgba(0,0,0,.28) } .page-home .card > * {position:relative;z-index:2 } .page-home .pill { align-self:center;background:var(--hijau);color:#fff;font-size:21px;font-weight:400; padding:9px 26px;border-radius:12px; } .page-home .card p {font-size:15px;font-weight:400;color:#F2F5F8;text-shadow:0 2px 8px rgba(0,0,0,.75) } /* latar kartu produk (ganti dengan foto asli bila sudah ada) */ .page-home .bg-kopi {background:linear-gradient(140deg,#6B3F1D 0%,#3A2110 55%,#1A0F07 100%) } .page-home .bg-lite {background:linear-gradient(140deg,#7FC7E8 0%,#2E6FA8 55%,#123A5E 100%) } .page-home .bg-nerve {background:linear-gradient(140deg,#C79B34 0%,#5C6B2A 55%,#1E2A12 100%) } .page-home .bg-sabun {background:linear-gradient(140deg,#E28FB4 0%,#8E3A63 55%,#3A1428 100%) } .page-home .bg-wash {background:linear-gradient(140deg,#8FD3B6 0%,#2E7D63 55%,#123024 100%) } .page-home .bg-therapy {background:linear-gradient(140deg,#D9A441 0%,#8A5A1E 55%,#2B1A08 100%) } .page-home .bg-toko {background:linear-gradient(140deg,#5E8C4A 0%,#2C4A2E 55%,#10190F 100%) } .page-home .bg-app {background:linear-gradient(140deg,#2A6FB0 0%,#123A63 55%,#08131F 100%) } .page-home .bg-club {background:linear-gradient(140deg,#C77C3A 0%,#6E3F1B 55%,#241205 100%) } /* ============ CAROUSEL PRODUK ============ */ .page-home .carousel {overflow:hidden } .page-home .track { display:flex;gap:34px;transition:transform .55s cubic-bezier(.22,.61,.36,1); } .page-home .track .card {flex:0 0 calc((100% - 68px)/3) } /* ============ EKOSISTEM ============ */ .page-home .card.biru {border-color:var(--biru) } .page-home .card.biru .pill {background:var(--biru) } .page-home .card.oranye {border-color:var(--oranye) } .page-home .card.oranye .pill {background:var(--oranye) } .page-home .eko-item {display:flex;flex-direction:column;gap:18px } .page-home .eko-link { text-align:center;font-size:18px;font-weight:300;color:#E9EEF4; transition:color .2s ease,transform .2s ease; } .page-home .eko-link:hover {color:var(--oranye);transform:translateX(4px) } .page-home .eko-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:34px } /* ============ FOOTER ============ */ .page-home .footer { position:relative; background: radial-gradient(90% 80% at 88% 18%, rgba(53,140,232,.9) 0%, rgba(16,58,110,.75) 45%, transparent 72%), linear-gradient(115deg,#C98A17 0%,#5A4A2A 28%,#123253 60%,#0E4E8C 100%); padding:80px 0 0; } .page-home .foot-top {display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:40px;align-items:start } .page-home .foot-logo {display:flex;justify-content:center;align-items:flex-start } .page-home .foot-logo img {width:min(280px,80%);height:auto;object-fit:contain } .page-home .foot-col h3 {font-size:19px;font-weight:600;margin-bottom:18px } .page-home .foot-col li {margin-bottom:8px } .page-home .foot-col a {font-size:16px;font-weight:300;color:#EAF1F8;transition:color .2s ease } .page-home .foot-col a:hover {color:var(--oranye) } .page-home .foot-rule {height:1px;background:rgba(255,255,255,.45);margin:56px 0 34px } .page-home .foot-bottom {display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start } .page-home .foot-bottom h4 {font-size:clamp(24px,2.6vw,34px);font-weight:300;margin-bottom:14px } .page-home .foot-bottom p {font-size:15px;font-weight:300;color:#F0F4F8;max-width:760px } .page-home .kontak {text-align:right } .page-home .kontak h4 {font-size:22px;font-weight:400;margin-bottom:10px } .page-home .kontak a {display:block;font-size:16px;font-weight:300;margin-bottom:4px;transition:color .2s ease } .page-home .kontak a:hover {color:var(--oranye) } .page-home .sosmed {display:flex;gap:18px;justify-content:flex-end;margin-top:16px } .page-home .sosmed a {width:34px;height:34px;display:grid;place-items:center;transition:transform .2s ease,opacity .2s ease } .page-home .sosmed a:hover {transform:translateY(-3px);opacity:.85 } .page-home .sosmed svg {width:30px;height:30px;fill:#fff } .page-home .copyright { border-top:1px solid rgba(255,255,255,.35);margin-top:42px;padding:18px 0; text-align:center;font-size:14px;font-weight:300;color:#EDF2F7; } /* ============ RESPONSIF ============ */ @media (max-width:1024px) { .page-home .hero-grid {grid-template-columns:1fr;gap:20px } .page-home .hero-visual {height:520px;order:2 } .page-home .cards, .page-home .eko-grid {grid-template-columns:repeat(2,1fr) } .page-home .track .card {flex:0 0 calc((100% - 34px)/2) } .page-home .foot-top {grid-template-columns:1fr 1fr } .page-home .foot-logo {grid-column:1/-1 } } @media (max-width:820px) { :root {--nav-h:74px } .page-home .burger {display:block } .page-home .menu { position:fixed;top:var(--nav-h);left:0;right:0; background:var(--biru);flex-direction:column;align-items:stretch;gap:0; padding:8px 24px 22px;transform:translateY(-140%);transition:transform .35s ease; box-shadow:0 14px 30px rgba(0,0,0,.4); } .page-home .menu.open {transform:translateY(0) } .page-home .menu li {border-bottom:1px solid rgba(255,255,255,.18) } .page-home .menu li:last-child {border-bottom:0;padding-top:14px } .page-home .menu a {display:block;padding:14px 0 } .page-home .btn-gabung {display:inline-block;text-align:center;width:100% } .page-home .brand-name {font-size:17px } .page-home .brand-mark {width:42px;height:42px;flex-basis:42px } .page-home .hero-visual {height:440px } .page-home .hero-photo {width:100%;height:330px } .page-home .phone {width:170px;height:340px;left:0 } .page-home .cards, .page-home .eko-grid {grid-template-columns:1fr } .page-home .track .card {flex:0 0 100% } .page-home .section {padding:70px 0 } .page-home .foot-top {grid-template-columns:1fr;text-align:center } .page-home .foot-col ul {display:inline-block;text-align:left } .page-home .foot-bottom {grid-template-columns:1fr;text-align:center } .page-home .kontak {text-align:center } .page-home .sosmed {justify-content:center } } @media (prefers-reduced-motion:reduce) { .page-home * {animation:none!important;transition:none!important } html {scroll-behavior:auto } } /* ========================================================================== 2. DASAR HALAMAN DALAM (produk, tentang kami, peluang, legal) ========================================================================== */ :root { --navy: #002D5B; --navy-dark: #001F3F; --green: #4A773C; --gold: #F2A900; --off-white: #FDFBF7; --text-dark: #333; --gray-light: #F4F4F4; } .page-inner * {box-sizing:border-box } body.page-inner { font-family:'Montserrat',sans-serif; margin:0; background-color:var(--off-white); color:var(--text-dark); line-height:1.7; scroll-behavior:smooth; } .page-inner img {max-width:100%;display:block } .page-inner :focus-visible {outline:3px solid var(--gold);outline-offset:3px } /* --- HEADER & NAVIGASI --- */ .page-inner header { background-color:var(--navy); padding:15px 5%; display:flex; justify-content:space-between; align-items:center; gap:20px; position:sticky; top:0; z-index:1000; box-shadow:0 2px 10px rgba(0,0,0,.2); } .page-inner .logo-img {height:60px;width:auto } .page-inner nav {display:flex;flex-wrap:wrap;justify-content:flex-end } .page-inner nav a { color:#fff; text-decoration:none; margin-left:20px; font-size:.9rem; font-weight:600; text-transform:uppercase; transition:.3s; } .page-inner nav a:hover {color:var(--gold) } .page-inner nav a.active {color:var(--gold) } /* --- BREADCRUMB --- */ .page-inner .breadcrumb { padding:20px 5%; font-size:.9rem; color:#666; background-color:var(--off-white); border-bottom:1px solid #eee; } .page-inner .breadcrumb a {color:var(--navy);text-decoration:none;font-weight:600 } .page-inner .breadcrumb a:hover {color:var(--gold) } /* --- BANNER HALAMAN --- */ .page-inner .page-banner { background-color:var(--navy); padding:60px 5%; text-align:center; color:#fff; } .page-inner .page-banner h1 { font-family:'Playfair Display',serif; font-size:2.8rem; margin:0; color:var(--gold); } .page-inner .page-banner p {font-size:1.1rem;opacity:.9;margin-top:10px } /* --- JUDUL SECTION --- */ .page-inner .section-title { text-align:center; font-family:'Playfair Display',serif; color:var(--navy); font-size:2.5rem; margin-bottom:50px; } .page-inner .section-title.tight {margin-bottom:15px } .page-inner .section-subtitle { color:#666; font-size:1.1rem; max-width:700px; margin:0 auto; } /* --- FOOTER --- */ .page-inner footer { background-color:var(--navy-dark); color:#fff; text-align:center; padding:30px 5%; font-size:.9rem; margin-top:50px; } /* --- RESPONSIF --- */ @media (max-width:768px) { .page-inner header {flex-direction:column;align-items:center;gap:12px } .page-inner .logo-img {height:44px } .page-inner nav {justify-content:center } .page-inner nav a {margin:0 10px } .page-inner .page-banner h1 {font-size:2rem } .page-inner .section-title {font-size:1.9rem;margin-bottom:32px } } @media (prefers-reduced-motion:reduce) { .page-inner * {transition:none!important;animation:none!important } body.page-inner {scroll-behavior:auto } } /* ========================================================================== 3. HALAMAN KATALOG PRODUK (produk.html) ========================================================================== */ /* --- KEPALA KATALOG --- */ .page-produk .catalog-header { text-align:center; padding:60px 5% 40px; background-color:#fff; border-bottom:1px solid #ddd; } .page-produk .catalog-header h1 { font-family:'Playfair Display',serif; color:var(--navy); font-size:3rem; margin:0 0 15px 0; } .page-produk .catalog-header p { max-width:700px; margin:0 auto; color:#666; font-size:1.1rem; } /* --- NAVIGASI KATEGORI --- */ .page-produk .category-nav { display:flex; justify-content:center; gap:15px; padding:30px 5%; flex-wrap:wrap; } .page-produk .category-btn { background-color:#fff; color:var(--navy); border:2px solid var(--navy); padding:10px 25px; border-radius:30px; text-decoration:none; font-weight:600; font-size:.9rem; transition:.3s; } .page-produk .category-btn:hover, .page-produk .category-btn.active {background-color:var(--navy);color:#fff } /* --- JUDUL KATEGORI --- */ .page-produk .category-section {padding:50px 5%;scroll-margin-top:120px } .page-produk .category-title {display:flex;align-items:center;gap:15px;margin-bottom:30px } .page-produk .category-title h2 { font-family:'Playfair Display',serif; color:var(--navy); font-size:2.2rem; margin:0; } .page-produk .category-title .line {height:2px;background-color:var(--green);flex-grow:1 } /* --- GRID PRODUK --- */ .page-produk .product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:30px; } .page-produk .product-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.05); transition:transform .3s,border-color .3s; border:1px solid #eee; display:flex; flex-direction:column; } .page-produk .product-card:hover {transform:translateY(-8px);border-color:var(--gold) } .page-produk .product-image { background-color:var(--gray-light); height:250px; display:flex; align-items:center; justify-content:center; color:#aaa; font-size:.9rem; position:relative; background-size:cover; background-position:center; } .page-produk .product-image.soon {background-color:#E9ECEF } .page-produk .tag { position:absolute; top:15px; left:15px; background-color:var(--green); color:#fff; padding:5px 12px; font-size:.75rem; font-weight:700; border-radius:20px; letter-spacing:1px; } .page-produk .tag-navy {background-color:var(--navy) } .page-produk .product-info {padding:25px;flex-grow:1;display:flex;flex-direction:column } .page-produk .product-info h3 {color:var(--navy);margin:0 0 10px 0;font-size:1.3rem } .page-produk .product-info p {color:#666;font-size:.9rem;margin-bottom:20px;flex-grow:1 } .page-produk .btn-detail { display:inline-block; background-color:var(--off-white); color:var(--navy); text-align:center; padding:10px; border-radius:6px; text-decoration:none; font-weight:700; border:1px solid var(--navy); transition:.3s; } .page-produk .btn-detail:hover {background-color:var(--navy);color:#fff } .page-produk .btn-soon {opacity:.5;pointer-events:none } .page-produk /* --- FOTO PRODUK --- Aktifkan setelah foto tersedia di folder images/, .page-produk contoh: .img-biozenerve {background-image:url('../images/biozenerve.jpg') } .page-produk lalu tambahkan class tersebut pada div .product-image --------------------------------------------------------- */ @media (max-width:768px) { .catalog-header h1{font-size:2.1rem} .category-title h2{font-size:1.6rem} } /* ========================================================================== 4. HALAMAN PROFIL & EKOSISTEM (tentang-kami.html) ========================================================================== */ /* --- BANNER BERGAMBAR --- Ganti url() di bawah dengan foto sendiri, contoh: url('../images/banner-profil.jpg') --------------------------------------------------------- */ .page-tentang .page-banner.banner-profil { background:linear-gradient(rgba(0,45,91,.8),rgba(0,45,91,.8)), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1200&q=80'); background-size:cover; background-position:center; padding:100px 5%; } .page-tentang .page-banner.banner-profil h1 {margin:0 0 15px 0 } .page-tentang .page-banner.banner-profil p {max-width:800px;margin:0 auto;font-size:1.2rem;line-height:1.8 } /* --- PENGANTAR --- */ .page-tentang .intro-section {padding:80px 8%;background-color:#fff;text-align:center } .page-tentang .intro-section h2 { font-family:'Playfair Display',serif; color:var(--navy); font-size:2.2rem; margin-top:0; } .page-tentang .intro-section p { font-size:1.1rem; color:#555; max-width:900px; margin:0 auto; text-align:justify; } /* --- FILOSOFI NAMA --- */ .page-tentang .philosophy-section {padding:60px 8% 80px;background-color:var(--off-white) } .page-tentang .grid-3 {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px } .page-tentang .card { background:#fff; padding:40px 30px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05); transition:.3s; } .page-tentang .card:hover {transform:translateY(-5px) } .page-tentang .card h3 {margin-bottom:15px;font-size:1.4rem } .page-tentang .card p {font-size:.95rem;text-align:justify } .page-tentang .card-zenith {border-top:5px solid var(--gold) } .page-tentang .card-zenith h3 {color:var(--gold) } .page-tentang .card-sinergi {border-top:5px solid var(--green) } .page-tentang .card-sinergi h3 {color:var(--green) } .page-tentang .card-utama {border-top:5px solid var(--navy) } .page-tentang .card-utama h3 {color:var(--navy) } /* --- VISI & MISI --- */ .page-tentang .vm-section {display:flex;gap:40px;padding:80px 8%;background-color:var(--navy);color:#fff } .page-tentang .vision-box, .page-tentang .mission-box {flex:1;background:rgba(255,255,255,.05);padding:40px;border-radius:10px } .page-tentang .vm-section h2 { font-family:'Playfair Display',serif; color:var(--gold); font-size:2rem; border-bottom:1px solid rgba(242,169,0,.3); padding-bottom:15px; margin-top:0; } .page-tentang .vision-text {font-size:1.15rem;line-height:1.8;font-style:italic } .page-tentang .mission-box ul {padding-left:20px } .page-tentang .mission-box li {margin-bottom:15px;font-size:.95rem } /* --- PILAR EKOSISTEM --- */ .page-tentang .pilar-section {padding:80px 8%;background-color:#fff } .page-tentang .section-intro {text-align:center;max-width:800px;margin:0 auto 40px } .page-tentang .pilar-card { background:var(--off-white); border-left:5px solid var(--green); padding:30px; margin-bottom:30px; border-radius:0 10px 10px 0; } .page-tentang .pilar-card h3 { color:var(--navy); font-size:1.5rem; margin-top:0; border-bottom:1px solid #ddd; padding-bottom:10px; } .page-tentang .pilar-card ul {padding-left:20px;margin-top:15px } .page-tentang .pilar-card li {margin-bottom:10px;font-size:.95rem } .page-tentang .pilar-card strong {color:var(--navy) } .page-tentang .pilar-card .sub-list {margin-top:5px } .page-tentang .pilar-navy {border-left-color:var(--navy) } .page-tentang .pilar-gold {border-left-color:var(--gold) } .page-tentang .pilar-gold h3 {color:var(--gold) } /* --- PROSPEK & SINERGI --- */ .page-tentang .prospek-section {padding:60px 8% 80px;background-color:var(--off-white);display:flex;gap:40px } .page-tentang .prospek-box {flex:1 } .page-tentang .prospek-box h3 {color:var(--navy);font-family:'Playfair Display',serif;font-size:1.8rem } .page-tentang .prospek-box ol, .page-tentang .prospek-box ul {padding-left:20px } .page-tentang .prospek-box li {margin-bottom:10px;font-size:.95rem } .page-tentang .prospek-note {font-style:italic;margin-top:20px;font-weight:bold;color:var(--navy) } @media (max-width:768px) { .page-tentang .vm-section, .page-tentang .prospek-section {flex-direction:column } .page-tentang .page-banner.banner-profil {padding:70px 5% } .page-tentang .intro-section, .page-tentang .philosophy-section, .page-tentang .pilar-section, .page-tentang .prospek-section {padding-left:6%;padding-right:6% } } /* ========================================================================== 5. HALAMAN PELUANG ZENNER (peluang-zenner.html) ========================================================================== */ body.page-peluang {line-height:1.6 } /* --- HERO --- Ganti url() dengan foto sendiri, contoh: url('../images/hero-zenner.jpg') --------------------------------------------------------- */ .page-peluang .zenner-hero { background:linear-gradient(rgba(0,45,91,.85),rgba(0,45,91,.7)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80'); background-size:cover; background-position:center; padding:100px 5%; text-align:center; color:#fff; } .page-peluang .zenner-hero h1 { font-family:'Playfair Display',serif; font-size:3rem; margin-bottom:20px; color:var(--gold); } .page-peluang .zenner-hero p {font-size:1.2rem;max-width:800px;margin:0 auto 40px } .page-peluang .btn-large { display:inline-block; background-color:var(--gold); color:var(--navy); padding:15px 40px; font-size:1.1rem; font-weight:700; text-decoration:none; border-radius:5px; transition:.3s; } .page-peluang .btn-large:hover {transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.2) } /* --- KEUNGGULAN --- */ .page-peluang .benefits-section {padding:80px 5%;text-align:center;background-color:#fff } .page-peluang .benefits-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px } .page-peluang .benefit-card { background:var(--off-white); padding:40px 30px; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05); border-top:4px solid var(--green); } .page-peluang .benefit-card h3 {color:var(--navy);margin-bottom:15px } /* --- SKEMA BAGI HASIL --- */ .page-peluang .compensation-section {padding:80px 8%;background-color:var(--off-white);scroll-margin-top:110px } .page-peluang .comp-intro {text-align:center;margin-bottom:50px } .page-peluang .comp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:40px; margin-bottom:40px; } .page-peluang .comp-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 8px 25px rgba(0,0,0,.06); } .page-peluang .comp-header { padding:20px; text-align:center; color:#fff; font-weight:bold; font-size:1.3rem; letter-spacing:1px; } .page-peluang .comp-header.builder {background-color:var(--navy) } .page-peluang .comp-header.retail {background-color:var(--green) } .page-peluang .comp-body {padding:30px } .page-peluang .comp-body ul {list-style:none;padding:0;margin:0 } .page-peluang .comp-body li {margin-bottom:20px;position:relative;padding-left:30px } .page-peluang .comp-body li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:bold; font-size:1.2rem; } .page-peluang .comp-body strong {color:var(--navy);display:block;font-size:1.1rem;margin-bottom:5px } .page-peluang .comp-body p {margin:0;font-size:.95rem;color:#555 } .page-peluang .comp-body p strong {display:inline;font-size:inherit;margin:0 } /* --- KOTAK SIMULASI --- */ .page-peluang .simulation-box { background:linear-gradient(135deg,#fff 0%,#F0F7EF 100%); border-left:5px solid var(--green); padding:30px; border-radius:10px; margin-bottom:40px; box-shadow:0 5px 15px rgba(0,0,0,.05); } .page-peluang .simulation-box h3 { color:var(--green); margin-top:0; font-size:1.4rem; display:flex; align-items:center; gap:10px; } .page-peluang .simulation-box p {font-size:1.1rem;line-height:1.7;color:var(--text-dark);margin:0 } .page-peluang .sim-note {margin-top:10px;font-size:.95rem;color:#666;font-style:italic } .page-peluang .highlight-text { font-weight:bold; color:var(--navy); background-color:rgba(242,169,0,.2); padding:2px 8px; border-radius:4px; } /* --- AJAKAN UNDUH APLIKASI --- */ .page-peluang .app-download { background-color:var(--navy); color:#fff; border-radius:12px; padding:40px; text-align:center; } .page-peluang .app-download h3 { font-family:'Playfair Display',serif; font-size:2rem; margin-top:0; color:var(--gold); } .page-peluang .app-download p {max-width:600px;margin:0 auto 25px;font-size:1.05rem;opacity:.9 } .page-peluang .btn-outline { display:inline-block; border:2px solid var(--gold); color:var(--gold); padding:12px 30px; border-radius:5px; font-weight:bold; text-decoration:none; transition:.3s; text-transform:uppercase; letter-spacing:1px; } .page-peluang .btn-outline:hover {background-color:var(--gold);color:var(--navy) } /* --- 3 LANGKAH --- */ .page-peluang .how-it-works {background-color:#fff;padding:80px 5%;text-align:center } .page-peluang .steps-container {display:flex;justify-content:center;gap:50px;flex-wrap:wrap;margin-top:50px } .page-peluang .step {flex:1;min-width:250px } .page-peluang .step-number { width:60px; height:60px; background-color:var(--navy); color:var(--gold); font-size:1.5rem; font-weight:bold; display:flex; justify-content:center; align-items:center; border-radius:50%; margin:0 auto 20px; border:4px solid var(--off-white); box-shadow:0 5px 15px rgba(0,0,0,.1); } .page-peluang .step h3 {color:var(--green) } @media (max-width:768px) { .page-peluang .zenner-hero h1 {font-size:2.1rem } .page-peluang .compensation-section {padding:60px 6% } .page-peluang .app-download {padding:30px 22px } } /* ========================================================================== 6. HALAMAN LEGAL (kebijakan-privasi.html, kode-etik.html) ========================================================================== */ body.page-legal {line-height:1.8 } .page-legal .legal-container { max-width:1000px; margin:40px auto; background-color:#fff; padding:60px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.05); border-top:6px solid var(--gold); } .page-legal .document-number { text-align:center; font-weight:bold; color:#666; margin-bottom:40px; font-size:1.1rem; letter-spacing:1px; } .page-legal .legal-content h2 { font-family:'Playfair Display',serif; color:var(--navy); font-size:1.8rem; margin-top:50px; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px; } .page-legal .legal-content h2:first-child {margin-top:0 } .page-legal .legal-content h3 {color:var(--navy);font-size:1.2rem;margin-top:25px;margin-bottom:10px } .page-legal .legal-content p {font-size:1.05rem;color:#555;text-align:justify;margin-bottom:15px } .page-legal .legal-content ul, .page-legal .legal-content ol { padding-left:20px; margin-bottom:20px; color:#555; font-size:1.05rem; text-align:justify; } .page-legal .legal-content li {margin-bottom:10px } .page-legal .legal-content li strong {color:var(--text-dark) } .page-legal .legal-content a {color:var(--gold);text-decoration:none;font-weight:600 } .page-legal .legal-content a:hover {text-decoration:underline } .page-legal .signature {margin-top:60px;text-align:right;font-size:1.1rem;color:var(--navy) } @media (max-width:768px) { .page-legal .legal-container {margin:20px;padding:30px } .page-legal .legal-content h2 {font-size:1.4rem } .page-legal .signature {text-align:center } }