/* ============================================================ OnSight — Colors & Type foundations Brand: OnSight (OnSight Media) · "Reinventing Real Estate" ============================================================ FONT NOTE: The OnSight brand uses **Avenir** (Black / Medium / Book), a licensed typeface not redistributable here. We substitute **Mulish** (Google Fonts) — the closest free geometric-humanist sans with matching weights (900≈Black, 500≈Medium, 400≈Book). Swap @font-face to real Avenir files in production. Load Mulish via: ============================================================ */ :root { /* ---- Core palette (from brand guidelines) ---- */ --onsight-green: #8FBE24; /* primary — growth, stability, trust */ --onsight-light-green: #BFD95E; /* secondary / highlight */ --onsight-light-grey: #EEEEEF; /* surface / backdrop */ --onsight-dark-grey: #323133; /* near-black — text & ink */ /* ---- Extended ramp (derived, oklch-harmonized) ---- */ --green-700: #5E8316; /* pressed / deep accent */ --green-600: #76A11D; /* hover on primary */ --green-500: #8FBE24; /* = brand green */ --green-400: #A8CB45; --green-300: #BFD95E; /* = light green */ --green-200: #D6E89A; --green-100: #EDF4D2; /* tint surface */ --green-50: #F6FAE9; --grey-900: #323133; /* = dark grey */ --grey-800: #44434A; --grey-700: #5C5B61; --grey-600: #76757B; --grey-500: #9A999F; --grey-400: #BEBEC2; --grey-300: #D8D8DA; --grey-200: #E7E7E8; --grey-100: #EEEEEF; /* = light grey */ --grey-50: #F7F7F8; --white: #FFFFFF; /* ---- 20% background washes (per guidelines "Background Colors") ---- */ --wash-green: rgba(143, 190, 36, 0.20); --wash-light-green: rgba(191, 217, 94, 0.20); --wash-grey: rgba(238, 238, 239, 0.20); --wash-dark: rgba(50, 49, 51, 0.20); /* ---- Semantic foreground / surface ---- */ --fg-1: var(--grey-900); /* primary text */ --fg-2: var(--grey-700); /* secondary text */ --fg-3: var(--grey-500); /* muted / captions */ --fg-inv: var(--white); /* on-dark / on-green text */ --bg-1: var(--white); /* base surface */ --bg-2: var(--grey-50); /* raised / subtle */ --bg-3: var(--grey-100); /* sunken / backdrop */ --bg-ink: var(--grey-900); /* dark sections */ --line: var(--grey-200); /* hairline borders */ --line-strong: var(--grey-300); /* ---- Accent semantics ---- */ --accent: var(--onsight-green); --accent-hover: var(--green-600); --accent-press: var(--green-700); --accent-tint: var(--green-100); --on-accent: #1E2A05; /* dark ink that passes contrast on green */ /* ---- Status (brand-harmonized) ---- */ --success: #4E9A2A; --warning: #E0A21A; --danger: #D8503C; --info: #3E8FB0; /* ---- Type families ---- */ --font-sans: 'Mulish', 'Avenir Next', 'Avenir', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: var(--font-sans); /* ---- Weights (Avenir family mapping) ---- */ --w-book: 400; /* Avenir Book */ --w-medium: 500; /* Avenir Medium */ --w-semi: 700; --w-black: 900; /* Avenir Black */ /* ---- Type scale (1.250 major-third, 16px base) ---- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.75rem; /* 28 */ --text-2xl: 2.25rem; /* 36 */ --text-3xl: 3rem; /* 48 */ --text-4xl: 4rem; /* 64 */ --text-5xl: 5.25rem; /* 84 */ --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal:1.55; --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* brand loves wide-tracked caps */ --tracking-wider: 0.18em; /* ---- Radii ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-pill: 999px; /* ---- 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; /* ---- Shadows (soft, natural — never harsh) ---- */ --shadow-xs: 0 1px 2px rgba(50,49,51,0.06); --shadow-sm: 0 2px 6px rgba(50,49,51,0.07); --shadow-md: 0 8px 24px rgba(50,49,51,0.09); --shadow-lg: 0 18px 48px rgba(50,49,51,0.12); --shadow-green: 0 10px 28px rgba(143,190,36,0.32); } /* ============================================================ Semantic element styles — apply via class on any element ============================================================ */ .os-display { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .os-h1 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .os-h2 { font-family: var(--font-display); font-weight: var(--w-black); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .os-h3 { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg-1); } .os-h4 { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--fg-1); } .os-lead { font-family: var(--font-sans); font-weight: var(--w-book); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg-2); } .os-body { font-family: var(--font-sans); font-weight: var(--w-book); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-2); } .os-small { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-2); } .os-caption { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: var(--text-xs); line-height: 1.3; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); } /* Wide-tracked eyebrow/kicker — a signature brand move */ .os-eyebrow { font-family: var(--font-sans); font-weight: var(--w-black); font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent); }