/* Theme Name: Hello Elementor Child — Telehealth Base Theme URI: https://novaStudiotmp.com Description: Child theme for Hello Elementor. Telehealth client template. Update Global Colors and Global Fonts in Elementor Site Settings, then update the CSS variables below to match. Author: Nova Studio Author URI: https://novaStudiotmp.com Template: hello-elementor Version: 1.0.33 Text Domain: hello-child */ /* ============================================================================= DESIGN TOKENS — SINGLE SOURCE OF TRUTH Update these variables when onboarding a new client. They cascade to all blocks, pages, and WooCommerce elements. ============================================================================= */ :root { /* --------------------------------------------------------------------------- COLORS — Humanne Health palette Source of truth: includes/color-palette.php + Elementor Site Kit sync --------------------------------------------------------------------------- */ /* Brand palette — Humanne */ --color-navy-primary: #0B1A2B; /* deep navy */ --color-navy-light: #1B3353; /* navy */ --color-gold: #B9965B; /* primary CTA, accent text, arrows */ --color-brown: #54351F; /* alt CTA / hover */ --color-teal: #B9965B; /* legacy alias → gold */ --color-steel-blue: #5C5C5C; /* muted gray */ --color-white: #FFFFFF; --color-off-white: #E9E2D2; /* footer / cream surfaces */ --color-text-dark: #000000; /* body copy */ --color-text-muted-token: #5C5C5C; /* secondary text */ --color-footer-bg: #E9E2D2; --color-arrow: #B9965B; /* Legacy brand tokens (backward compatible with Elementor ids) */ --color-royal-blue: var(--color-navy-primary); --color-deep-navy: var(--color-navy-primary); --color-near-black: #171717; --color-slate-gray: #171717; --color-muted-gray: var(--color-text-muted-token); --color-bright-blue: var(--color-gold); --color-ice-blue: #F8F4EC; --color-emerald: var(--color-gold); --color-midnight-blue: var(--color-navy-primary); --color-dark-blue: var(--color-navy-light); --color-sky-blue: var(--color-steel-blue); --color-light-gray: #E8E8E8; /* Semantic aliases (backward compatible) */ --color-primary: var(--color-gold); --color-primary-dark: var(--color-brown); --color-secondary: var(--color-gold); --color-secondary-dark: var(--color-brown); --color-accent: var(--color-gold); --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-token); --color-bg-light: #F7F7F7; --color-bg-white: var(--color-white); --color-border: #E8E8E8; --color-neutral-lightest: #FBF6EF; --color-neutral-lighter: #F8F1E7; --color-neutral-light: var(--color-text-muted-token); --color-neutral: var(--color-steel-blue); --color-neutral-dark: #171717; --color-neutral-darker: #171717; --color-neutral-darkest: #000000; --color-cta: var(--color-gold); --color-cta-hover: var(--color-brown); --color-cta-text: var(--color-white); --color-cta-text-hover: var(--color-white); --color-cta-white: var(--color-white); --color-cta-white-text: #000000; --color-cta-brown: var(--color-brown); --color-scheme-text: var(--color-text-dark); --color-scheme-bg: var(--color-white); --color-scheme-fg: var(--color-white); --color-scheme-border: var(--color-border); --color-scheme-accent: var(--color-gold); --color-border-dark: var(--color-neutral-darkest); --color-border-light: var(--color-border); --color-border-medium: var(--color-border); --color-border-thin: var(--color-border); --color-border-thick: var(--color-border); --color-border-very-thick: var(--color-border); --color-border-very-very-thick: var(--color-border); --color-border-very-very-very-thick: var(--color-border); /* --------------------------------------------------------------------------- TYPOGRAPHY Mirror font families in: Elementor → Site Settings → Global Fonts --------------------------------------------------------------------------- */ --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --font-ui: 'Inter', sans-serif; /* Font Weights */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:800; /* ------------------------------------------------------------------------- FONT SIZES — Desktop (exact Figma values) ------------------------------------------------------------------------- */ /* Headings */ --text-h1: 56px; /* Heading/H1 */ --text-h2: 48px; /* Heading/H2 */ --text-h3: 40px; /* Heading/H3 */ --text-h4: 32px; /* Heading/H4 */ --text-h5: 24px; /* Heading/H5 */ --text-h6: 20px; /* Heading/H6 */ --text-tagline: 16px; /* Heading/Tagline */ /* Body text scale */ --text-large: 20px; /* Text/Large */ --text-medium: 18px; /* Text/Medium */ --text-regular: 16px; /* Text/Regular */ --text-small: 14px; /* Text/Small */ --text-tiny: 12px; /* Text/Tiny */ /* ------------------------------------------------------------------------- FONT SIZES — Mobile (exact Figma values) ------------------------------------------------------------------------- */ --text-h1-mobile: 40px; --text-h2-mobile: 36px; --text-h3-mobile: 32px; --text-h4-mobile: 24px; --text-h5-mobile: 20px; --text-h6-mobile: 18px; /* ------------------------------------------------------------------------- LINE HEIGHTS (exact Figma values per heading level) ------------------------------------------------------------------------- */ --leading-h1: 120%; /* H1, H2, H3 */ --leading-h2: 120%; --leading-h3: 120%; --leading-h4: 130%; /* H4 */ --leading-h5: 140%; /* H5, H6 */ --leading-h6: 140%; --leading-text: 150%; /* All body text sizes */ --leading-tagline:150%; /* Tagline */ /* Aliases for convenience */ --leading-tight: 120%; --leading-normal: 150%; --leading-loose: 160%; /* ------------------------------------------------------------------------- LETTER SPACING ------------------------------------------------------------------------- */ --tracking-h1: -0.02em; /* Heading/H1 — -2% from Figma */ --tracking-normal: 0; /* --------------------------------------------------------------------------- SPACING SCALE --------------------------------------------------------------------------- */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --space-2xl: 64px; --space-3xl: 96px; /* Section vertical padding */ --section-padding-y: 80px; /* --------------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------------- */ --container-width: 1200px; --container-padding: 24px; /* --------------------------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; --radius-cta: 999px; /* --------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 12px 32px rgba(0,0,0,0.12); /* --------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --transition: 0.2s ease; }