|
|
| Baris 34: |
Baris 34: |
| --wp-blue:#2B90D9; | | --wp-blue:#2B90D9; |
| --wp-blue-dark:#1c6ca8; | | --wp-blue-dark:#1c6ca8; |
| --wp-terracotta:#C1440E;
| |
| --wp-card:#ffffff;
| |
| --wp-border:#e8e5e0;
| |
| --wp-muted:#6b6b6b;
| |
| --wp-radius:14px;
| |
| --wp-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
| |
| --wp-shadow-hover:0 4px 10px rgba(0,0,0,.06), 0 14px 30px rgba(0,0,0,.10);
| |
| }
| |
|
| |
| /* HERO */
| |
| .wp-hero{
| |
| position:relative;
| |
| border-radius:var(--wp-radius);
| |
| overflow:hidden;
| |
| min-height:380px;
| |
| display:flex;
| |
| align-items:flex-end;
| |
| box-shadow:var(--wp-shadow);
| |
| margin-bottom:28px;
| |
| background-color:#0d3a52;
| |
| background-size:cover;
| |
| background-position:center;
| |
| }
| |
| .wp-hero::after{
| |
| content:"";
| |
| position:absolute; inset:0;
| |
| background:linear-gradient(180deg, rgba(10,30,45,.10) 0%, rgba(8,25,38,.88) 88%);
| |
| }
| |
| .wp-hero-content{ position:relative; z-index:2; padding:28px; color:#fff; max-width:640px; }
| |
| .wp-hero-content .wp-eyebrow{
| |
| text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:700;
| |
| color:#8fd0ff; margin-bottom:6px;
| |
| }
| |
| .wp-hero-content h2{ margin:0 0 10px; font-size:26px; font-weight:800; color:#fff; border:0; padding:0; }
| |
| .wp-hero-content p{ margin:0; font-size:14px; color:#e9eef2; max-width:560px; }
| |
|
| |
| /* STATS */
| |
| .wp-stats{
| |
| display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:32px;
| |
| }
| |
| .wp-stat{
| |
| background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
| |
| padding:16px 8px; text-align:center; transition:transform .15s ease, box-shadow .15s ease;
| |
| }
| |
| .wp-stat:hover{ transform:translateY(-3px); box-shadow:var(--wp-shadow-hover); }
| |
| .wp-stat .wp-icon{ font-size:18px; margin-bottom:4px; }
| |
| .wp-stat .wp-num{ font-size:24px; font-weight:800; color:var(--wp-terracotta); line-height:1.1; }
| |
| .wp-stat .wp-label{ font-size:12px; color:var(--wp-muted); margin-top:3px; }
| |
|
| |
| /* SECTION HEADER */
| |
| .wp-section{ margin-bottom:36px; }
| |
| .wp-section-head{
| |
| display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px;
| |
| margin-bottom:14px; border-bottom:1px solid var(--wp-border); padding-bottom:8px;
| |
| }
| |
| .wp-section-head h2{ font-size:19px; margin:0; border:0; padding:0; }
| |
| .wp-section-head .wp-sub{ font-size:12px; color:var(--wp-muted); }
| |
|
| |
| /* CARD GRID */
| |
| .wp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:14px; }
| |
| .wp-card{
| |
| background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
| |
| overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
| |
| }
| |
| .wp-card:hover{ transform:translateY(-4px); box-shadow:var(--wp-shadow-hover); }
| |
| .wp-card-img{ position:relative; aspect-ratio:4/3; background:#eee; overflow:hidden; }
| |
| .wp-card-img a{ display:block; height:100%; }
| |
| .wp-card-img img{ width:100% !important; height:100% !important; object-fit:cover; display:block; }
| |
| .wp-badge{
| |
| position:absolute; top:8px; left:8px; background:rgba(20,20,20,.72); color:#fff;
| |
| font-size:11px; font-weight:600; padding:3px 8px; border-radius:999px; z-index:2;
| |
| }
| |
| .wp-card-body{ padding:12px 14px 14px; }
| |
| .wp-card-body h3{ margin:0 0 4px; font-size:15px; }
| |
| .wp-card-body h3 a{ color:var(--wp-blue-dark); text-decoration:none; }
| |
| .wp-card-body p{ margin:0; font-size:13px; color:var(--wp-muted); }
| |
| .wp-card-body p a{ font-weight:600; color:var(--wp-blue); white-space:nowrap; }
| |
|
| |
| /* COMMUNITY */
| |
| .wp-community{
| |
| background:var(--wp-card); border:1px solid var(--wp-border); border-radius:var(--wp-radius);
| |
| padding:22px; display:grid; grid-template-columns:200px 1fr; gap:20px; align-items:center;
| |
| }
| |
| .wp-community img{ width:100%; border-radius:10px; display:block; }
| |
| .wp-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
| |
| /* .wp-chip membungkus wikilink [[...]] biasa — MediaWiki tidak mengizinkan tag <a href> mentah,
| |
| jadi styling warna/underline diarahkan ke elemen <a> hasil rendering wikilink di dalamnya. */
| |
| .wp-chip{
| |
| display:inline-block; padding:6px 14px; border-radius:999px; background:#eef6fc;
| |
| border:1px solid #d7ebf7; transition:background .15s ease; font-size:13px;
| |
| }
| |
| .wp-chip:hover{ background:#dcefff; }
| |
| .wp-chip a{
| |
| color:var(--wp-blue-dark) !important; font-weight:600; text-decoration:none !important;
| |
| }
| |
|
| |
| /* FOOTER */
| |
| .wp-footer{ text-align:center; margin-top:32px; opacity:.75; }
| |
|
| |
| @media (max-width:720px){
| |
| .wp-stats{ grid-template-columns:repeat(2,1fr); }
| |
| .wp-community{ grid-template-columns:1fr; }
| |
| .wp-hero-content h2{ font-size:22px; }
| |
| }
| |
|
| |
|
| |
| .etika-list {
| |
| counter-reset: etika-counter;
| |
| margin-left: 1.5em;
| |
| list-style: none;
| |
| }
| |
|
| |
| .etika-list li {
| |
| margin-bottom: 0.5em;
| |
| position: relative;
| |
| padding-left: 2em;
| |
| }
| |
|
| |
| .etika-list li::before {
| |
| counter-increment: etika-counter;
| |
| content: counter(etika-counter) ".";
| |
| position: absolute;
| |
| left: 0;
| |
| font-weight: bold;
| |
| color: #336666;
| |
| }
| |
|
| |
| /* CSS untuk Halaman Home
| |
|
| |
| .home-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 1em;
| |
| justify-content: space-between;
| |
| }
| |
|
| |
| .home-box {
| |
| background: #fff;
| |
| border: 1px solid #ccc;
| |
| border-radius: 6px;
| |
| box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
| |
| flex: 1 1 calc(48% - 1em);
| |
| min-width: 300px;
| |
| padding: 1em;
| |
| }
| |
|
| |
| .home-header {
| |
| font-weight: bold;
| |
| font-size: 1.2em;
| |
| padding: 0.5em;
| |
| color: #fff;
| |
| margin: -1em -1em 0.5em -1em;
| |
| border-top-left-radius: 6px;
| |
| border-top-right-radius: 6px;
| |
| border-left: 6px solid #eee;
| |
| }
| |
|
| |
| .home-box.green .home-header {
| |
| background: #2e8b57;
| |
| border-left-color: #229b5e;
| |
| }
| |
|
| |
| .home-box.blue .home-header {
| |
| background: #005a9c;
| |
| border-left-color: #007acc;
| |
| }
| |
|
| |
| .home-box.red .home-header {
| |
| background: #a41515;
| |
| border-left-color: #e03c3c;
| |
| }
| |
|
| |
| .home-content {
| |
| font-size: 0.95em;
| |
| line-height: 1.5em;
| |
| }
| |
|
| |
| .gallery-row {
| |
| display: flex;
| |
| gap: 0.5em;
| |
| margin-top: 0.5em;
| |
| }
| |
|
| |
| #Artikel Galeri di halaman home
| |
| .artikel-galeri {
| |
| display: inline-block;
| |
| width: 30%;
| |
| vertical-align: top;
| |
| margin: 10px;
| |
| border: 1px solid #ddd;
| |
| border-radius: 10px;
| |
| padding: 10px;
| |
| box-shadow: 2px 2px 8px #eee;
| |
| }
| |
|
| |
| .galeri-kartu img {
| |
| width: 100%;
| |
| height: auto;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| .galeri-judul {
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| color: #223366;
| |
| margin-top: 5px;
| |
| }
| |
|
| |
| .galeri-ringkasan {
| |
| font-size: 0.95em;
| |
| color: #333;
| |
| margin-top: 5px;
| |
| }
| |
|
| |
| .baca {
| |
| color: #3366cc;
| |
| font-weight: normal;
| |
| text-decoration: none;
| |
| }
| |
| /* Styling untuk daftar yang dihasilkan oleh DynamicPageList */
| |
| DynamicPageList ul {
| |
| column-count: 2;
| |
| column-gap: 2em;
| |
| margin: 0;
| |
| padding-left: 1.5em;
| |
| list-style-position: outside;
| |
| }
| |
| DynamicPageList li {
| |
| break-inside: avoid;
| |
| margin-bottom: 0.5em;
| |
| }
| |
|
| |
| .wp-hero-festival{
| |
| background-image: url('/wiki/Special:FilePath/Festival_Pangan_Neke_NTT.jpg');
| |
| }
| |
| .wp-grid-compact {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
| |
| gap: 16px;
| |
| margin-top: 16px;
| |
| }
| |
|
| |
| .wp-card-compact {
| |
| display: block;
| |
| border-radius: 12px;
| |
| overflow: hidden;
| |
| background: #fff;
| |
| box-shadow: 0 1px 4px rgba(0,0,0,0.08);
| |
| transition: transform 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
|
| |
| .wp-card-compact:hover {
| |
| transform: translateY(-4px);
| |
| box-shadow: 0 8px 20px rgba(0,0,0,0.15);
| |
| }
| |
|
| |
| .wp-card-compact-img {
| |
| position: relative;
| |
| width: 100%;
| |
| aspect-ratio: 4 / 3;
| |
| overflow: hidden;
| |
| background: #f0ebe4;
| |
| }
| |
|
| |
| .wp-card-compact-img img {
| |
| width: 100%;
| |
| height: 100%;
| |
| object-fit: cover;
| |
| display: block;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .wp-card-compact:hover .wp-card-compact-img img {
| |
| transform: scale(1.08);
| |
| }
| |
|
| |
| .wp-card-compact-noimg {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| .wp-icon-placeholder {
| |
| font-size: 2.5em;
| |
| opacity: 0.4;
| |
| }
| |
|
| |
| .wp-badge-compact {
| |
| position: absolute;
| |
| top: 8px;
| |
| right: 8px;
| |
| background: rgba(0,0,0,0.65);
| |
| color: #fff;
| |
| font-size: 0.75em;
| |
| font-weight: 600;
| |
| padding: 3px 8px;
| |
| border-radius: 999px;
| |
| }
| |
|
| |
| .wp-card-compact-title {
| |
| padding: 10px 12px;
| |
| font-weight: 600;
| |
| font-size: 0.95em;
| |
| color: #222;
| |
| text-align: center;
| |
| white-space: nowrap;
| |
| overflow: hidden;
| |
| text-overflow: ellipsis;
| |
| }
| |
