/* 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.70 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 — synced from Elementor Site Kit (functions.php bridge). Source of truth: Elementor → Site Settings → Global Colors --------------------------------------------------------------------------- */ --color-primary: #2D7DD2; --color-primary-dark: #1A5FA8; --color-secondary: #3BB273; --color-secondary-dark: #2A8A57; --color-accent: #E84855; --color-text: #1A1A2E; --color-text-muted: #6B7280; --color-bg-light: #F9FAFB; --color-bg-white: #FFFFFF; --color-border: #E5E7EB; --color-neutral-lightest: #EEEEEE; --color-neutral-lighter: #CCCCCC; --color-neutral-light: #AAAAAA; --color-neutral: #666666; --color-neutral-dark: #444444; --color-neutral-darker: #222222; --color-neutral-darkest: #000000; --color-scheme-text: #000000; --color-scheme-bg: #FFFFFF; --color-scheme-fg: #FFFFFF; --color-scheme-border: #000000; --color-scheme-accent: #000000; --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: 'Roboto', sans-serif; /* Font 1 — H1–H4 */ --font-body: 'Roboto', sans-serif; /* Font 2 — paragraphs, lists */ --font-ui: 'Roboto', sans-serif; /* Font 3 — buttons, nav, labels */ /* 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; /* --------------------------------------------------------------------------- SHADOWS --------------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* --------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --transition: 0.2s ease; } /* ============================================================================= FOOTER NAV — column layout with always-visible children (.elementor-nav-menu--main is the