/* ============================================================= Lighthouse Wellness and Recovery — CSS Color Scheme Derived from Logo.png ============================================================= */ :root { /* ── Primary: Navy Slate ────────────────────────────────────── Used in logo outlines, circle border, and "LIGHTHOUSE" text */ --color-navy: #2E4A68; --color-navy-light: #3D6088; --color-navy-dark: #1E3248; /* ── Accent 1: Gold ─────────────────────────────────────────── Lighthouse light rays — warmth, hope, guidance */ --color-gold: #E8B84B; --color-gold-light: #F5D27A; --color-gold-dark: #C4941F; /* ── Accent 2: Wellness Green ──────────────────────────────── Leaf / nature symbol — health, growth, recovery */ --color-green: #3D9140; --color-green-light: #5CB85F; --color-green-dark: #2A6B2D; /* ── Accent 3: Medical Red ─────────────────────────────────── Medical cross — care, urgency support */ --color-red: #D93535; --color-red-light: #EF5F5F; --color-red-dark: #A82020; /* ── Accent 4: Teal ────────────────────────────────────────── Heartbeat / EKG line — vitality, monitoring, wellness */ --color-teal: #2D9B8A; --color-teal-light: #4DBFAE; --color-teal-dark: #1E7265; /* ── Neutrals ──────────────────────────────────────────────── */ --color-bg: #F5F0EB; /* warm off-white background */ --color-bg-section: #EDE8E2; /* slightly deeper warm white */ --color-surface: #FFFFFF; /* cards, panels */ --color-border: #D6CFC7; /* subtle dividers */ --color-text-primary: #2E4A68; /* same as navy — strong copy */ --color-text-secondary:#5A6F84; /* muted body text */ --color-text-muted: #8E9FAF; /* captions, placeholders */ --color-text-on-dark: #FFFFFF; /* text on dark backgrounds */ /* ── Semantic Aliases ──────────────────────────────────────── */ --color-primary: var(--color-navy); --color-primary-hover: var(--color-navy-light); --color-cta: var(--color-gold); --color-cta-hover: var(--color-gold-dark); --color-success: var(--color-green); --color-danger: var(--color-red); --color-info: var(--color-teal); /* ── Typography ────────────────────────────────────────────── Google Fonts: load both in before this stylesheet. */ --font-heading: 'Nunito', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --font-sans: var(--font-body); /* legacy alias */ --font-serif: 'Georgia', 'Times New Roman', serif; /* ── Type Scale (rem, base 16px) ───────────────────────────── */ --text-xs: 0.75rem; /* 12px — labels, fine print */ --text-sm: 0.875rem; /* 14px — captions, meta */ --text-base: 1rem; /* 16px — body copy */ --text-lg: 1.125rem; /* 18px — lead / intro paragraph */ --text-xl: 1.25rem; /* 20px — card titles, sub-headings */ --text-2xl: 1.5rem; /* 24px — section sub-headings (h3) */ --text-3xl: 1.875rem; /* 30px — section headings (h2) */ --text-4xl: 2.25rem; /* 36px — page headings (h1 sub-page) */ --text-5xl: 3rem; /* 48px — hero headline */ --text-6xl: 3.75rem; /* 60px — large hero (home only) */ /* ── Line Heights ──────────────────────────────────────────── */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed:1.75; /* ── Font Weights ──────────────────────────────────────────── */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Spacing & Radius ──────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill:9999px; /* ── Shadows ───────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(46, 74, 104, 0.10); --shadow-md: 0 4px 12px rgba(46, 74, 104, 0.14); --shadow-lg: 0 8px 24px rgba(46, 74, 104, 0.18); } /* ============================================================= Quick-reference utility classes ============================================================= */ /* Backgrounds */ .bg-navy { background-color: var(--color-navy); color: var(--color-text-on-dark); } .bg-gold { background-color: var(--color-gold); color: var(--color-navy-dark); } .bg-green { background-color: var(--color-green); color: var(--color-text-on-dark); } .bg-teal { background-color: var(--color-teal); color: var(--color-text-on-dark); } .bg-surface { background-color: var(--color-surface); } .bg-page { background-color: var(--color-bg); } /* Text */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-navy { color: var(--color-navy); } .text-gold { color: var(--color-gold-dark); } .text-green { color: var(--color-green); } .text-teal { color: var(--color-teal); } .text-red { color: var(--color-red); } /* Buttons */ .btn-primary { background-color: var(--color-navy); color: var(--color-text-on-dark); border: none; border-radius: var(--radius-md); padding: 0.6em 1.4em; font-family: var(--font-sans); cursor: pointer; transition: background-color 0.2s ease; } .btn-primary:hover { background-color: var(--color-navy-light); } .btn-cta { background-color: var(--color-gold); color: var(--color-navy-dark); border: none; border-radius: var(--radius-md); padding: 0.6em 1.4em; font-family: var(--font-sans); font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; } .btn-cta:hover { background-color: var(--color-gold-dark); } .btn-outline { background-color: transparent; color: var(--color-navy); border: 2px solid var(--color-navy); border-radius: var(--radius-md); padding: 0.6em 1.4em; font-family: var(--font-sans); cursor: pointer; transition: all 0.2s ease; } .btn-outline:hover { background-color: var(--color-navy); color: var(--color-text-on-dark); }