/* ========================================================================== CareHearths — Custom theme layer for UIkit 3 -------------------------------------------------------------------------- This file ONLY holds: 1. Brand design tokens (colors, type, spacing) as CSS variables 2. Small overrides that theme UIkit components to the brand 3. Accessibility guarantees (focus states, tap targets, readable type) Everything structural (grid, spacing utilities, form markup) comes from UIkit 3 classes in index.html so we avoid re-inventing the framework. ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Palette is sampled directly from the CareHearths logo: - Deep navy .... the "CH" monogram -> primary text & CTAs - Aqua / teal .. the heart body -> soft accents, backgrounds - Ocean blue ... the ribbon -> secondary accent, links No pure #000 or #fff anywhere (see --ink / --surface). -------------------------------------------------------------------------- */ /* Self-hosted variable font (replaces Google Fonts round trip: previously HTML -> fonts.googleapis.com CSS -> fonts.gstatic.com file, now a single same-origin request that can be preloaded from ). Covers the whole 300-900 weight range used across this page in one 49KB file. */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../assets/fonts/nunito-sans-variable.woff2") format("woff2"); } :root { /* Brand colors */ --navy: #17255a; /* primary brand / CH monogram */ --navy-600: #22337a; /* hover state for navy */ --ocean: #2e6ea6; /* ribbon blue */ --teal: #5bb0b4; /* heart teal */ --teal-100: #e3f1f1; /* faint teal wash */ --aqua-50: #f3f9f9; /* page background tint */ /* Neutrals — intentionally NOT #000 / #fff */ --ink: #26303f; /* body copy (WCAG AA on light surfaces) */ --ink-soft: #4a5566; /* secondary copy */ --surface: #fcfdfd; /* cards / form panel */ --line: #d9e4e6; /* hairline borders */ /* Fluid type scale — clamp(min, preferred, max) keeps copy readable from small phones up to large desktops without media queries. */ --fs-eyebrow: clamp(0.82rem, 0.4vw + 0.75rem, 0.95rem); --fs-body: clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem); /* >= 18px */ --fs-lead: clamp(1.1rem, 0.5vw + 0.9vh + 0.6rem, 1.35rem); --fs-h2: clamp(1.35rem, 1vw + 1.1rem, 1.75rem); --fs-h1: clamp(1.75rem, 1.8vw + 1.8vh + 0.3rem, 3.2rem); --lh-body: 1.65; /* required readable line-height */ --radius: 16px; --radius-sm: 12px; --shadow: 0 18px 50px -24px rgba(23, 37, 90, 0.35); --tap: 48px; /* min interactive size (> 44px requirement) */ } /* -------------------------------------------------------------------------- 2. BASE TYPOGRAPHY Single, warm, highly legible sans-serif (Nunito Sans) for consistency. -------------------------------------------------------------------------- */ body { font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background-color: #0a1228; } h1, h2, h3 { font-family: "Nunito Sans", sans-serif; color: var(--navy); line-height: 1.15; letter-spacing: -0.01em; } p { margin: 0 0 1rem; } strong { color: var(--navy); font-weight: 800; } /* -------------------------------------------------------------------------- 3. LAYOUT SHELL The page is one 100vh viewport split into two columns (see index.html). min-height lets the layout grow & scroll gracefully on short screens. -------------------------------------------------------------------------- */ .ch-viewport { min-height: 100vh; min-height: 100svh; /* respects mobile browser chrome */ display: flex; flex-direction: column; } /* Full-page hero background image with dark overlay for readability */ .ch-viewport { background: linear-gradient(rgba(8, 16, 36, 0.68), rgba(8, 16, 36, 0.68)), url('../assets/hero-bg.webp') center / cover no-repeat; } /* Masthead ------------------------------------------------------------- */ .ch-mast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(0.9rem, 2vw, 1.4rem) clamp(1rem, 4vw, 3rem); background: rgba(250, 250, 250, 0.88); border-bottom: 1px solid rgba(23, 37, 90, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ch-brand { display: flex; align-items: center; gap: 0.9rem; } .ch-brand img { width: clamp(60px, 8vw, 80px); height: auto; display: block; } .ch-brand__wordmark { display: flex; flex-direction: column; gap: 0; } .ch-brand__name { font-weight: 900; font-size: 1.6rem; color: var(--navy); line-height: 1.05; } .ch-brand__tag { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.03em; line-height: 1.2; } /* Phone quick-action in masthead */ .ch-phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0 1.15rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--navy); font-weight: 800; text-decoration: none; background: var(--surface); } .ch-phone:hover { border-color: var(--teal); color: var(--navy); } .ch-phone svg { stroke-width: 2.2; } /* Two-column hero ------------------------------------------------------ */ /* Grid is provided by UIkit (uk-grid). This just vertically centers the columns and gives the whole hero room to breathe inside the viewport. */ .ch-hero { flex: 1 1 auto; display: flex; align-items: center; padding: clamp(0.75rem, 2vh, 2rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 2.5vh, 2rem); } /* -------------------------------------------------------------------------- 4. LEFT COLUMN — introduction & services -------------------------------------------------------------------------- */ .ch-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; line-height: 1.2; font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #aeeef0; background: rgba(91, 176, 180, 0.22); padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(91, 176, 180, 0.35); } .ch-h1 { font-size: var(--fs-h1); font-weight: 900; margin: clamp(0.5rem, 1.5vh, 1rem) 0 clamp(0.4rem, 1vh, 0.75rem); color: #fff; } .ch-h1 em { font-style: normal; color: var(--teal); } .ch-lead { font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.85); max-width: 34ch; margin-bottom: clamp(0.5rem, 1.2vh, 1rem); } .ch-intro { max-width: 52ch; } /* Services list — semantic