/* Theme Name: Open Door Health Community Theme URI: https://generatepress.com Description: GeneratePress child theme for Open Door Health Community Author: Your Name Author URI: https://yoursite.com Template: generatepress Version: 1.0 */ /* ========================================================================== ANIMATION FLASH PREVENTION Loaded early (synchronously in ) to pre-hide animated elements before any plugin JS or async CSS has a chance to load. Problem: Otter Blocks loads its animation CSS asynchronously. Between the initial HTML paint and when that CSS arrives, animated elements are fully visible. Then Otter's CSS sets opacity:0, causing a visible flash. Fix: We set opacity:0 here, earlier in the load order. Otter restores visibility itself by adding .o-anim-ready when the animation fires. ========================================================================== */ /* Otter Blocks — animated elements (opacity restored by Otter's JS) */ [data-animation-name]:not(.o-anim-ready) { opacity: 0; } /* General safeguard for any block using animate.css via Otter. .animated is the animate.css base class; without .o-anim-ready the animation has not yet been triggered. */ .animated:not(.o-anim-ready) { opacity: 0; } /* Smooth scroll for anchor/ID links site-wide. prefers-reduced-motion: respect users who have requested less motion (WCAG 2.1 SC 2.3.3 — vestibular disorder accessibility). */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* ========================================================================== Brand Color Variables (from Brand Guidelines) ========================================================================== Blue: #007C91 - Primary brand color, headers, navigation, buttons Gray: #445D6C - Body text, secondary content Light Gray: #DBE2E9 - Borders, subtle backgrounds, captions Coral: #EA6D6A - Warm accent, secondary CTAs Green: #C4D600 - Lime accent, decorative elements Light Lime Green: #E3EAB0 - Light accent backgrounds ========================================================================== */ :root { /* Primary Colors */ --odh-blue: #007C91; --odh-teal: #007C91; --odh-gray: #445D6C; /* Secondary Colors */ --odh-gray-light: #DBE2E9; --odh-orange: #EA6D6A; --odh-teal-light: #E3EAB0; --odh-lime: #C4D600; --odh-lime-light: #E3EAB0; /* Neutrals */ --odh-white: #FFFFFF; --odh-off-white: #F7F9FA; --odh-dark: #2D3748; /* Typography */ --odh-font-primary: 'Montserrat', sans-serif; } /* ========================================================================== Base Typography ========================================================================== */ body, button, input, select, textarea, p, li, dd, dt, blockquote { font-family: var(--odh-font-primary); font-weight: 500; } h1, h2, h3, h4, h5, h6 { font-family: var(--odh-font-primary); color: var(--odh-blue); font-weight: 700; line-height: 1.2; } h1 { font-size: 2.5rem; font-weight: 800; } h2 { font-size: 2rem; font-weight: 700; } h3 { font-size: 1.5rem; font-weight: 700; } h4 { font-size: 1.25rem; font-weight: 600; } h5 { font-size: 1.1rem; font-weight: 600; } h6 { font-size: 1rem; font-weight: 600; } a { color: var(--odh-teal); transition: color 0.2s ease; } a:hover { color: var(--odh-blue); } /* ========================================================================== GeneratePress Overrides ========================================================================== */ /* NOTE: All header, navigation, utility bar, sticky nav, and mobile nav styles are in header.css (enqueued separately) */ /* ========================================================================== Buttons – structural base Scoped to Gutenberg block buttons only. Does NOT touch bare