/* ============================================================ Anura Connect - Colors & Type Foundation Healthcare IT consulting. Clean, credible, clinical. Load this file, then use the CSS variables below. ============================================================ */ /* ---- Fonts ------------------------------------------------ */ /* Display / headings: Poppins (local ttf). Body: Source Sans 3 (Google). */ @font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } /* Body face loaded via Google Fonts in HTML : */ :root { /* ---- Brand palette (from logo vector) ---- */ --navy: #0A2239; /* primary - wordmark, headers, dark fields */ --blue: #176087; /* secondary - buttons, links, accents */ --sky: #53A2BE; /* accent - highlights, icons, chart series */ --white: #FFFFFF; /* ---- Navy / blue tints & shades (oklch-derived, in-family) ---- */ --navy-900: #07182A; --navy-800: #0A2239; /* = --navy */ --navy-700: #123150; --blue-600: #135276; --blue-500: #176087; /* = --blue */ --blue-400: #2E7AA3; --sky-400: #53A2BE; /* = --sky */ --sky-300: #7FBDD2; --sky-200: #B5D8E4; --sky-100: #E3F0F5; /* tinted panel / hover wash */ /* ---- Neutrals ---- */ --ink: #1A2533; /* near-black body text on white */ --gray-700: #2D3A4A; --gray-600: #4A5568; /* secondary body text */ --gray-500: #6B7785; --gray-400: #9AA5B1; --gray-300: #CBD2D9; --gray-200: #E2E8F0; /* hairline rules, dividers */ --gray-100: #F1F4F8; /* page tint / table stripe */ --gray-50: #F8FAFC; /* lightest surface */ /* ---- Semantic status (muted, clinical) ---- */ --success: #2A7354; --success-bg: #E6F2EC; --warning: #B5772A; --warning-bg: #FBF1E2; --danger: #B23A48; --danger-bg: #F7E7E9; --info: var(--blue-500); --info-bg: var(--sky-100); /* ---- Semantic foreground / surface roles ---- */ --fg-1: var(--navy); /* headings, primary text on light */ --fg-2: var(--gray-600); /* secondary / supporting text */ --fg-3: var(--gray-500); /* muted captions, metadata */ --fg-on-dark: #EAF1F6; /* text on navy fields */ --fg-on-dark-2:#9FB6C7; /* secondary text on navy */ --link: var(--blue); --bg-page: var(--white); --bg-tint: var(--gray-50); --bg-panel: var(--sky-100); --bg-dark: var(--navy); --border: var(--gray-200); --border-strong:var(--gray-300); /* ---- Type families ---- */ --font-display: "Poppins", "Trebuchet MS", system-ui, sans-serif; --font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; /* ---- Type weights ---- */ --w-display: 900; /* Poppins Black */ --w-heading: 800; /* Poppins ExtraBold */ --w-subhead: 600; /* Poppins SemiBold */ --w-bold: 700; --w-medium: 500; --w-regular: 400; /* ---- Type scale (rem, 16px base; min 10pt ≈ 13.3px enforced) ---- */ --fs-display: 4rem; /* 64px - hero numbers, cover titles */ --fs-h1: 2.75rem; /* 44px */ --fs-h2: 2rem; /* 32px */ --fs-h3: 1.5rem; /* 24px */ --fs-h4: 1.25rem; /* 20px */ --fs-subhead: 1.0625rem;/* 17px - eyebrow/subhead */ --fs-body-lg: 1.1875rem;/* 19px */ --fs-body: 1.0625rem;/* 17px */ --fs-body-sm: 0.9375rem;/* 15px */ --fs-caption: 0.8125rem;/* 13px - never smaller (~10pt floor) */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.6; --tracking-eyebrow: 0.14em; --tracking-tight: -0.01em; /* ---- Spacing scale (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---- Radii (rounded, echoing the diamond mark) ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; /* cards */ --r-xl: 24px; --r-pill: 999px; /* ---- Shadows (soft, navy-tinted, never heavy) ---- */ --shadow-sm: 0 1px 2px rgba(10, 34, 57, 0.06); --shadow-md: 0 4px 14px rgba(10, 34, 57, 0.08); --shadow-lg: 0 12px 32px rgba(10, 34, 57, 0.12); } /* ============================================================ Semantic element defaults - opt in by importing this file. ============================================================ */ .anura { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .anura h1, .anura .h1, .anura h2, .anura .h2, .anura h3, .anura .h3, .anura h4, .anura .h4 { font-family: var(--font-display); color: var(--fg-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; } .anura h1, .anura .h1 { font-size: var(--fs-h1); font-weight: var(--w-heading); } .anura h2, .anura .h2 { font-size: var(--fs-h2); font-weight: var(--w-heading); } .anura h3, .anura .h3 { font-size: var(--fs-h3); font-weight: var(--w-subhead); } .anura h4, .anura .h4 { font-size: var(--fs-h4); font-weight: var(--w-subhead); line-height: var(--lh-snug); } .anura .display { font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--fg-1); } .anura .eyebrow { font-family: var(--font-display); font-weight: var(--w-subhead); font-size: var(--fs-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--blue); } .anura p { margin: 0 0 var(--space-4); max-width: 68ch; text-wrap: pretty; } .anura .lead { font-size: var(--fs-body-lg); color: var(--fg-2); } .anura small, .anura .caption { font-size: var(--fs-caption); color: var(--fg-3); } .anura a { color: var(--link); text-decoration: none; } .anura a:hover { text-decoration: underline; }