/* * ============================================================ * pu-deepspace.css — Token + Brand Layer Pohon Uang (Deep Space) * ============================================================ * Deploy path : public/assets/css/pu-deepspace.css * Bergantung : wtb-cinematic.css + patterns.css (import di bawah) * Konsumsi : @push('css') → * * SUMBER KEBENARAN: wtb-design-system repo Forgejo witdono/wtb-design-system * JANGAN hardcode hex di komponen — selalu pakai token (var(--primary), var(--brand), dll). * Perubahan brand → ubah di repo wtb-design-system, BUKAN fork lokal di sini. * * Register : Deep Space (produk .com / AI). Pohon Uang = produk → gelap. * Brand PU : hijau hutan (brightened) + emas brass — di-remap via override token semantik. * ============================================================ */ /* ============================================================ 1. SUMBER TOKEN + POLA WTB (urutan wajib: cinematic → patterns) ============================================================ Deploy: taruh wtb-cinematic.css + patterns.css di public/assets/css/ yang sama dengan file ini, lalu path relatif di bawah akan resolve. */ @import 'wtb-cinematic.css'; @import 'patterns.css'; /* ============================================================ 2. FONT MASTER — Schibsted Grotesk + Newsreader + Hanken + JetBrains Mono ============================================================ Pada stack Laravel cPanel (tanpa npm/bundler), font dimuat via Google Fonts CDN. Untuk produksi offline/self-host: unduh WOFF2 → taruh di public/assets/fonts/ → ganti @import ini dengan @font-face manual (lihat fonts/README.md di design-system). Keempat keluarga font: Schibsted Grotesk · Newsreader · Hanken Grotesk · JetBrains Mono */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;700;900&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ 3. DEEP SPACE REGISTER — override :root ============================================================ Pohon Uang = produk gelap (register Deep Space). Karena vendor CMS (Aruna/Phoenix) mengontrol tag dan tidak bisa kita tambahkan class="dark", `:root` di-override langsung ke nilai Deep Space. Efek: seluruh halaman gelap tanpa menyentuh shell vendor. */ :root { /* ── shadcn contract — Deep Space (mirror dari .dark di wtb-cinematic.css) ── */ --background: #0d0b1f; --foreground: #edeaf5; --card: #221c34; --card-foreground: #edeaf5; --popover: #16121e; --popover-foreground: #edeaf5; --secondary: #1c1729; --secondary-foreground: #d9d3e8; --muted: #17131f; --muted-foreground: #9b92b5; --destructive: #e5654f; --destructive-foreground: #ffffff; --border: rgba(237, 234, 245, 0.13); --input: rgba(237, 234, 245, 0.18); --sidebar: #0d0b1f; --sidebar-foreground: #edeaf5; --sidebar-border: rgba(237, 234, 245, 0.09); /* shadow gelap (elevasi = surface-tint + rim-light, bukan drop-shadow hitam) */ --shadow-sm: inset 0 0 0 9999px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 8px rgba(0,0,0,0.5); --shadow-md: inset 0 0 0 9999px rgba(255,255,255,0.085), inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 60px -24px rgba(0,0,0,0.85); --shadow-lg: inset 0 0 0 9999px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.22), 0 44px 96px -30px rgba(0,0,0,0.9); /* glass tokens gelap */ --glass-bg: rgba(20,16,35,0.78); --glass-border: rgba(255,255,255,0.16); --glass-blur: 14px; /* ── 4. LAPISAN BRAND POHON UANG ────────────────────────────────────── Override token SEMANTIK ke palet Pohon Uang (hijau + emas). Ini adalah SATU-SATUNYA tempat hex brand Pohon Uang dinyatakan. Komponen WAJIB pakai token semantik di bawah — BUKAN hardcode hex. Hijau: dari existing brand (forest green, deep dark) — di-brighten agar kontras AA (>=4.5:1) di atas Deep Space. emerald-hijau : deepspace → ~5.8:1 (LULUS AA dan AAA large) emerald-hover : deepspace → ~7.2:1 (LULUS AAA) Emas: dari brand existing (brass gold). gold-brand : deepspace → ~6.5:1 (LULUS AA) ──────────────────────────────────────────────────────────────────── */ /* Hijau Pohon Uang */ --pu-green: #3dba70; /* emerald hijau — CTA & aksen utama */ --pu-green-hover: #4dcf84; --pu-green-dim: rgba(61, 186, 112, 0.12); --pu-green-muted: rgba(61, 186, 112, 0.28); /* Emas Pohon Uang */ --pu-gold: #d4af37; /* brass gold — aksen sekunder & emas */ --pu-gold-hover: #e0c454; --pu-gold-dim: rgba(212, 175, 55, 0.12); --pu-gold-muted: rgba(212, 175, 55, 0.28); /* Teks gelap untuk di atas latar hijau (button/badge foreground) */ --pu-on-green: #071a0e; /* kontras >12:1 vs --pu-green */ /* Teks gelap untuk di atas latar emas */ --pu-on-gold: #1a1000; /* kontras >11:1 vs --pu-gold */ /* Teks merah muda untuk badge High di dark bg */ --pu-badge-high-fg: #f2867a; /* kontras 4.8:1 vs --card #221c34 */ /* Teks ungu untuk badge Holiday di dark bg */ --pu-badge-holiday-fg: #b678d6; /* kontras 4.6:1 vs --card */ /* Remap token semantik CTA/primary → hijau Pohon Uang */ --primary: var(--pu-green); --primary-foreground: var(--pu-on-green); --ring: var(--pu-green); /* Remap brand → hijau (aksen nav, eyebrow, aurora-line) */ --brand: var(--pu-green); --brand-secondary: var(--pu-gold); /* Remap CTA */ --cta: var(--pu-green); --cta-foreground: var(--pu-on-green); --cta-hover: var(--pu-green-hover); /* Accent = hijau-gelap untuk tint panel informatif */ --accent: rgba(61, 186, 112, 0.15); --accent-foreground: var(--pu-green); /* Sidebar accent */ --sidebar-primary: var(--pu-green); --sidebar-primary-foreground: #071a0e; --sidebar-accent: rgba(61, 186, 112, 0.12); --sidebar-accent-foreground: var(--pu-green); --sidebar-ring: var(--pu-green); /* Signature gradient Pohon Uang — hijau ke emas (menggantikan aurora violet untuk brand halaman Pohon Uang; dipakai oleh .aurora-line + .deep-field wash) */ --sig-gradient: linear-gradient(100deg, #3dba70, #28a25a, #c8991f, #d4af37); } /* ============================================================ 5. OVERRIDE VENDOR CMS (Aruna/Phoenix) ============================================================ CMS vendor mendefinisikan variabel --ph-* yang dipakai di shell (nav, header, dsb). Override ke token semantik Deep Space Pohon Uang agar shell tidak tabrakan tema. */ :root { --ph-heading: var(--foreground); --ph-muted: var(--muted-foreground); --ph-bg: var(--background); --ph-surface: var(--card); --ph-border: var(--border); --ph-primary: var(--primary); --ph-primary-hover: var(--cta-hover); --ph-text: var(--foreground); --ph-text-muted: var(--muted-foreground); /* Bootstrap v5 body override */ --bs-body-bg: var(--background); --bs-body-color: var(--foreground); --bs-border-color: var(--border); } /* ============================================================ 6. KOMPONEN DISCLAIMER POHON UANG — versi Deep Space (kelas reusable) ============================================================ Menggantikan disclaimer krem (.pu-cal-disclaimer) dengan versi gelap. Kontras: teks var(--foreground) di atas var(--background) → ~16:1 (AAA). Pakai di semua halaman publik Pohon Uang (kalender, artikel, kursus, dst). */ .pu-disclaimer { background: var(--pu-green-dim); border: 1px solid var(--pu-green-muted); border-left: 3px solid var(--pu-green); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); font-size: var(--text-sm); color: var(--foreground); line-height: 1.65; } .pu-disclaimer strong, .pu-disclaimer .pu-disclaimer-label { display: block; color: var(--pu-green); font-family: var(--ff-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--space-2); } /* Varian emas — untuk info/warning (bukan edukasi) */ .pu-disclaimer--gold { background: var(--pu-gold-dim); border-color: var(--pu-gold-muted); border-left-color: var(--pu-gold); } .pu-disclaimer--gold strong, .pu-disclaimer--gold .pu-disclaimer-label { color: var(--pu-gold); } /* ============================================================ 7. KOMPONEN KALENDER EKONOMI — overrides spesifik halaman ============================================================ Semua nilai via token semantik — nol hex hardcode di bawah. Pola yang dipakai: .card .card--solid (tabel data), .deep-field (filter bar), .btn .btn--primary (filter tombol aktif). */ /* ── Wrapper utama ── */ .pu-cal { max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-20); font-family: var(--ff-body); } /* ── Hero / page header — kontras AA wajib ── */ .pu-cal-hero { text-align: center; margin-bottom: var(--space-8); } .pu-cal-hero h1 { font-family: var(--ff-display); font-size: var(--text-h1); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; color: var(--foreground); /* ~16:1 kontras vs Deep Space — AAA */ margin-bottom: var(--space-3); } .pu-cal-hero p { color: var(--muted-foreground); /* ~4.6:1 kontras vs Deep Space — AA */ font-size: var(--text-sm); } /* ── Meta bar ── */ .pu-cal-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-xs); color: var(--muted-foreground); } .pu-cal-attribution a { color: var(--pu-green); text-decoration: underline; } /* ── Filter bar — pola .deep-field sudah menyediakan background gelap ── */ .pu-cal-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); } /* Filter tombol — basis: card ghost style, lalu override aktif ke hijau/emas */ .pu-filter-btn { padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--secondary); cursor: pointer; font-size: var(--text-xs); font-family: var(--ff-body); font-weight: 500; color: var(--muted-foreground); transition: all var(--duration-normal) var(--ease-hover); white-space: nowrap; } .pu-filter-btn:hover { background: var(--accent); border-color: var(--pu-green-muted); color: var(--foreground); } .pu-filter-btn.active { background: var(--pu-green); color: var(--pu-on-green); border-color: var(--pu-green); font-weight: 600; } /* Tombol impact aktif — warna semantik per tingkat */ .pu-filter-btn[data-filter="High"].active { background: var(--destructive); border-color: var(--destructive); color: var(--destructive-foreground); } .pu-filter-btn[data-filter="Medium"].active { background: var(--pu-gold); border-color: var(--pu-gold); color: var(--pu-on-gold); } .pu-filter-btn[data-filter="Low"].active { background: var(--secondary); border-color: var(--border); color: var(--muted-foreground); font-weight: 500; } /* ── Day section heading ── */ .pu-cal-day { margin-bottom: var(--space-8); } .pu-cal-day-heading { font-family: var(--ff-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pu-green); border-bottom: 1px solid var(--pu-green-muted); padding-bottom: var(--space-2); margin-bottom: var(--space-4); } /* ── Tabel — pola .card .card--solid (UI data: opaque, konten terbaca) ── */ .pu-cal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); } .pu-cal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-family: var(--ff-body); } .pu-cal-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--muted); border-bottom: 1px solid var(--border); color: var(--muted-foreground); font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .pu-cal-table td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--card-foreground); } .pu-cal-table tr:last-child td { border-bottom: none; } .pu-cal-table tr:hover td { background: var(--secondary); } /* ── Badge mata uang ── */ .pu-badge-currency { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-md); font-family: var(--ff-mono); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; background: rgba(61, 186, 112, 0.15); color: var(--pu-green); border: 1px solid var(--pu-green-muted); } /* ── Badge dampak ── */ .pu-badge-impact { display: inline-block; padding: 2px var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .pu-badge-High { background: rgba(229, 101, 79, 0.18); color: var(--pu-badge-high-fg); border: 1px solid rgba(229,101,79,0.3); } .pu-badge-Medium { background: var(--pu-gold-dim); color: var(--pu-gold); border: 1px solid var(--pu-gold-muted); } .pu-badge-Low { background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); } .pu-badge-Holiday { background: rgba(107, 91, 196, 0.15); color: var(--pu-badge-holiday-fg); border: 1px solid rgba(107,91,196,0.3); } .pu-badge-Unknown { background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); } /* ── Nilai aktual & kosong ── */ .pu-actual-val { font-weight: 600; color: var(--pu-green); } .pu-val-empty { color: var(--muted); opacity: 0.5; } /* ── State kosong / error ── */ .pu-cal-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-card); } .pu-cal-empty h2 { font-size: var(--text-h3); margin-bottom: var(--space-2); color: var(--foreground); } /* ── Footer note ── */ .pu-cal-footer-note { margin-top: var(--space-10); font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; } .pu-cal-footer-note a { color: var(--pu-green); text-decoration: underline; } /* ── Responsive ── */ @media (max-width: 640px) { .pu-cal-table th:nth-child(6), .pu-cal-table td:nth-child(6) { display: none; } .pu-cal-hero h1 { font-size: var(--text-h2); } } @media (max-width: 480px) { .pu-cal { padding-inline: var(--space-3); } }