/* ========================================================================= QURBANESIA — Design Tokens Sistem Informasi Panitia Qurban -------------------------------------------------------------------------- Brand vibe: warm, festive, respectful — traditional Islamic feel with modern restraint. Earthy greens + gold + cream + ink. ========================================================================= */ /* ------------------------------------------------------------------------- Fonts - Display: Cormorant Garamond (refined, slightly editorial; pairs well with Arabic-aware contexts; mimics classical Islamic manuscripts) - Body: Plus Jakarta Sans (modern Indonesian-designed sans, clear in long Bahasa Indonesia text, supports diacritics) - Mono: JetBrains Mono (numbers in financial reports / admin tables) - Arabic: Amiri (for Arabic terms like بِسْمِ ٱللَّٰهِ and small ornaments) NOTE TO BRAND OWNER: All four are Google Fonts. If you license something custom (especially for the wordmark), drop the .woff2 in /fonts and override --font-display. ------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Amiri:ital,wght@0,400;0,700;1,400&display=swap'); :root { /* ===================================================================== COLOR — Primary palette Inspired by: - Songket gold (warmth, festivity, the Eid feel) - Daun teh / kebun (deep green — Islamic tradition + Indonesian land) - Krem / kertas (cream — masjid wall, manuscript paper) - Tinta (ink — for high-contrast type, never pure black) ===================================================================== */ /* Hijau Daun — primary green, used for trust, action, and Islamic identity */ --hijau-50: #f3f7f2; --hijau-100: #e1ecdf; --hijau-200: #c2d7be; --hijau-300: #98ba93; --hijau-400: #6d9968; --hijau-500: #4d7c48; /* primary */ --hijau-600: #3a6336; --hijau-700: #2f4f2c; /* deep — headers, chrome */ --hijau-800: #263f24; --hijau-900: #1c2e1a; /* Emas Songket — gold accent, sparingly used for celebration + emphasis */ --emas-50: #fdf8ec; --emas-100: #f9ecc6; --emas-200: #f3d986; --emas-300: #ecc44f; --emas-400: #d9a82a; /* accent gold */ --emas-500: #b8881e; /* deep gold — borders, dividers */ --emas-600: #8f6815; --emas-700: #6b4d10; /* Krem — neutral surface, evokes manuscript paper / masjid wall */ --krem-50: #fbf8f1; /* page bg */ --krem-100: #f5efe1; /* card bg */ --krem-200: #ece3cc; --krem-300: #ddd0ae; --krem-400: #c4b489; /* Tinta — ink. Never use pure #000. */ --tinta-50: #f2f0eb; --tinta-100: #d8d4c8; --tinta-200: #aea99a; --tinta-300: #807a6a; --tinta-400: #5a5547; --tinta-500: #3a352a; --tinta-600: #28241c; --tinta-700: #1a1812; /* primary text */ --tinta-800: #100f0a; /* Bata — terracotta / clay. Distribution + warmth + alerts (warm warn). */ --bata-100: #f6e6dd; --bata-300: #d99878; --bata-500: #b35a36; --bata-700: #803c1f; /* ===================================================================== COLOR — Semantic ===================================================================== */ /* Surfaces (light theme — primary mode for this system) */ --bg-page: var(--krem-50); --bg-surface: #ffffff; --bg-raised: var(--krem-100); --bg-sunken: var(--krem-200); --bg-overlay: rgba(26, 24, 18, 0.55); --bg-chrome: var(--hijau-700); /* app/admin top bars */ --bg-chrome-alt: var(--tinta-700); /* Foreground */ --fg-primary: var(--tinta-700); --fg-secondary: var(--tinta-400); --fg-tertiary: var(--tinta-300); --fg-on-chrome: var(--krem-50); --fg-on-accent: var(--tinta-700); /* dark text on gold */ --fg-on-primary: #ffffff; /* white on green */ --fg-link: var(--hijau-600); /* Brand accents */ --accent: var(--emas-400); --accent-deep: var(--emas-500); --primary: var(--hijau-500); --primary-deep: var(--hijau-700); /* Borders */ --border-subtle: rgba(58, 53, 42, 0.10); --border-default: rgba(58, 53, 42, 0.18); --border-strong: rgba(58, 53, 42, 0.30); --border-accent: var(--emas-300); --divider-gold: var(--emas-400); /* Status — semantic */ --success: #3a6336; /* uses green family */ --success-bg: var(--hijau-50); --warning: #b8881e; /* uses gold family */ --warning-bg: var(--emas-50); --danger: #a3361b; --danger-bg: #fbeae3; --info: #2c5d6e; --info-bg: #e6eef1; /* Domain semantic — qurban-specific */ --status-pending: var(--emas-500); /* belum lunas */ --status-paid: var(--hijau-500); /* lunas */ --status-slaughtered:var(--bata-500); /* sudah disembelih */ --status-distributed:var(--tinta-500); /* sudah didistribusikan */ /* ===================================================================== TYPE ===================================================================== */ --font-display: "Cormorant Garamond", "Source Serif Pro", Georgia, serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-arabic: "Amiri", "Scheherazade New", "Traditional Arabic", serif; /* Scale — modular, 1.200 (minor third) at body, larger jumps at display */ --fs-12: 0.75rem; /* 12px — caption, micro */ --fs-13: 0.8125rem; /* 13px — labels */ --fs-14: 0.875rem; /* 14px — body sm */ --fs-16: 1rem; /* 16px — body */ --fs-18: 1.125rem; /* 18px — body lg */ --fs-20: 1.25rem; /* 20px — h5 */ --fs-24: 1.5rem; /* 24px — h4 */ --fs-30: 1.875rem; /* 30px — h3 */ --fs-36: 2.25rem; /* 36px — h2 */ --fs-48: 3rem; /* 48px — h1 */ --fs-64: 4rem; /* 64px — display */ --fs-80: 5rem; /* 80px — hero */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-display: 600; /* Cormorant looks best at 600 for headers */ /* Line heights */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; /* Tracking */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow:0.14em; /* small caps eyebrows */ /* ===================================================================== SPACING — 4px base ===================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ===================================================================== RADII — generous but not bubbly. Hint of Mughal arch. ===================================================================== */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --radius-arch: 20px 20px 4px 4px; /* signature arch — for hero cards */ /* ===================================================================== SHADOWS — warm, not blue-grey. Layered like paper. ===================================================================== */ --shadow-xs: 0 1px 2px rgba(58, 53, 42, 0.06); --shadow-sm: 0 2px 6px rgba(58, 53, 42, 0.07), 0 1px 2px rgba(58, 53, 42, 0.05); --shadow-md: 0 6px 16px rgba(58, 53, 42, 0.09), 0 2px 4px rgba(58, 53, 42, 0.05); --shadow-lg: 0 16px 32px rgba(58, 53, 42, 0.12), 0 4px 8px rgba(58, 53, 42, 0.06); --shadow-xl: 0 28px 56px rgba(58, 53, 42, 0.16), 0 8px 16px rgba(58, 53, 42, 0.08); --shadow-gold: 0 0 0 1px var(--emas-300), 0 6px 18px rgba(217, 168, 42, 0.22); --shadow-inset:inset 0 1px 2px rgba(58, 53, 42, 0.10); /* ===================================================================== MOTION ===================================================================== */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; /* ===================================================================== LAYOUT ===================================================================== */ --container-narrow: 720px; --container-base: 960px; --container-wide: 1200px; --container-app: 1440px; --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-toast: 1200; } /* ------------------------------------------------------------------------- Base — apply to body if you want defaults ------------------------------------------------------------------------- */ .qb-base { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-primary); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ========================================================================= SEMANTIC TYPE CLASSES Use these in markup (e.g.

) so styling is portable. ========================================================================= */ .qb-eyebrow { font-family: var(--font-body); font-size: var(--fs-12); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-deep); } .qb-display { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-80); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } .qb-h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-primary); } .qb-h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-36); line-height: var(--lh-snug); color: var(--fg-primary); } .qb-h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-30); line-height: var(--lh-snug); color: var(--fg-primary); } .qb-h4 { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-snug); color: var(--fg-primary); } .qb-h5 { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-20); line-height: var(--lh-snug); color: var(--fg-primary); } .qb-h6 { font-family: var(--font-body); font-weight: var(--fw-semi); font-size: var(--fs-18); line-height: var(--lh-snug); color: var(--fg-primary); } .qb-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-primary); } .qb-body-lg { font-family: var(--font-body); font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-primary); } .qb-body-sm { font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-normal); color: var(--fg-secondary); } .qb-caption { font-family: var(--font-body); font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-tertiary); } .qb-label { font-family: var(--font-body); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--fg-secondary); } .qb-mono { font-family: var(--font-mono); font-size: var(--fs-14); font-variant-numeric: tabular-nums; letter-spacing: 0; } .qb-arabic { font-family: var(--font-arabic); font-size: var(--fs-24); line-height: 1.4; color: var(--fg-primary); direction: rtl; } .qb-pricing { font-family: var(--font-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); } /* Quranic-style ornament line. Use sparingly. */ .qb-ornament { display: flex; align-items: center; gap: var(--space-3); color: var(--accent-deep); } .qb-ornament::before, .qb-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--emas-400), transparent); }