/* * Idiom Child Starter — brand override stylesheet. * * Loaded by functions.php on the parent's `idiom_after_stylesheets` hook, so it * loads AFTER the parent CSS and wins the cascade. Put ALL per-company style * overrides here (not in style.css). * * The base theme is driven by CSS custom properties; override brand tokens here * rather than re-declaring component rules where possible. */ /* * Done brand palette * ---------------------------------------------------------------------------- * CTA buttons & links ... #d83f40 (red) -> --brand-accent * Top nav / Primary blue . #213a59 (navy) -> --brand-primary-dark * Support blue ........... #2e5382 -> --brand-primary * Primary text ........... #333333 -> --brand-ink (white on primary blue) * * The base theme's token values (in styles.css :root) were swapped to this * palette directly; the two TEXT tokens below are overridden here because the * base still maps them to the deep-navy ink value used for dark surfaces. */ :root { --brand-ink: #333333; /* primary body text */ --brand-accent-ink: #ffffff; /* legible text on the red accent (CTAs) */ } /* Links use the CTA red. Hover deepens to the red-dark shade. */ a { color: var(--brand-accent); } a:hover { color: #b5302f; } /* Primary CTA buttons in the brand red (base uses Support Blue for these). */ .btn-primary { background: var(--brand-accent); color: #fff; } .btn-primary:hover { background: #b5302f; color: #fff; } /* * Dark surfaces below reference --brand-ink for their BACKGROUND. Now that * --brand-ink is the #333 text color, re-pin them to deep navy so the footer * and Care Club section stay on-brand (white text keeps AAA contrast). */ .footer { background: #16273d; } .care-club-section { background: linear-gradient(135deg, #2e5382 0%, #213a59 100%); } .care-club-section.has-bg { background-color: #213a59; } /* Brand gradient — Support Blue -> Primary Blue (hero image overlay). */ .hero.has-bg .hero-overlay { background: linear-gradient(135deg, rgba(46, 83, 130, 0.86), rgba(33, 58, 89, 0.92)); } /* * Logo size. Done's mark renders at 100px wide on desktop; height is auto so the * SVG keeps its natural proportions. (The mobile and footer logo rules are * height-driven and unaffected.) */ .nav-wrapper .logo-img { width: 120px; height: auto; max-width: 120px; max-height: none; } /* --------------------------------------------------------------------------- * Hero eyebrow / breadcrumb * * Two markup patterns exist in the base theme: * 1. Breadcrumb heroes: