/* 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.37 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 — RYZN homepage (ryzn-homepage.html :root) Source of truth: includes/color-palette.php + Elementor Site Kit sync --------------------------------------------------------------------------- */ --navy: #091522; --ink: #173037; --aqua: #9bd5cf; --paper: #fafbf8; --muted: #566968; --line: #d7e0dc; --aqua-hover: #bce8df; --btn-secondary-bg: #213a42; --btn-secondary-text: #e7f3ef; --btn-secondary-border: #617a7f; --product-cta-hover: #284b52; --footer-text: #d5e3df; --footer-muted: #aebfbe; --category-tile: #e8efea; --product-cat: #c9dfd9; --category-compact: #e1e9e1; --product-art: #edf1ec; /* Brand palette — mapped onto existing token names */ --color-navy: var(--navy); --color-forest: var(--navy); /* legacy alias */ --color-ink: var(--ink); --color-muted: var(--muted); --color-cream: var(--paper); /* legacy alias */ --color-paper: var(--paper); --color-sage: var(--category-tile); --color-line: var(--line); --color-white: #fff; --color-leaf: var(--aqua); /* legacy alias */ --color-aqua: var(--aqua); --color-focus: #468b86; --color-cta-hover-token: var(--aqua-hover); --color-calc-dark: var(--navy); /* Product page — inherit RYZN tokens until a product HTML lands */ --product-ink: var(--ink); --product-muted: var(--muted); --product-cream: var(--paper); --product-sage: var(--category-tile); --product-line: var(--line); --product-soft: #edf1ec; --product-card: #fff; --product-card-border: var(--line); --product-accent: var(--aqua); --product-icon: #3c7675; --product-cta-hover: #284b52; --product-focus: #468b86; --product-cta-text: #fff; --product-visual-bg: var(--product-art); --product-visual-border: var(--line); --product-option-border: var(--line); --product-option-active: var(--navy); --product-option-fill: var(--product-cat); --radius-product-cta: 6px; --radius-product-card: 14px; --radius-product-visual: 14px; --leading-product: 1.6; /* Legacy token ids kept so existing CSS/Elementor still resolve */ --color-navy-primary: var(--navy); --color-navy-light: #284b52; --color-teal: var(--aqua); --color-steel-blue: var(--muted); --color-off-white: var(--paper); --color-text-dark: var(--ink); --color-text-muted-token: var(--muted); --color-royal-blue: var(--navy); --color-deep-navy: var(--navy); --color-near-black: var(--ink); --color-slate-gray: var(--ink); --color-muted-gray: var(--muted); --color-bright-blue: var(--aqua); --color-ice-blue: var(--paper); --color-emerald: var(--aqua); --color-midnight-blue: var(--navy); --color-dark-blue: #213a42; --color-sky-blue: var(--muted); --color-light-gray: var(--line); /* Semantic aliases */ --color-primary: var(--navy); --color-primary-dark: #284b52; --color-secondary: var(--category-tile); --color-secondary-dark: var(--navy); --color-accent: var(--aqua); --color-text: var(--ink); --color-text-muted: var(--muted); --color-bg-light: var(--category-tile); --color-bg-white: var(--color-white); --color-bg-page: var(--paper); --color-border: var(--line); --color-neutral-lightest: var(--category-tile); --color-neutral-lighter: var(--line); --color-neutral-light: var(--muted); --color-neutral: var(--muted); --color-neutral-dark: var(--ink); --color-neutral-darker: var(--ink); --color-neutral-darkest: var(--navy); --color-cta: var(--aqua); --color-cta-hover: var(--aqua-hover); --color-cta-text: var(--navy); --color-cta-text-hover: var(--navy); --color-scheme-text: var(--ink); --color-scheme-bg: var(--paper); --color-scheme-fg: var(--color-white); --color-scheme-border: var(--line); --color-scheme-accent: var(--aqua); --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: Raleway, Inter, Arial, sans-serif; /* h1 / h2 */ --font-body: Inter, Arial, sans-serif; /* body copy */ --font-ui: Inter, Arial, sans-serif; /* buttons, nav, UI */ /* 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 — RYZN homepage scale */ --text-h1: clamp(52px, 5.7vw, 80px); --text-h2: clamp(32px, 3.4vw, 46px); --text-h3: 24px; --text-h4: 1.625rem; --text-h5: 1.125rem; --text-h6: 1rem; --text-tagline: 0.75rem; /* 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: 3.05rem; --text-h2-mobile: 3rem; --text-h3-mobile: 1.8rem; --text-h4-mobile: 1.625rem; --text-h5-mobile: 1.125rem; --text-h6-mobile: 1rem; /* ------------------------------------------------------------------------- LINE HEIGHTS (exact Figma values per heading level) ------------------------------------------------------------------------- */ --leading-h1: 0.99; --leading-h2: 1.08; --leading-h3: 1.2; --leading-h4: 1.2; --leading-h5: 1.4; --leading-h6: 1.4; --leading-text: 1.6; --leading-tagline: 1.5; --leading-tight: 1.07; --leading-normal: 1.6; --leading-loose: 1.7; /* ------------------------------------------------------------------------- LETTER SPACING ------------------------------------------------------------------------- */ --tracking-h1: -0.045em; --tracking-h2: -0.045em; --tracking-h3: -0.025em; --tracking-eyebrow: 0.1em; --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: 1320px; --container-padding: 24px; /* --------------------------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-card: 14px; --radius-full: 9999px; --radius-cta: 6px; /* --------------------------------------------------------------------------- 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; } /* Product pages keep RYZN tokens until a dedicated product HTML arrives. */ body.single-product { --leading-normal: var(--leading-product); }