From b3b709dbecbb5dc31066b8c6321f259cbce67aaf Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 9 Jun 2026 19:18:04 +0700 Subject: [PATCH] Menambahkan landing page yang yang hubungkan ke 3 proyek saya --- WebGIS_SPBU/style.css | 379 +++++++++++++++++++-------------- index.html | 148 +++++++++++++ style.css | 480 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 848 insertions(+), 159 deletions(-) create mode 100644 index.html create mode 100644 style.css diff --git a/WebGIS_SPBU/style.css b/WebGIS_SPBU/style.css index 1d49d84..5d1cd1e 100644 --- a/WebGIS_SPBU/style.css +++ b/WebGIS_SPBU/style.css @@ -1,25 +1,30 @@ +/* ============================================================ + WebGIS SPBU — Style (disesuaikan dengan tema Manajemen Jalan & Parsil) + ============================================================ */ + :root { - --bg-dark: #0f1117; - --border: #2a3248; - --accent-green: #10b981; - --accent-orange: #f97316; - --accent-blue: #3b82f6; + --bg-dark: #0f1117; + --bg-sidebar: #161b27; + --bg-card: #1e2538; + --bg-card-hover: #252d42; + --border: #2a3248; + --accent-blue: #3b82f6; + --accent-green: #10b981; --accent-yellow: #f59e0b; - --accent-red: #ef4444; - --text-primary: #f1f5f9; - --text-secondary: #94a3b8; - --text-muted: #64748b; - --radius-sm: 6px; + --accent-red: #ef4444; + --accent-orange: #f97316; + --text-primary: #f1f5f9; + --text-secondary:#94a3b8; + --text-muted: #4b5563; + --radius-sm: 6px; + --radius-md: 10px; + --shadow: 0 4px 24px rgba(0,0,0,.4); } -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} +* { margin:0; padding:0; box-sizing:border-box; } body { - font-family: 'Inter', system-ui, sans-serif; + font-family: 'Inter', sans-serif; background: var(--bg-dark); color: var(--text-primary); height: 100vh; @@ -28,10 +33,11 @@ body { overflow: hidden; } +/* ── Header ────────────────────────────────────────── */ #header-bar { background: linear-gradient(135deg, #161b27 0%, #0f1117 100%); border-bottom: 1px solid var(--border); - padding: 14px 20px; + padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; @@ -39,141 +45,56 @@ body { } #header-bar h1 { - font-size: 18px; + font-size: 16px; font-weight: 700; + color: #fff; + margin: 0; } #header-bar p { - font-size: 12px; + font-size: 11px; color: var(--text-secondary); - margin-top: 2px; + margin-top: 3px; } +/* ── Stats Badge ───────────────────────────────────── */ #stats-bar { display: flex; - gap: 12px; - font-size: 12px; + gap: 10px; + align-items: center; } .stat-badge { - padding: 6px 12px; + padding: 5px 12px; border-radius: 20px; + font-size: 11px; font-weight: 600; border: 1px solid var(--border); - background: rgba(255, 255, 255, 0.04); + background: rgba(255,255,255,0.04); + letter-spacing: .3px; } .stat-badge.green { color: var(--accent-green); - border-color: rgba(16, 185, 129, 0.35); + border-color: rgba(16,185,129,0.35); + background: rgba(16,185,129,0.07); } .stat-badge.orange { color: var(--accent-orange); - border-color: rgba(249, 115, 22, 0.35); + border-color: rgba(249,115,22,0.35); + background: rgba(249,115,22,0.07); } +/* ── Map ───────────────────────────────────────────── */ #map { flex: 1; width: 100%; + position: relative; + z-index: 1; } -.leaflet-control-layers { - border-radius: 8px !important; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important; - font-size: 13px; -} - -.leaflet-control-layers-expanded { - padding: 10px 12px !important; -} - -.gis-popup { - min-width: 220px; - font-family: 'Inter', system-ui, sans-serif; -} - -.popup-title { - font-size: 14px; - font-weight: 700; - margin-bottom: 10px; - padding-bottom: 8px; - border-bottom: 2px solid var(--border); -} - -.info-row { - display: flex; - justify-content: space-between; - gap: 12px; - margin-bottom: 6px; - font-size: 12px; -} - -.info-label { - color: var(--text-muted); - flex-shrink: 0; -} - -.info-value { - text-align: right; - font-weight: 500; -} - -.status-badge { - display: inline-block; - padding: 2px 8px; - border-radius: 4px; - font-size: 11px; - font-weight: 700; -} - -.status-24jam { - background: rgba(16, 185, 129, 0.15); - color: #10b981; -} - -.status-tidak24jam { - background: rgba(249, 115, 22, 0.15); - color: #f97316; -} - -#toast { - position: fixed; - bottom: 24px; - left: 50%; - transform: translateX(-50%) translateY(80px); - background: #1e2538; - color: var(--text-primary); - padding: 10px 20px; - border-radius: 8px; - border: 1px solid var(--border); - font-size: 13px; - z-index: 9999; - opacity: 0; - transition: all 0.3s ease; - pointer-events: none; -} - -#toast.show { - opacity: 1; - transform: translateX(-50%) translateY(0); -} - -#toast.error { - border-color: rgba(239, 68, 68, 0.5); - color: #fca5a5; -} - -#toast.success { - border-color: rgba(16, 185, 129, 0.5); - color: #6ee7b7; -} - -#toast.info { - border-color: rgba(59, 130, 246, 0.5); - color: #93c5fd; -} - +/* ── FAB ───────────────────────────────────────────── */ .fab-container { position: fixed; bottom: 30px; @@ -185,10 +106,10 @@ body { width: 56px; height: 56px; border-radius: 50%; - background: linear-gradient(135deg, var(--accent-green), #059669); + background: linear-gradient(135deg, var(--accent-blue), #2563eb); color: white; border: none; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); + box-shadow: 0 4px 15px rgba(0,0,0,.4); font-size: 24px; cursor: pointer; display: flex; @@ -199,27 +120,178 @@ body { .fab-btn:hover { transform: scale(1.05); + background: linear-gradient(135deg, #60a5fa, var(--accent-blue)); } .fab-btn.active { - background: linear-gradient(135deg, var(--accent-orange), #ea580c); - box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.3); + background: linear-gradient(135deg, var(--accent-red), #dc2626); + box-shadow: 0 0 0 4px rgba(239,68,68,.3); } +/* ── Toast Notification ────────────────────────────── */ +#toast { + position: fixed; + bottom: 30px; + right: 30px; + z-index: 10000; + display: flex; + flex-direction: column; + gap: 8px; + pointer-events: none; +} + +.toast-item { + padding: 10px 18px; + border-radius: var(--radius-sm); + font-size: 12px; + font-weight: 500; + color: #fff; + box-shadow: var(--shadow); + animation: slideIn .3s ease; + max-width: 300px; + pointer-events: none; +} + +.toast-success { + background: #065f46; + border: 1px solid #10b981; +} + +.toast-error { + background: #7f1d1d; + border: 1px solid #ef4444; +} + +.toast-info { + background: #1e3a5f; + border: 1px solid #3b82f6; +} + +@keyframes slideIn { + from { opacity:0; transform: translateX(30px); } + to { opacity:1; transform: translateX(0); } +} + +/* ── Leaflet Popup Dark Theme ──────────────────────── */ +.leaflet-popup-content-wrapper { + background: var(--bg-card) !important; + border: 1px solid var(--border) !important; + border-radius: var(--radius-md) !important; + box-shadow: var(--shadow) !important; + color: var(--text-primary) !important; + padding: 0 !important; +} + +.leaflet-popup-tip { + background: var(--bg-card) !important; +} + +.leaflet-popup-close-button { + color: var(--text-secondary) !important; + top: 8px !important; + right: 8px !important; +} + +.leaflet-popup-content { + margin: 0 !important; +} + +/* ── Leaflet Layer Control Dark ────────────────────── */ +.leaflet-control-layers { + background: var(--bg-card) !important; + border: 1px solid var(--border) !important; + border-radius: var(--radius-md) !important; + color: var(--text-primary) !important; + box-shadow: var(--shadow) !important; +} + +.leaflet-control-layers label { + color: var(--text-primary) !important; + font-size: 12px !important; + font-family: 'Inter', sans-serif !important; +} + +.leaflet-control-layers-separator { + border-top-color: var(--border) !important; +} + +.leaflet-control-layers-expanded { + padding: 10px 14px !important; +} + +.leaflet-control-layers-toggle { + background-color: var(--bg-card) !important; + border-radius: var(--radius-sm) !important; +} + +/* ── GIS Popup Content ─────────────────────────────── */ +.gis-popup { + padding: 16px; + min-width: 240px; + max-width: 300px; + font-family: 'Inter', sans-serif; +} + +.popup-title { + font-size: 13px; + font-weight: 700; + margin-bottom: 12px; + padding-bottom: 8px; + border-bottom: 1px solid var(--border); +} + +.info-row { + display: flex; + justify-content: space-between; + align-items: center; + padding: 5px 0; + border-bottom: 1px solid var(--border); + font-size: 11px; +} + +.info-row:last-of-type { + border-bottom: none; +} + +.info-label { color: var(--text-secondary); } +.info-value { color: var(--text-primary); font-weight: 600; } + +/* ── Status Badges (SPBU specific) ────────────────── */ +.status-badge { + display: inline-block; + padding: 2px 8px; + border-radius: 4px; + font-size: 10px; + font-weight: 700; + letter-spacing: .4px; + text-transform: uppercase; +} + +.status-24jam { + background: rgba(16,185,129,.15); + color: #10b981; + border: 1px solid rgba(16,185,129,.3); +} + +.status-tidak24jam { + background: rgba(249,115,22,.15); + color: #f97316; + border: 1px solid rgba(249,115,22,.3); +} + +/* ── Popup Form ────────────────────────────────────── */ .popup-form label { display: block; font-size: 10px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: .5px; margin-bottom: 4px; margin-top: 10px; } -.popup-form label:first-of-type { - margin-top: 0; -} +.popup-form label:first-of-type { margin-top: 0; } .popup-form input, .popup-form select { @@ -230,8 +302,9 @@ body { border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px; - font-family: inherit; + font-family: 'Inter', sans-serif; outline: none; + transition: border-color .2s; } .popup-form input:focus, @@ -239,6 +312,7 @@ body { border-color: var(--accent-blue); } +/* ── Popup Buttons ─────────────────────────────────── */ .popup-actions { display: flex; gap: 6px; @@ -252,42 +326,29 @@ body { border-radius: var(--radius-sm); font-size: 11px; font-weight: 600; - font-family: inherit; + font-family: 'Inter', sans-serif; cursor: pointer; - transition: opacity 0.2s; - pointer-events: auto; + transition: all .2s; position: relative; z-index: 10; + pointer-events: auto; } .popup-btn:hover { - opacity: 0.85; -} - -.popup-btn-save { - background: var(--accent-green); - color: #fff; -} - -.popup-btn-edit { - background: var(--accent-yellow); - color: #000; -} - -.popup-btn-delete { - background: var(--accent-red); - color: #fff; + opacity: .85; + transform: translateY(-1px); } +.popup-btn-save { background: var(--accent-green); color: #fff; } +.popup-btn-edit { background: var(--accent-yellow); color: #000; } +.popup-btn-delete { background: var(--accent-red); color: #fff; } .popup-btn-cancel { - background: #334155; - color: #fff; + background: var(--bg-dark); + color: var(--text-secondary); + border: 1px solid var(--border); } -.leaflet-popup-content-wrapper { - border-radius: 10px; -} - -.leaflet-popup-content { - margin: 12px 14px; -} +/* ── Scrollbar ─────────────────────────────────────── */ +::-webkit-scrollbar { width: 4px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } diff --git a/index.html b/index.html new file mode 100644 index 0000000..b159733 --- /dev/null +++ b/index.html @@ -0,0 +1,148 @@ + + + + + + + + Portal WebGIS + + + + + +
+
+
+ +
+ +
+ + Laragon · PHP · MySQL · LeafletJS +
+
+ +
+
+

Selamat datang

+

Semua Tugas WebGIS
Dalam Satu Tempat

+

+ Pilih modul di bawah untuk membuka aplikasi WebGIS. Setiap modul menggunakan + LeafletJS, PHP REST API, dan MySQL sebagai backend. +

+
+ +
+ +
+
+
⛽
+ Pertemuan 2–3 +
+

WebGIS SPBU Pontianak

+

Layer Groups & Layers Control untuk data SPBU. Marker dikelompokkan berdasarkan status buka 24 jam.

+
    +
  • Layer Group: Buka 24 Jam / Tidak 24 Jam
    • +
  • Base map OSM & Citra Satelit
    • +
  • CRUD data SPBU via PHP API
    • +
+
+ Leaflet · PHP · MySQL + + Buka Aplikasi + + + + +
+
+ + +
+
+
🛣️
+ Tugas Utama +
+

Manajemen Jalan & Parsil

+

Sistem manajemen data jalan (LineString) dan parsil tanah/kavling (Polygon) dengan pengukuran otomatis.

+
    +
  • Draw & edit geometri di peta
    • +
  • Hitung panjang jalan & luas parsil
    • +
  • Filter berdasarkan status administrasi
    • +
+
+ Leaflet · PHP · MySQL + + Buka Aplikasi + + + + +
+
+ + +
+
+
🕌
+ Proyek Akhir +
+

WebGIS Pemetaan Kemiskinan

+

Website pemberantas kemiskinan berbasis partisipasi rumah ibadah. Dilengkapi autentikasi multi-role dan dashboard analitik.

+
    +
  • Login: Admin, Petugas, Pengurus, Walikota
    • +
  • Pemetaan titik kemiskinan & masjid
    • +
  • Dashboard statistik untuk Walikota
    • +
+
+ Leaflet · PHP · MySQL · RBAC +
+ + Login + + + + + Peta Utama + Dashboard +
+
+
+
+ +
+
+ 3 + Modul WebGIS +
+
+
+ LeafletJS + Library Peta +
+
+
+ GeoJSON + Format Geometri +
+
+
+ Pontianak + Area Studi +
+
+
+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..055bf60 --- /dev/null +++ b/style.css @@ -0,0 +1,480 @@ +/* ============================================================ + Portal WebGIS — Landing Page + ============================================================ */ + +:root { + --bg-dark: #0a0e17; + --bg-card: #121826; + --bg-card-hover: #181f30; + --border: rgba(255, 255, 255, 0.07); + --border-hover: rgba(255, 255, 255, 0.14); + --text-primary: #f1f5f9; + --text-secondary:#94a3b8; + --text-muted: #64748b; + --accent-orange: #f97316; + --accent-indigo: #6366f1; + --accent-purple: #a855f7; + --radius-lg: 16px; + --radius-md: 10px; + --shadow: 0 8px 32px rgba(0, 0, 0, 0.45); +} + +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', sans-serif; + background: var(--bg-dark); + color: var(--text-primary); + min-height: 100vh; + display: flex; + flex-direction: column; + position: relative; + overflow-x: hidden; +} + +/* ── Background effects ── */ +.bg-grid { + position: fixed; + inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); + background-size: 48px 48px; + pointer-events: none; + z-index: 0; +} + +.bg-glow { + position: fixed; + border-radius: 50%; + filter: blur(120px); + pointer-events: none; + z-index: 0; +} + +.bg-glow-1 { + width: 600px; + height: 600px; + background: rgba(99, 102, 241, 0.12); + top: -200px; + right: -100px; +} + +.bg-glow-2 { + width: 500px; + height: 500px; + background: rgba(168, 85, 247, 0.08); + bottom: -150px; + left: -100px; +} + +/* ── Header ── */ +.site-header { + position: relative; + z-index: 10; + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 40px; + border-bottom: 1px solid var(--border); + backdrop-filter: blur(12px); + background: rgba(10, 14, 23, 0.8); +} + +.logo { + display: flex; + align-items: center; + gap: 12px; +} + +.logo-icon { + font-size: 28px; +} + +.logo strong { + display: block; + font-size: 15px; + font-weight: 700; + letter-spacing: -0.02em; +} + +.logo span { + font-size: 12px; + color: var(--text-muted); +} + +.header-badge { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: var(--text-secondary); + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + padding: 6px 14px; + border-radius: 999px; +} + +.pulse-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: #22c55e; + box-shadow: 0 0 8px #22c55e; + animation: pulse 2s ease-in-out infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.6; transform: scale(0.85); } +} + +/* ── Main ── */ +main { + position: relative; + z-index: 10; + flex: 1; + max-width: 1100px; + width: 100%; + margin: 0 auto; + padding: 48px 24px 64px; +} + +/* ── Hero ── */ +.hero { + text-align: center; + margin-bottom: 48px; +} + +.hero-label { + display: inline-block; + font-size: 12px; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent-indigo); + background: rgba(99, 102, 241, 0.12); + border: 1px solid rgba(99, 102, 241, 0.25); + padding: 4px 14px; + border-radius: 999px; + margin-bottom: 20px; +} + +.hero h1 { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 800; + line-height: 1.15; + letter-spacing: -0.03em; + margin-bottom: 16px; +} + +.gradient-text { + background: linear-gradient(135deg, #818cf8, #a855f7, #f97316); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero-desc { + font-size: 15px; + color: var(--text-secondary); + max-width: 560px; + margin: 0 auto; + line-height: 1.7; +} + +/* ── Cards Grid ── */ +.cards-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + margin-bottom: 40px; +} + +.project-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 28px; + display: flex; + flex-direction: column; + gap: 14px; + transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; + position: relative; + overflow: hidden; +} + +.project-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + border-radius: var(--radius-lg) var(--radius-lg) 0 0; + opacity: 0.8; +} + +.project-card[data-accent="orange"]::before { background: linear-gradient(90deg, var(--accent-orange), #fb923c); } +.project-card[data-accent="indigo"]::before { background: linear-gradient(90deg, var(--accent-indigo), #818cf8); } +.project-card[data-accent="purple"]::before { background: linear-gradient(90deg, var(--accent-purple), #c084fc); } + +.project-card:hover { + transform: translateY(-4px); + border-color: var(--border-hover); + box-shadow: var(--shadow); + background: var(--bg-card-hover); +} + +.card-wide { + grid-column: 1 / -1; +} + +.card-top { + display: flex; + align-items: center; + justify-content: space-between; +} + +.card-icon { + font-size: 32px; + line-height: 1; +} + +.card-tag { + font-size: 11px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-muted); + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); + padding: 3px 10px; + border-radius: 999px; +} + +.project-card h2 { + font-size: 18px; + font-weight: 700; + letter-spacing: -0.02em; +} + +.project-card > p { + font-size: 13.5px; + color: var(--text-secondary); + line-height: 1.65; +} + +.card-features { + list-style: none; + display: flex; + flex-direction: column; + gap: 6px; + flex: 1; +} + +.card-features li { + font-size: 12.5px; + color: var(--text-muted); + padding-left: 16px; + position: relative; +} + +.card-features li::before { + content: '✓'; + position: absolute; + left: 0; + font-size: 11px; + font-weight: 700; +} + +.project-card[data-accent="orange"] .card-features li::before { color: var(--accent-orange); } +.project-card[data-accent="indigo"] .card-features li::before { color: var(--accent-indigo); } +.project-card[data-accent="purple"] .card-features li::before { color: var(--accent-purple); } + +.card-footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-top: 4px; + padding-top: 16px; + border-top: 1px solid var(--border); +} + +.card-footer-multi { + flex-wrap: wrap; +} + +.tech-stack { + font-size: 11px; + color: var(--text-muted); + font-weight: 500; +} + +.btn-primary, +.btn-secondary { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 13px; + font-weight: 600; + text-decoration: none; + border-radius: var(--radius-md); + padding: 9px 16px; + transition: all 0.2s ease; + white-space: nowrap; +} + +.btn-primary { + color: #fff; + background: linear-gradient(135deg, #6366f1, #8b5cf6); + border: none; + box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35); +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5); +} + +.project-card[data-accent="orange"] .btn-primary { + background: linear-gradient(135deg, #ea580c, #f97316); + box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35); +} + +.project-card[data-accent="orange"] .btn-primary:hover { + box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5); +} + +.project-card[data-accent="indigo"] .btn-primary { + background: linear-gradient(135deg, #4f46e5, #6366f1); + box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35); +} + +.project-card[data-accent="indigo"] .btn-primary:hover { + box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5); +} + +.project-card[data-accent="purple"] .btn-primary { + background: linear-gradient(135deg, #7c3aed, #a855f7); + box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35); +} + +.project-card[data-accent="purple"] .btn-primary:hover { + box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5); +} + +.btn-secondary { + color: var(--text-secondary); + background: rgba(255, 255, 255, 0.04); + border: 1px solid var(--border); +} + +.btn-secondary:hover { + color: var(--text-primary); + border-color: var(--border-hover); + background: rgba(255, 255, 255, 0.08); +} + +.btn-group { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; +} + +/* ── Info Bar ── */ +.info-bar { + display: flex; + align-items: center; + justify-content: center; + gap: 0; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 20px 32px; + flex-wrap: wrap; + gap: 8px 0; +} + +.info-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 2px; + padding: 0 28px; +} + +.info-num { + font-size: 15px; + font-weight: 700; + color: var(--text-primary); +} + +.info-label { + font-size: 11px; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.06em; +} + +.info-divider { + width: 1px; + height: 36px; + background: var(--border); +} + +/* ── Footer ── */ +.site-footer { + position: relative; + z-index: 10; + text-align: center; + padding: 20px; + border-top: 1px solid var(--border); + font-size: 12px; + color: var(--text-muted); +} + +/* ── Responsive ── */ +@media (max-width: 768px) { + .site-header { + padding: 16px 20px; + flex-direction: column; + gap: 12px; + align-items: flex-start; + } + + main { + padding: 32px 16px 48px; + } + + .cards-grid { + grid-template-columns: 1fr; + } + + .card-wide { + grid-column: auto; + } + + .card-footer { + flex-direction: column; + align-items: flex-start; + } + + .info-bar { + padding: 16px; + } + + .info-item { + padding: 8px 16px; + } + + .info-divider { + display: none; + } +}