/**CSS INDEX**/ :root{ --accent: #c8781a; --header-bg: #b48a54; --brown-dark: #2A1E1E; --cream: #f7efe6; --muted: #6b645f; --content-width: 1200px; --pad-x: 24px; --radius: 14px; } /* Base reset */ *{box-sizing:border-box} html,body{height:100%;margin:0;padding:0} body{ font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial; color:var(--brown-dark); background:#fff; line-height:1.45; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Container util */ .container{max-width: var(--content-width);margin: 0 auto;padding: 0 var(--pad-x)} /* ========================= HEADER - GLOBAL (default untuk SEMUA HALAMAN) ========================= */ .site-header{position: relative;z-index: 60;background: var(--header-bg);padding: 12px 0;border-bottom:3px solid rgba(0,0,0,0.06);transition: background .22s ease, backdrop-filter .22s ease;} /* wrapper default (non-home) */ /* .nav-wrap{display:flex;align-items:center;gap:14px;position:relative;height:72px;max-width: var(--content-width);margin: 0 auto;padding: 0 var(--pad-x)} */ /* hanya untuk home */ .home-page .nav-wrap {position: relative; display: flex;align-items: center;gap: 14px} .home-page .nav-wrap nav {margin: 0 auto} .home-page .nav-wrap nav ul {display: flex;gap: 36px;justify-content: center;align-items: center;margin: 0;padding: 0;list-style: none} .home-page .nav-wrap nav a {font-family: "Kadwa", serif;font-weight: 700;font-size: 20px;color: #fff;text-decoration: none;padding: 6px 10px} /* Brand */ .brand{ display:flex; gap:12px; align-items:center; z-index:2; } .brand-logo{ width:58px; height:auto; display:block; } .brand-text .site-title{font-family:"Kadwa", serif;font-weight:700;color:#fff;font-size:18px;line-height:1} .brand-text .muted-note{color:rgba(255,255,255,0.9);font-size:12px;margin-top:2px} /* Main nav default (non-home) */ .main-nav{position:absolute;left:50%;transform:translateX(-50%);z-index:1} .main-nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;align-items:center} .main-nav a{color:#fff;text-decoration:none;font-family:"Kadwa",serif;font-weight:700;font-size:18px;letter-spacing:0.2px;padding:6px 10px;display:inline-block;transition:opacity .12s ease, transform .12s ease} .main-nav a:hover{ opacity:0.95; transform: translateY(-2px); } .main-nav a.active{ text-decoration:none; border-bottom:2px solid var(--accent); } /* ========================= HOME-SPECIFIC OVERRIDES (aturan di bawah hanya berlaku bila ) ========================= */ /* Make header transparent on home */ .home-page .site-header{position: absolute;top:0;left:0;right:0;background: transparent;border-bottom: none;padding: 18px 0} /* Header layout for home: nav above logo */ .home-page .nav-wrap{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 8px;height: auto;max-width: var(--content-width);margin: 0 auto;padding: 0 var(--pad-x)} /* Center nav and remove absolute transform */ .home-page .main-nav {position: relative;left: auto;transform: none;order: 1} /* Increase nav spacing on home */ .home-page .main-nav ul{gap:36px;display:flex;align-items:center;justify-content:center;margin:0} /* Menu styling on home: white text */ .home-page .main-nav a{font-size:20px;padding:6px 10px;color: #fff;text-shadow: 0 1px 0 rgba(0,0,0,0.15)} /* Active menu styling */ .home-page .main-nav a.active{color: #fff;border-bottom: 2px solid var(--accent);padding-bottom: 4px} /* Brand (logo + text) moved below nav */ .home-page .brand{order: 2;flex-direction: column;align-items: center;gap: 6px;z-index: 2} .home-page .brand-logo{ width:64px; height:auto; } /* Brand text slightly larger on home */ .home-page .brand-text .site-title{font-size:22px;font-weight:900;color: #fff} /* ========================= HERO - HANYA HOME ========================= */ .home-page .hero{position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;width: 100vw;min-height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 0;background: #000; /* position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;margin-bottom:0 */ } /* background */ .home-page .hero-img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;display: block;transform: scale(1.02); /* opsional: sedikit zoom untuk efek */will-change: transform;z-index: 0; /* position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform: scale(1.03) */ } /* overlay contrast */ .home-page .hero-overlay{position: absolute;inset: 0;background: linear-gradient(180deg, rgba(6,6,6,0.45) 0%, rgba(6,6,6,0.55) 40%, rgba(6,6,6,0.65) 100%);z-index: 1; /* position:absolute;inset:0;background: linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.55) 35%, rgba(6,6,6,0.6) 100%);z-index:30 */ } /* content centered */ .home-page .hero-content{position: relative;z-index: 2;width: 100%;max-width: 1100px;padding: 48px 20px;box-sizing: border-box;text-align: center;color: #fff; /* position:relative;z-index:40;text-align:center;color:#fff;padding: 28px 20px;max-width:1100px;margin: 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:60px;padding-bottom:60px; */ } .home-page .hero-logo{ width:100px; display:block; margin:0 auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); } .home-page .hero-sub{ margin:0; font-size:15px; opacity:0.95; color:rgba(255,255,255,0.9) } .home-page .hero-title{margin:6px 0 0;font-family:"Kadwa", serif;font-weight:900;font-size: clamp(20px, 4vw, 60px);line-height: 0.98;color:#fff;text-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.45);letter-spacing: 0.2px} .home-page .hero-tag{margin:0;opacity:0.95;font-weight:600;color: rgba(255,255,255,0.95);text-shadow: 0 6px 18px rgba(0,0,0,0.45);font-size:18px} /* ========================= Footer ========================= */ .site-footer {background: #e5d7b7;margin-top: 40px;padding: 28px 18px;border-radius: 0} .site-footer .footer-inner {max-width: var(--content-width);margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;gap: 20px;background: none;box-shadow: none} .site-footer .footer-left {display: flex;gap: 14px;align-items: center;background: none} .site-footer .footer-left img {width: 80px;flex-shrink: 0} .site-footer .footer-left .addr {font-size: 14px;margin-top: 4px} .site-footer .contact {font-size: 14px;background: none} .site-footer .sep {border-top: 1px solid #cbbf9a;margin: 18px 0} .site-footer .copyright {max-width: var(--content-width);margin: 14px auto;padding: 0 18px;color: #6b5135;font-size: 13px;text-align: center} /* ========================= RESPONSIVE ========================= */ @media (max-width: 1200px){ .nav-wrap{ height:92px; } .main-nav a{ font-size:22px; } .home-page .hero-title{ font-size: clamp(36px, 9.2vw, 110px); } } @media (max-width: 980px){ /* On smaller screens hide main nav (we assume you'll replace with mobile toggle) */ .main-nav{ display:none; } .brand-text .site-title{ font-size:18px; } .home-page .hero{ min-height:80vh; } .home-page .hero-content{ padding-top:40px; padding-bottom:40px; } .home-page .hero-title{ font-size: clamp(28px, 8vw, 62px); } } @media (max-width: 520px){ .nav-wrap{ height:72px; padding:0 12px; } .brand-logo{ width:48px; } .home-page .hero{ min-height:68vh; } .home-page .hero-title{ font-size: clamp(22px, 9.8vw, 40px); } .home-page .hero-sub{ font-size:13px;} .home-page .hero-tag{ font-size:14px;} } /* ----------------------------- CONTENT SECTIONS (EXPLORE, SAMBUTAN, TEAM, GALLERY) Paste this at the end of your css/styles.css ----------------------------- */ /* Ensure main content is above hero overlay and visible */ .home-page main{position: relative;z-index: 60;background: #fff;padding-top: 48px; /* gap under hero */box-sizing: border-box} /* ---------- EXPLORE (JELAJAHI DESA) ---------- */ .explore{display: grid;grid-template-columns: 1fr 520px;gap: 48px;align-items: start;padding: 80px 110px} /* Left column */ .explore-left h2{font-family: "Kadwa",serif;color: #c8781a;;font-size: 50px;font-weight: 900;margin-bottom: 20px} .explore-left .lead{color:#5b5550;font-size: 20px;line-height:1.7;max-width: 560px} /* Right column (card grid 2x2) */ .explore-right{width: 100%;max-width: 520px} .explore-right .card-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: 28px} /* Card */ .explore-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px 24px;background:#fff;border-radius:14px;border:1px solid rgba(0,0,0,0.06);box-shadow: 0 6px 20px rgba(0,0,0,0.05);text-decoration:none;color:#2a1e1e;transition: all 0.2s ease, box-shadow .12s ease;min-height:110px} .explore-card:hover{ transform:translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.08)} /* icon wrapper */ .icon-wrap{width:90px;height:90px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(0,0,0,0.06);background:#fafafa; margin-bottom:10px} .icon-wrap img{ width:50px; height:auto} /* card label */ .card-label{font-family:"Kadwa", serif;font-weight:700;font-size:15px;text-transform:uppercase;color:#2a1e1e} /* ---------- SAMBUTAN ---------- */ .sambutan{display:grid;grid-template-columns: 340px 1fr;gap: 48px;padding: 80px 0;align-items:start} .sambutan-left .kades-photo{width:100%;height:auto;object-fit:cover;border-radius:12px;box-shadow: 0 8px 24px rgba(0,0,0,0.06)} .sambutan-right h3{margin-top:0;margin-bottom:16px;font-family:"Kadwa", serif;color:#c8781a;font-size:32px} .sambutan-right p{color:#5b5550;font-size:20px;line-height:1.8;text-align:justify} /* ---------- TEAM GRID ---------- */ .team{ padding: 60px 0; } .team h3{ font-family:"Kadwa", serif; font-size:25 px;color:var(--brown-dark);text-align:left; margin-bottom:32px} .team-grid{display:grid;grid-template-columns: repeat(4, 1fr);gap:24px;align-items:start} .team-item{display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow: 0 6px 14px rgba(0,0,0,0.06);overflow:hidden;transition:transform 0.18s ease, box-shadow 0.18s ease} .team-item:hover{transform: translateY(-6 px);box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08)} .team-name{padding:12px 10px;text-align:center;font-weight:700;font-size:15px;color: var(--brown-dark);background:#fff;border-bottom:1px solid rgba(0,0,0,0.04)} .team-label{background:#D7A5A5;color:#fff;text-align:center;font-weight:600;font-size:14px;padding:11px 8 px;letter-spacing:0.3px} /* area foto */ .photo-wrap {width: 100%;height: 220px;background: #f0f0f0;display: flex;align-items: center;justify-content: center} .photo-wrap img {width: 100%;height: 100%;object-fit: cover;display:block} /* placeholder (belum ada foto) */ .photo-wrap.placeholder {background: repeating-linear-gradient(45deg,#e5e5e5,#e5e5e5 10px,#dcdcdc 10px,#dcdcdc 20px)} /* ---------- GALERI DESA ---------- */ .gallery {padding: 48px 0 60px;background: #f6f7f8;margin-top: 22px} .gallery-title {font-family: "Kadwa", serif;color: var(--accent, #c8781a);font-size: 26px;margin: 0 0 20px;text-align: left;padding-left:6px} .gallery-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 22px;align-items: start;width: 100%} .gallery-item {background: #ffffff;border-radius: 14px;overflow: hidden;box-shadow: 0 8px 22px rgba(0,0,0,0.06);aspect-ratio: 3 / 4;display: block;transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease} .gallery-item img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .28s cubic-bezier(.2,.9,.2,1)} .gallery-item:hover {transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,0.12)} .gallery-item:hover img {transform: scale(1.04)} .gallery-item:focus-within, .gallery-item:focus {outline: 3px solid rgba(200,120,26,0.14);outline-offset: 6px} /* --------------------------- RESPONSIVE GALERI --------------------------- */ @media (max-width: 980px) { .gallery-grid {grid-template-columns: repeat(2, 1fr);gap: 18px;} .gallery-item { aspect-ratio: 3 / 4.2; }} @media (max-width: 560px) { .gallery-grid {grid-template-columns: 1fr;gap: 14px} .gallery-item { aspect-ratio: 3 / 4.6; min-height: 220px; } /* portrait panjang di hp */ .gallery { padding: 28px 0 40px; }} /* --------------------------- RESPONSIVE --------------------------- */ @media (max-width: 1200px){ .team-grid{grid-template-columns:repeat(3,1fr);gap:20px} .photo-wrap{height:200px} } @media (max-width: 900px){ .team-grid{grid-template-columns:repeat(2,1fr);gap:18px} .photo-wrap{height:200px} .team-name{font-size: 14px; padding: 10px} .team-label{font-size: 13px; padding: 10px} } @media (max-width: 550px){ .team-grid{grid-template-columns:repeat(1fr);gap:14px} .photo-wrap{height:180px} .team-name{font-size: 14px} .team-label{font-size: 13px; padding: 9px} } /* @media (max-width: 1100px){ .explore{ grid-template-columns: 1fr 420px; gap:28px; } .explore-left h2{ font-size:40px; } .team-grid{ grid-template-columns: repeat(4,1fr); } .gallery-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width: 880px){ .explore{ grid-template-columns: 1fr; } .explore-right{ order:2; max-width:none; width:100%; } .explore-left{ order:1; margin-bottom: 18px; } .explore-right .card-grid{ grid-template-columns: repeat(2,1fr); } .sambutan{ grid-template-columns: 1fr; } .team-grid{ grid-template-columns: repeat(3,1fr); } } @media (max-width: 520px){ .main-nav ul{ display:none; } /* add mobile menu later */ /* .explore-right .card-grid{ grid-template-columns: 1fr; } .team-grid{ grid-template-columns: repeat(2,1fr); } .gallery-grid img{ height:160px; } .explore-left h2{ font-size:28px; } .home-page .hero{ min-height:62vh; } .home-page .hero-title{ font-size: clamp(22px, 11vw, 34px); } } */ */ /** CSS PROFIL DESA **/ :root{ --brown-dark:#2A1E1E; --brown:#B39260; --accent:#c9752b; --muted:#2A1E1E; --card-bg:#f6f4f2; --content-width:980px; } *{box-sizing:border-box} body{ margin:0; font-family:'Kadwa',system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial; color:#333; background:white; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } header{ background:linear-gradient(180deg,var(--brown) 0%, #cfb086 100%); padding:18px 0; border-bottom:4px solid rgba(0,0,0,0.06); position:sticky;top:0;z-index:20; } .nav-wrap{max-width:var(--content-width);margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 18px} .logo{display:flex;align-items:center;gap:12px} .logo img{width:70px;height:70px} .site-title{font-family:'Kadwa';font-weight:700;color:var(--brown-dark)} nav{margin-left:auto} nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px} nav a{color:var(--brown-dark);text-decoration:none;font-weight:600} nav a.active{color:var(--brown-dark);text-decoration:underline} /* sejarah desa*/ main{max-width:var(--content-width);margin:32px auto;padding:0 18px} .hero-title{text-align:center;margin-bottom:22px} .hero-title h1{font-family:'Kadwa';color:var(--accent);font-size:35px;margin:6px 0} .sejarah{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start} /* .sejarah img{width:100%;height:auto;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,0.08)} */ .sejarah img {width: 350px;height: 465px;object-fit: cover;border-radius: 6px;box-shadow: 0 6px 20px rgba(0,0,0,0.08);} /* .sejarah p{line-height:1.68;text-align:justify} */ .sejarah p {font-family: 'Kadwa', sans-serif;font-size: 16px;font-weight: 400;color: #5b5550;line-height: 1.68;text-align: justify} /* visi misi*/ .card-row {display: flex; flex-direction: column; gap: 18px; margin: 22px auto; padding: 0 12px; max-width: var(--content-width); width: 100%;} .card {background:#D5D5D5; padding: 14px 20px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); width: 100%; max-width: 760px; margin: 0 auto; height: auto; min-height: 0; box-sizing: border-box;} .card h3 {text-align: center; color: var(--accent); margin: 6px 0 12px; font-weight: 700; letter-spacing: 0.5px;} .card ul{font-weight: 400 !important; color: #2A1E1E; line-height: 1.65; margin: 0 0 10px; text-align: left; font-size: 16px;} /* ===== Perbaikan agar teks VISI tidak bold ===== */ .card.vision p, .card.vision .muted-note { font-weight: 400 !important; /* pastikan tidak bold */ text-align: center; color: #2A1E1E; } /* bagan pemerintahan*/ section h2.section-title{font-family:'Kadwa';color:var(--accent);text-align:center;margin:48px 0 18px;font-size:35px} .chart-img{display:flex;justify-content:center;margin:18px 0} .chart-img img{max-width:860px;width:100%;height:auto} /*footer*/ .site-footer {background: #e5d7b7;margin-top: 40px;padding: 28px 18px;border-radius: 0} .site-footer .footer-inner {max-width: var(--content-width);margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;gap: 20px;background: none;box-shadow: none} .site-footer .footer-left {display: flex;gap: 14px;align-items: center;background: none} .site-footer .footer-left img {width: 80px;flex-shrink: 0} .site-footer .footer-left .addr {font-size: 14px;margin-top: 4px} .site-footer .contact {font-size: 14px;background: none} .site-footer .sep {border-top: 1px solid #cbbf9a;margin: 18px 0} .site-footer .copyright {max-width: var(--content-width);margin: 14px auto;padding: 0 18px;color: #6b5135;font-size: 13px;text-align: center} /* responsive */ @media (max-width:980px){ .sejarah{grid-template-columns:1fr;} .nav-wrap{padding:0 12px} nav ul{gap:12px} } @media (max-width:520px){ .hero-title h1{font-size:26px} .card{padding:14px} } /* small decorative separator */ .sep{height:2px;background:rgba(0,0,0,0.05);margin-top:18px} /* small typography tweaks */ .muted-note { font-size: 15px; color: #2A1E1E; font-weight: 700; /* atau: font-weight: bold; */ } /** CSS INFOGRAFIS **/ :root{ --brown-dark:#2A1E1E; --brown:#B39260; --accent:#c9752b; --card-bg:#f6f4f2; --muted:#5b5b5b; --content-width:980px; --page-pad:18px; } /* Reset / base */ *{box-sizing:border-box} html,body{height:100%;margin:0;padding:0} body{ font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:#fff; color:var(--brown-dark); -webkit-font-smoothing:antialiased; } .container{max-width:var(--content-width);margin:0 auto;padding:0 var(--page-pad)} header{ background:linear-gradient(180deg,var(--brown) 0%, #cfb086 100%); padding:18px 0; border-bottom:4px solid rgba(0,0,0,0.06); position:sticky;top:0;z-index:20; } .nav-wrap{max-width:var(--content-width);margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 18px} .logo{display:flex;align-items:center;gap:12px} .logo img{width:70px;height:70px} .site-title{font-family:'Kadwa';font-weight:700;color:var(--brown-dark)} nav{margin-left:auto} nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px} nav a{color:var(--brown-dark);text-decoration:none;font-weight:600} nav a.active{color:var(--brown-dark);text-decoration:underline} /* page header/hero */ .page-title{font-family:"Kadwa",serif;color:var(--accent);text-align:center;margin:40px 0 12px;font-size:28px} .lead{max-width:none;margin:0 0 28px;color:var(--muted);text-align:left;line-height:1.6} @media (max-width:520px){ .lead { padding: 0 var(--page-pad); } } /* BATAS WILAYAH */ .page-title {font-family: "Kadwa", serif;color: var(--accent);text-align: center;margin: 28px 0 8px;font-size:35px;font-weight: 600} .lead {max-width: none;margin: 0 0 28px;color: #5b5550;text-align: left;line-height: 1.6} .batas-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:18px 0} .batas-item{background:#D5D5D5;padding:14px 16px;border-radius:14px;display:flex;align-items:center;gap:14px;box-shadow: 0 6px 12px rgba(0,0,0,0.06);min-height:72px} .batas-item .icon{width:56px;height:56px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow: 0 4px 8px rgba(0,0,0,0.06);flex-shrink:0;padding:6px} .batas-item .icon img{width:36px;height:36px;object-fit:contain;display:block} .batas-item .info{display:block;} .batas-item .title{display:block;color:var(--accent);font-weight:700;font-size:16px;margin-bottom:4px} .batas-item .muted{color:var(--muted);font-size:14px;line-height:1.3} /* responsive: satu kolom di layar kecil */ @media (max-width:520px){ .batas-grid{grid-template-columns:1fr;gap:12px} .batas-item .icon{width:48px;height:48px} .batas-item .icon img{width:30px;height:30px} } /* LUAS WILAYAH */ .luas-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 24px;margin-top: 20px} .luas-card {background: #D5D5D5;padding: 20px 18px;border-radius: 14px;text-align: left;box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);transition: transform 0.2s ease, box-shadow 0.2s ease} .luas-card:hover {transform: translateY(-4px);box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08)} .luas-card h4 {font-family: "Kadwa", serif;font-weight: 700;font-size: 17px;color:#B54D4D;text-align: center;margin: 0 0 12px} .luas-card img {width: 100%;height: 200px;object-fit: cover;border-radius: 8px;margin-bottom: 10px} .luas-card p {font-size: 15px;color: var(--brown-dark);line-height: 1.6;text-align: left;margin: 0;white-space: pre-line} .luas-card ul {margin: 0;padding-left: 18px;color: var(--brown-dark);line-height: 1.6} .luas-card li {margin-bottom: 4px} .luas .muted {color: #5b5550;font-family: "Poppins", system-ui, Arial, sans-serif;font-weight: 400;text-align: center} /* responsif */ @media (max-width: 980px) { .luas-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } } @media (max-width: 600px) { .luas-grid { grid-template-columns: 1fr; } .luas-card img { height: 130px; } } /* JUMLAH PENDUDUK */ .section-title{font-family:"Kadwa",serif;color:var(--accent);text-align:left;margin:28px 0 12px;font-size:35px} .table-figure{display:flex;justify-content:center;margin:14px 0} .table-figure img{max-width:none;width:75%;height:auto;border-radius:6px;box-shadow:0 8px 18px rgba(0,0,0,0.04)} .penduduk .muted {color: #5b5550;font-family: "Poppins", system-ui, Arial, sans-serif;font-weight: 400;text-align: left} /* PENDIDIKAN */ .pendidikan .edu-grid, .edu-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 18px;margin-top: 12px} .edu-card {background: #efe0c6;border-radius: 12px;padding: 18px;aspect-ratio: 1 / 1;min-height: 140px;position: relative;box-shadow: 0 6px 14px rgba(0,0,0,0.06);border: 1px solid rgba(0,0,0,0.04);display: flex;flex-direction: column;justify-content: flex-start;border: 2px solid #AB6F6F} .edu-card .title {font-weight: 700;color: #4d3428;margin-bottom: 12px;font-size: 15px} .edu-card .counts {display: flex;flex-direction: column;gap: 10px} .edu-card .count {display: flex;align-items: center;gap: 10px;font-size: 15px;color: #2a1e1e} .edu-card .icon {width: 28px;height: 28px;object-fit: contain;display: inline-block;padding: 3px;border-radius: 6px;box-shadow: 0 2px 4px rgba(0,0,0,0.04)} .edu-card .num {font-weight: 600} .edu-card .total {position: absolute;right: 16px;bottom: 12px;font-weight: 800;font-size: 20px;color: #8f4a2b} /* hover ringan */ .edu-card:hover { transform: translateY(-4px); transition: transform .18s ease; } /* KONDISI INFRASTRUKTUR PERHUBUNGAN .table-figure img {max-width: none;width: 75%;height: auto;border-radius: 6px;box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04)} */ /* INDIKATOR KESEHATAN */ .indikator { margin-top: 8px; } .indikator-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 18px 48px;align-items: start;justify-items: center} .pill {display: block;width: 100%;max-width: 520px;padding: 12px 26px;border-radius: 12px;background: #F6E4D8;border: 2px solid #AB6F6F;box-shadow:0 6px 0 var(--pill-shadow),inset 0 -1px 0 rgba(255,255,255,0.5);font-family: "Kadwa", serif;font-weight: 400;color: var(--text);font-size: 18px;line-height: 1.1;text-align: center;transition: transform .12s ease, box-shadow .12s ease} .pill:hover {transform: translateY(-3px);box-shadow:0 10px 8px rgba(0,0,0,0.06),inset 0 -1px 0 rgba(255,255,255,0.55)} .indikator-grid .pill:nth-child(even) {margin-top: 26px} .pill.short { max-width: 380px; } /* INFORMASI DUSUN */ .informasi-dusun {padding: 40px 18px;background: transparent} .informasi-title {font-family: "Kadwa", serif;color: var(--accent, #b65f3a);text-align: center;font-size: 35px;margin: 10px 0 18px} .informasi-lead {max-width: 980px;margin: 0 auto 28px;color:#5b5550;font-size: 16px;line-height: 1.9;text-align: left;padding: 0 12px} .informasi-grid {max-width: var(--content-width, 980px);margin: 0 auto;display: grid;grid-template-columns: 1fr 520px;gap: 28px;align-items: start;padding: 0 12px} .dusun-list-wrap { padding-top: 6px; } .dusun-list {list-style: disc;padding-left: 28px;margin: 6px 0;color: #5b5550;font-size: 16px;line-height: 2.1} .dusun-list li {margin-bottom: 8px;font-weight: 400} .dusun-collage{position: relative;width: 100%;height: 360px;display: block;pointer-events: none} .collage-img{position: absolute;object-fit: cover;border-radius: 6px;box-shadow: 0 14px 30px rgba(0,0,0,0.18);border: 6px solid rgba(255,255,255,0.9);width: auto;height: auto;transition: transform .18s ease;pointer-events: auto} .dusun-collage .img-1{width: 48%;height: 78%;left: 0;top: 10%;z-index: 3;transform: rotate(-2deg)} .dusun-collage .img-2{width: 36%;height: 82%;right: 0;top: 2%;z-index: 4;transform: rotate(2deg)} .dusun-collage .img-3{width: 58%;height: 34%;left: 50%;transform: translateX(-50%) rotate(-0.5deg);bottom: 6%;z-index: 2} /* tombol hover effect untuk sedikit 'pop' */ .dusun-collage .collage-img:hover{transform: scale(1.02) rotate(0deg);box-shadow: 0 20px 40px rgba(0,0,0,0.22);z-index: 10} /* RESPONSIVE */ /* untuk layar medium - kecil, ubah grid menjadi 1 kolom, gambar di bawah list */ @media (max-width: 980px){ .informasi-grid{ grid-template-columns: 1fr; gap: 22px; } .dusun-collage{ height: 320px; } .dusun-collage .img-1{ left: 8%; top: 4%; width: 46%; height: 62%; transform: rotate(-1deg);} .dusun-collage .img-2{ right: 8%; top: 4%; width: 46%; height: 62%; transform: rotate(1deg);} .dusun-collage .img-3{ width: 72%; left: 50%; bottom: 2%; transform: translateX(-50%) rotate(0deg); } } /* untuk ponsel sempit, atur agar gambar lebih kecil dan rapi */ @media (max-width: 520px){ .informasi-lead{ font-size:15px; line-height:1.7; padding: 0 8px; } .informasi-grid{ grid-template-columns: 1fr; padding: 0 8px; } .dusun-list{ padding-left:22px; font-size:15px; line-height:1.9; } .dusun-collage{ height: 260px; } .dusun-collage .img-1{ width:40%; height:56%; left:6%; top:6%; transform: rotate(-1deg); } .dusun-collage .img-2{ width:40%; height:56%; right:6%; top:6%; transform: rotate(1deg); } .dusun-collage .img-3{ width:72%; height:34%; left:50%; bottom:2%; transform: translateX(-50%); } } /* footer */ .site-footer {background: #e5d7b7;margin-top: 40px;padding: 28px 18px;border-radius: 0} .site-footer .footer-inner {max-width: var(--content-width);margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;gap: 20px;background: none;box-shadow: none} .site-footer .footer-left {display: flex;gap: 14px;align-items: center;background: none} .site-footer .footer-left img {width: 80px;flex-shrink: 0} .site-footer .footer-left .addr {font-size: 14px;margin-top: 4px} .site-footer .contact {font-size: 14px;background: none} .site-footer .sep {border-top: 1px solid #cbbf9a;margin: 18px 0} .site-footer .copyright {max-width: var(--content-width);margin: 14px auto;padding: 0 18px;color: #6b5135;font-size: 13px;text-align: center} /* Responsive: tumpuk konten footer di layar kecil */ @media (max-width: 720px) { .site-footer .footer-inner { flex-direction: column; gap: 12px; align-items: flex-start; padding: 0 16px; } .site-footer .footer-left img { width: 64px; } footer .copyright { padding: 0 16px; } } /* small utilities */ .sub-title{font-family:"Kadwa",serif;color:var(--brown-dark);margin:12px 0} /* responsive */ @media (max-width:980px){ .batas-grid{grid-template-columns:1fr} .luas-grid{grid-template-columns:repeat(2,1fr)} .edu-grid{grid-template-columns:repeat(2,1fr)} .nav-wrap{padding:12px} nav ul{gap:12px} } @media (max-width:520px){ .luas-grid{grid-template-columns:1fr} .edu-grid{grid-template-columns:1fr} .logo-text .site-title{font-size:18px} .page-title{font-size:20px} /* .table-figure img{max-width:100%} */ .table-figure img { width: 40%; } } /* small tweaks to better match Figma spacing */ .container .section{padding-bottom:10px} /* small typography tweaks */ .muted-note { font-size: 15px; color: #2A1E1E; font-weight: 700; } /**CSS LAYANAN**/ /** ========================================================== CSS LAYANAN — DESA SRUWEN Full file – sudah termasuk kontak + ikon gambar ========================================================== */ .layanan-page { --accent: #c9752b; --muted: #5b5b5b; --brown-dark: #2A1E1E; --content-width: 1100px; background: #fff; } .layanan-page .container {max-width: var(--content-width);margin: 0 auto;padding: 0 24px;box-sizing: border-box} /* ========================================================== HERO TITLE ========================================================== */ .layanan-page .page-hero {background: #fff;padding: 28px 0 12px;text-align: center;border-bottom: 4px solid rgba(0,0,0,0.03)} .layanan-page .hero-title {font-family: "Kadwa", serif;color: var(--accent);font-size: 48px;margin: 0;font-weight: 700;line-height: 1} /* ========================================================== FULL BLEED PALE BOX ========================================================== */ .layanan-page .layanan-area {position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;width: 100vw;background: #ede3cc;padding: 48px 0;box-shadow: 0 12px 36px rgba(0,0,0,0.06);box-sizing: border-box} .layanan-page .layanan-inner {max-width: var(--content-width);margin: 0 auto;display: grid;grid-template-columns: 1fr 1fr 1fr;align-items: start;gap: 10px 40px;padding: 0 24px;box-sizing: border-box} /* ========================================================== COLUMN BASE ========================================================== */ .layanan-page .col {display: flex;flex-direction: column;gap: 12px} .layanan-page .col-title {margin: 0;font-size: 20px;font-family: "Kadwa", serif;color: var(--brown-dark);font-weight: 700;line-height: 1.05} /* ========================================================== LEFT COLUMN (Logo + Alamat) ========================================================== */ .layanan-page .col-left {flex-direction: row;align-items: flex-start;gap: 20px} .layanan-page .layanan-logo {width: 96px;height: 96px;border-radius: 16px;padding: 10px;display: flex;align-items: center;justify-content: center;box-shadow: 0 8px 20px rgba(0,0,0,0.06);flex-shrink: 0} .layanan-page .layanan-logo img {width: 100%;height: 100%;object-fit: contain;display: block;border-radius: 8px} .layanan-page .addr {margin: 0;color: rgba(0,0,0,0.7);font-size: 16px;line-height: 1.8} /* ========================================================== CENTER COLUMN (Waktu Layanan) ========================================================== */ .layanan-page .muted {margin: 0;color: var(--muted);font-size: 16px;line-height: 1.9} /* ========================================================== RIGHT COLUMN – HUBUNGI KAMI (Menggunakan gambar ikon, sesuai desain Figma) ========================================================== */ .layanan-page .contact-list {list-style: none;padding: 0;margin: 8px 0 0;display: flex;flex-direction: column;gap: 18px} .layanan-page .contact-item {display: flex;align-items: center;gap: 12px;font-size: 16px} .layanan-page .contact-icon {width: 34px;height: 34px;object-fit: contain;display: block} .layanan-page .contact-text {font-family: "poppins", serif;font-size: 20px;color:#2f2a28;line-height: 1.15;text-decoration:none;letter-spacing:0.2px} /*phone*/ .layanan-page .phone-link {color: inherit;text-decoration: none;font-weight: 500} .layanan-page .phone-link:hover {text-decoration: underline;text-underline-offset: 4px} /* email biru */ .layanan-page .email-link {color: #1155cc;text-decoration: underline;font-weight: 500;text-underline-offset: 3px} .layanan-page .email-link:hover {color: #0b3fa6} /* reduce boldness of the social text (if still using Kadwa) */ .layanan-page .contact-item .contact-text.kadwa {font-family: "poppins", serif;font-weight: 400} /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 980px) { .layanan-page .layanan-inner {grid-template-columns: 1fr;gap: 22px} .layanan-page .hero-title {font-size: 36px} .layanan-page .layanan-logo {width: 84px;height: 84px} .layanan-page .contact-icon {width: 30px;height: 30px} .layanan-page .contact-text {font-size: 18px} } /**CSS POTENSI UMKM**/ .potensi-page { /* page-scoped CSS variables (tidak menimpa :root global) */ --pot-accent: #c8781a; --pot-bg: #faf9f8; --pot-card: #efe6db; --pot-muted: #6b645f; --pot-content-width: 1100px; --pot-pad: 22px; --pot-radius: 12px; box-sizing: border-box; /* safe default */ } /* layout container limited to potensi page */ .potensi-page .container {max-width: var(--pot-content-width);margin: 0 auto;padding: 0 var(--pot-pad)} /* header inside potensi page only (won't change global header elsewhere) */ .potensi-page .site-header {background: var(--pot-accent);color: #fff;padding: 10px 0} .potensi-page .site-header .header-inner {display:flex;align-items:center;gap:18px} .potensi-page .logo-small { width:44px; height:auto; } .potensi-page .top-nav { margin-left:auto; display:flex; gap:18px; } .potensi-page .top-nav a { color: rgba(255,255,255,0.95); text-decoration:none; font-weight:600 } .potensi-page .top-nav a.active { border-bottom:3px solid rgba(0,0,0,0.08); padding-bottom:6px } /* HERO (scoped) */ .potensi-page .hero { padding: 28px 0 8px; text-align:center } .potensi-page .page-title {font-family: "Kadwa", serif;color: var(--pot-accent);font-size: 35px;margin: 0 0 8px;font-weight: 600} .potensi-page .lead { margin:0 auto; color: var(--pot-muted); max-width:820px;line-height: 1.7;text-align: center} /* MAP AREA (scoped) */ .potensi-page .map-area{margin:12px 0 26px} .potensi-page .map-area-title{font-family:"Kadwa",serif;color:var(--brown-dark);font-size:20px;font-weight:700;margin:6px 0 10px} /* map-card gives white card look like Figma */ .potensi-page .map-card{background: linear-gradient(180deg,#fff,#fbf7f2);padding:10px;border-radius:10px; box-shadow: 0 6px 14px rgba(0,0,0,0.04)} .potensi-page .map-image{width:100%;height:auto;display:block;border-radius:8px;object-fit:cover} /* UMKM list (scoped) */ .potensi-page .umkm-list{margin:20px 0 40px} /* Pill header (rounded rectangle) dengan nomor bulat di kiri */ .potensi-page .umkm-pill{display:inline-flex;align-items:center;gap:12px;background:#eee6df;padding:10px 18px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);box-shadow: 0 2px 0 rgba(0,0,0,0.03) inset;margin-bottom:6px;width:fit-content} .potensi-page .umkm-pill .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#d9c6b6;color:var(--brown);font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,0.06);flex-shrink:0} .potensi-page .umkm-pill .pill-title{font-weight:700;color:var(--brown);font-family:"Kadwa",serif} /* info pemilik (di bawah pill) */ .potensi-page .umkm-info{margin:8px 0 18px;color:var(--brown)} .potensi-page .umkm-info .owner{font-weight:600;margin-bottom:6px} .potensi-page .umkm-info .owner-meta{color:var(--muted);margin-bottom:6px} /* grid gambar / kartu */ .potensi-page .cards-grid{display:grid;grid-template-columns: repeat(3, 1fr);gap:16px;margin-bottom:34px} /* card tampilkan lebih memanjang ke bawah (bukan kotak persegi) */ .potensi-page .card{background:var(--card-bg);border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,0.06);min-height:300px;display:block} .potensi-page .card img{display:block;width:100%;height:240px;object-fit:cover;border-radius:12px} /* jarak antar section */ .potensi-page .umkm-section{margin-bottom:18px} /* responsive (scoped) */ @media (max-width:1000px) { .potensi-page .cards-grid { grid-template-columns: repeat(2, 1fr); } .potensi-page .card img { height:200px; } } @media (max-width:640px) { .potensi-page .cards-grid { grid-template-columns: 1fr; } .potensi-page .card { min-height:220px; } .potensi-page .card img { height:160px; } .potensi-page .map-area { padding:8px; } .potensi-page .page-title { font-size:24px; } } /* footer inside potensi page: keep global footer untouched. If you need potensi-specific footer tweaks, scope under .potensi-page .site-footer */ .site-footer {background: #e5d7b7;margin-top: 40px;padding: 28px 18px;border-radius: 0} .site-footer .footer-inner {max-width: var(--content-width);margin: 0 auto;display: flex;justify-content: space-between;align-items: flex-start;gap: 20px;background: none;box-shadow: none} .site-footer .footer-left {display: flex;gap: 14px;align-items: center;background: none} .site-footer .footer-left img {width: 80px;flex-shrink: 0} .site-footer .footer-left .addr {font-size: 14px;margin-top: 4px} .site-footer .contact {font-size: 14px;background: none} .site-footer .sep {border-top: 1px solid #cbbf9a;margin: 18px 0} .site-footer .copyright {max-width: var(--content-width);margin: 14px auto;padding: 0 18px;color: #6b5135;font-size: 13px;text-align: center}