/* ============================================================ RUMAH TEDUH — Colors & Type Foundations "Rumah Meraih Mimpi, Nyaman Untuk Kembali." Fonts are self-hosted below (fonts/). No CDN needed — just: ============================================================ */ /* ---------- SELF-HOSTED: Plus Jakarta Sans ---------- */ @font-face{font-family:"Plus Jakarta Sans";font-weight:200;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraLight.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:200;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraLightItalic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:300;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Light.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:300;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-LightItalic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Regular.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-Italic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Medium.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:500;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-MediumItalic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-SemiBold.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-SemiBoldItalic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-Bold.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-BoldItalic.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraBold.ttf") format("truetype");} @font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:italic;font-display:swap;src:url("fonts/PlusJakartaSans-ExtraBoldItalic.ttf") format("truetype");} :root { /* ---------- BRAND PALETTE (raw) ---------- */ --teduh-green: #6B7A42; /* primary — logo field, CTA, brand surfaces */ --forest-green: #4D5930; /* hover / dark accent / text on cream */ --warm-cream: #EFE6C2; /* text & highlight on green */ --ivory: #F2EDE0; /* default page / section background */ --almost-black: #1E1E1E; /* body text on light surfaces */ --white: #FFFFFF; /* cards, modals, inputs — use sparingly */ /* ---------- SUPPORTING TINTS (derived, oklch-harmonised) ---------- */ --green-tint: #E3E1CE; /* faint green-grey fill for chips / dividers */ --green-soft: #D9DAC2; /* hairline borders, table stripes */ --cream-deep: #E4D9AE; /* pressed state of cream surfaces */ --olive-muted: #8A9460; /* disabled green / secondary icon */ --line: #DAD3BE; /* default hairline border on ivory */ --line-strong: #C9C0A4; /* stronger border / input outline */ /* ---------- SEMANTIC STATUS (muted, never neon) ---------- */ --success: #5E7B3E; /* paid / available — leans into the green */ --warning: #B98A3E; /* due soon — warm ochre, not yellow */ --danger: #A9543E; /* overdue / error — terracotta, not bright red */ --info: --forest-green; /* ---------- SEMANTIC ROLES ---------- */ --bg: var(--ivory); /* page background */ --bg-raised: var(--white); /* cards, modals */ --bg-brand: var(--teduh-green); /* brand-filled surfaces */ --bg-brand-deep: var(--forest-green); /* brand hover / dark blocks */ --fg: var(--almost-black); /* primary body text on light */ --fg-muted: #5A574E; /* secondary text on light */ --fg-subtle: #807C70; /* captions, meta on light */ --fg-on-brand: var(--warm-cream); /* text on green */ --fg-on-brand-strong: var(--white); /* high-emphasis text on green */ --border: var(--line); --border-strong: var(--line-strong); --focus-ring: color-mix(in oklch, var(--teduh-green) 55%, transparent); /* ---------- TYPE FAMILY ---------- */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ---------- TYPE WEIGHTS (max 3 per layout) ---------- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold:800; /* ---------- TYPE SCALE ---------- */ --fs-display: 40px; --lh-display: 1.1; --ls-display: -0.02em; --fs-h1: 28px; --lh-h1: 1.2; --ls-h1: -0.01em; --fs-h2: 20px; --lh-h2: 1.3; --ls-h2: -0.005em; --fs-body: 16px; --lh-body: 1.6; --ls-body: 0; --fs-small: 14px; --lh-small: 1.55; --fs-caption: 12px; --lh-caption: 1.4; --ls-caption: 0.01em; /* ---------- RADII (rounded, friendly) ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---------- SPACING (4pt base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---------- ELEVATION (soft, warm-tinted — never hard black) ---------- */ --shadow-xs: 0 1px 2px rgba(45, 42, 30, 0.06); --shadow-sm: 0 2px 8px rgba(45, 42, 30, 0.07); --shadow-md: 0 6px 20px rgba(45, 42, 30, 0.10); --shadow-lg: 0 16px 44px rgba(45, 42, 30, 0.14); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1); --dur-fast: 130ms; --dur: 220ms; --dur-slow: 380ms; } /* ============================================================ SEMANTIC ELEMENT STYLES — apply with utility classes ============================================================ */ .rt-display { font-family: var(--font-sans); font-weight: var(--w-extrabold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--fg); } .rt-h1 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); color: var(--fg); } .rt-h2 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: var(--fg); } .rt-body { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); } .rt-small { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--fg-muted); } .rt-caption { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--fg-subtle); } .rt-label { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }