/* * Site theme * ---------- * This is the only CSS file developers should normally edit when branding a * new site. Keep this file limited to colors and fonts. Bootstrap components, * spacing, layout, borders, shadows, and CMS shell behavior are standardized * elsewhere and should remain unchanged between projects. */ :root { /* Brand colors */ /* Main brand action color: primary buttons, active controls, and prominent accents. */ --site-color-primary: #f58025; /* Darker primary state used for hover, focus, and active interactions. #e86016 is the brand's own "dark-orange", named in the October review's palette alongside Orange #f58025 and Light-orange #ffe0c8. It replaces #d96b14, which was a derived darker orange rather than a brand value. Almost a pure hue shift - redder, not darker. Relative luminance moves 0.2532 to 0.2558, so everything reading this token keeps the contrast it had: white on it is 3.43:1 where it was 3.46:1, dark text 4.49:1 where it was 4.45:1. Nothing crosses a threshold in either direction. (White on this colour passes AA for large text at 3:1 and not for normal text at 4.5:1 - unchanged by this edit, and true of the old value too.) 28 declarations across the template read this token, so the change is site-wide by design, not only on buttons: the footer's utility gradient and solid CTA hover, the mega-menu panel background, the three --site-gradient-* ramps, the accordion editor gradients, the video modal, and every .btn-primary / .btn-outline-primary hover and active state. */ --site-color-primary-hover: #e86016; /* Anything that sits ON the orange. White, without exception - this single token is where the brand rule from the October review lives: "any black on an orange background should be white on an orange background". It was #212529, and because every consumer of this token in the template is a foreground on a primary-coloured surface - card overlays, webinar overlays, the footer's solid CTA and utility strip, ::selection, the admin account icon - that one value was putting dark text on orange in a dozen places at once. Fixing them rule by rule would have meant finding all twelve and would have left the next one to be written wrong by default. The rule belongs here, where it is stated once and inherited. ACCESSIBILITY, recorded rather than buried: white on #f58025 is 2.63:1, against 5.87:1 for the #212529 it replaces, and 4.5:1 is what normal text needs. This is a brand decision taken knowingly and it is not a new one - white already sat on this same orange on every primary button (--site-color-primary-button-text, below), on the header bar, and on the video play control. What changed is that it is now uniform and declared, instead of scattered across components that each disagreed with their neighbours. Where a dark foreground on orange IS wanted, set it on that component, not here. */ --site-color-primary-contrast: #ffffff; /* Primary button text follows the original BioHorizons white-on-orange treatment. Now the same value as the contrast token above, so it changes nothing on its own - kept because it is the hook the template's filled-control chain reads (var(--site-color-primary-button-text, var(--site-color-primary-contrast))), and removing it would silently re-point every button at whatever this theme's contrast token becomes. */ --site-color-primary-button-text: #ffffff; /* Supporting brand color: navigation, secondary buttons, and dark branded regions. */ --site-color-secondary: #444444; /* Darker secondary state used for hover, focus, active controls, and the footer. */ --site-color-secondary-hover: #2f2f2f; /* Text/icon color placed on the secondary color. Keep this accessible against secondary. */ --site-color-secondary-contrast: #ffffff; /* Subtle brand accent used for decorative details, badges, and strong neutral borders. */ --site-color-accent: #adafb2; /* Darker accent state for interactive uses of the accent color. */ --site-color-accent-hover: #929497; /* Text/icon color placed on the accent color. Keep this accessible against accent. */ --site-color-accent-contrast: #212529; /* Light emphasis color used for callouts, selected areas, and branded background washes. */ --site-color-highlight: #fff4e7; /* Stronger highlight state used when a highlighted element is hovered or active. */ --site-color-highlight-hover: #ffe5c7; /* Text/icon color placed on the highlight color. Keep this accessible against highlight. */ --site-color-highlight-contrast: #444444; /* Brand gradients */ /* BioHorizons Orange to Dark Orange. */ --site-gradient-1: linear-gradient(90deg, var(--site-color-primary), var(--site-color-primary-hover)); /* Dark Orange to BioHorizons Orange to Dark Orange. */ --site-gradient-2: linear-gradient(90deg, var(--site-color-primary-hover), var(--site-color-primary), var(--site-color-primary-hover)); /* BioHorizons Orange to Dark Orange to BioHorizons Orange. */ --site-gradient-3: linear-gradient(90deg, var(--site-color-primary), var(--site-color-primary-hover), var(--site-color-primary)); /* Text and links */ /* Default heading color for h1-h6 and heading-style components. */ --site-color-heading: var(--site-color-secondary); /* Default body-copy color. */ --site-color-text: #444444; /* Secondary copy color for help text, metadata, captions, and placeholders. */ --site-color-text-muted: #6c757d; /* Default inline links use the primary brand color. */ --site-color-link: var(--site-color-primary); /* Link color used on hover and keyboard focus. */ --site-color-link-hover: #b3560d; /* Surfaces and borders */ /* Base page and component background. */ --site-color-background: #ffffff; /* Subtle alternate surface used by cards, table regions, and light page sections. */ --site-color-surface: #f8f9fa; /* More visible alternate surface used for grouped or emphasized regions. */ --site-color-surface-strong: #edf1f5; /* Default low-emphasis border and divider color. */ --site-color-border: #dee2e6; /* Higher-emphasis border used for active, selected, or strongly separated regions. */ --site-color-border-strong: #adafb2; /* Scrim placed behind modals, drawers, and other foreground overlays. */ --site-color-overlay: rgba(33, 37, 41, 0.72); /* Typography */ /* Default font stack for body copy, controls, navigation, and CMS interfaces. */ --site-font-body: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Font stack for headings. Point this to body when the site uses one type family. */ --site-font-heading: var(--site-font-body); /* Font stack for code examples and other fixed-width content. */ --site-font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", monospace; /* Main public navigation/header background. */ /* Public site shell colors * ------------------------ * SURFACES, not brand roles. Components read only these and never reach past them into * --site-color-primary / --site-color-secondary. See site-theme.css for the full rationale. * * Sampled from the live site (www.biohorizons.com) rather than guessed: the bar is the brand * orange, the takeover panel is #292f37, and the open item is picked out in orange while every * other heading on the panel is white. */ /* Where the top-level links sit on the main bar: flex-start, center or flex-end. Set once per site - see the fuller note in the template's site-theme.css. Left-aligned here because that is what the live site does. */ --site-nav-alignment: flex-end; /* links pushed to the far right */ /* Orange brand bar. The flat colour is the base and the fallback; the gradient below layers over it, so a theme that sets no gradient still gets a solid header. */ --site-header-background: var(--site-color-primary); /* The live site's header gradient, restored from its theme.css: .navbar-dark { background: linear-gradient(rgba(232,96,22,1), rgba(245,128,37,1)); } It is not decoration. Bar text is vertically centred, so it sits near the middle of the band at about #ee701e, where white measures 3.01:1 - against 2.63:1 on the flat brand orange. The darker top is doing real work for legibility, which is why a flat bar with white text on it reproduces the live site worse than it appears to. */ --site-header-background-image: linear-gradient(#e86016, #f58025); /* White, matching the primary buttons and the live site. ACCESSIBILITY, recorded rather than buried: this does not meet WCAG AA. White measures 2.63:1 on the flat orange and 3.01:1 at the middle of the gradient, against the 4.5:1 that text this size needs. It is a brand decision taken knowingly - the live site has always put white here, and --site-color-primary-button-text already does the same on every primary button. The hover state below is the accessible one. A previous revision used #212529 (5.87:1) and called it an approved deviation from the live site; that has been reversed. Its note also put white at 3.31:1, which does not follow from any orange in this file and understated the gap the decision was weighed against. */ --site-header-text: #ffffff; --site-header-hover-background: rgba(0, 0, 0, 0.12); /* The takeover panel, sampled from the live site. */ --site-header-panel-background: #292f37; --site-header-panel-text: #ffffff; --site-header-panel-muted: rgba(255, 255, 255, 0.72); --site-header-panel-border: rgba(255, 255, 255, 0.14); /* Orange marks the open item on the panel - 5.10:1 on #292f37. This is why the panel accent is its own token: --site-color-accent here is #adafb2, a grey, which reads as 6.09:1 but is flat and picks nothing out. Brand grey stays the brand grey; emphasis gets its own value. */ /* Column headings inside the panel: the brand colour itself. 5.14:1 on the #292f37 panel used by Default and Glass. On the Light skin the panel is #f8f9fa and this measures 2.49:1 - pale orange on near-white. That is a deliberate choice to keep one brand colour across all three skins rather than three different heading colours. */ --site-header-panel-heading: var(--site-color-primary); /* The brand orange, the same value as --site-header-panel-heading above. This was #eb8535, a half-shade off it, which put two oranges in the panel that nothing distinguished: a heading in one and the link you were hovering in the other. 5.14:1 on the #292f37 panel, against 5.10:1 for the old value - no change worth recording, and one fewer orange in the file. */ --site-header-panel-accent: #f58025; /* White on the orange accent, where the accent is a fill - in practice the mega-menu promo button. Was #212529, which is the dark-on-orange the October review rules out everywhere. This is a knowing contrast regression, 5.87:1 down to 2.63:1 on #f58025, and it is recorded rather than hidden. It is not a NEW deviation: --site-color-primary-button-text already puts white on this same orange on every primary button on the site, at the same 2.63:1, so the promo button was the odd one out in BOTH directions - the only orange button with dark text, and the only one meeting AA. Consistency with the brand was chosen over an exception that only one button kept. */ --site-header-panel-accent-contrast: #ffffff; /* Hover/focus on the orange bar: the text LIGHTENS to the brand's light orange. Brand rule, from the October review: nothing dark sits on an orange ground anywhere on this site, and the previous value here - #3d1400, a deep brown - was the most prominent instance of it on the page. This value cannot carry the state change on its own, and is not asked to. It measures 2.09:1 on the flat orange, 2.40:1 at the middle of the gradient and 2.74:1 at the top, so it is slightly LESS legible than the white it replaces (3.01:1 at mid). More to the point it is 1.25:1 against that white, which no one would see as a change. So the underline does the work. navigation-megamenu.css now sets text-decoration: underline on the desktop bar's hover and focus-visible states, specifically so this colour does not have to be the signal. The two changes are a pair: restoring a dark value here without removing that underline would be harmless, but softening this colour further WITHOUT the underline would leave the main navigation with no visible hover at all. The contrast note that used to sit here recorded 4.71:1 to 6.16:1 for the old brown. Kept for the record, because that legibility is what the brand decision trades away. */ --site-header-accent: #ffe0c8; /* The utility strip above the orange bar. Set to the review's first choice, #f58025, so the strip and the header band below it are one continuous orange rather than a grey step into an orange one. READ THIS BEFORE SHIPPING. The strip's text is still white, and white does not work on this background. Strip text is .8125rem - 13px, the smallest type on the site, so AA wants 4.5:1, and the numbers are: white at 82% (--su-fg, the links) 2.21:1 was 9.62:1 on #292f37 pure white (--su-fg-strong) 2.63:1 was 13.50:1 #292f37 text on this orange 5.14:1 passes The search field is the other half of it. Its ground and border are white at 8% and 16%, which read as 1.08:1 and 1.16:1 against this orange - the field effectively disappears, where on #292f37 it sat at 1.29:1 and 1.66:1 and was at least visible. So this value is viewable but not shippable on its own. Making it shippable means flipping the strip to dark text, which is the --site-utility-text line below plus a darker ground and border for the search field in site-utility-bar.css. The previous value, and the reasoning for it, is in version control. */ --site-utility-background: #f58025; --site-utility-text: #ffffff; /* Brand mark sizes, carried over from the previous BioHorizons site: its header logo was 250x55 and its footer logo 250x63. The site-standards defaults are 2.5rem and 2rem, which read noticeably smaller than what this brand had been using. These lived in site-theme.css until now, which this project does not bundle - BundleConfig loads this file in its place - so they were declared but never applied, and the header had been rendering at the stock 2.5rem / 4.5rem the whole time. Moved here, where they take effect. Expect the header mark to grow and the bar with it; that is the correction, not a side effect. Width is never set - the mark is sized by height and keeps its own ratio - so 3.5rem gives about 221px across and 4rem about 252px, against the 241.7 x 61.3 viewBox of the current SVG. --site-header-min-height goes up with it: a 56px logo in the stock 72px bar leaves 8px of air, which looks cramped. */ --site-brand-logo-height: 3.5rem; --site-brand-logo-height-small: 3rem; --site-brand-logo-height-footer: 4rem; --site-header-min-height: 5rem; /* Main public footer background. */ --site-footer-background: var(--site-color-secondary-hover); /* Footer text, link, and icon color. */ --site-footer-text: #f8f9fa; /* The footer's orange accent strip - the email updates button and the social pills. This overrides a default that would otherwise give near-black text, and it is a deliberate exception to the contrast rule the rest of this file keeps. White on the strip's gradient measures 2.63:1 at #f58025 and 3.46:1 at #d96b14, against 4.5:1 for the 14px text and 3:1 for the pill borders. It is set to match the live biohorizons.com footer, which is white on orange, so this site does not read as a different brand from the one it replaces. Recorded here rather than left as a bare value: the next person to run a contrast pass will find this pairing and should know it was chosen, not missed. If the strip is ever allowed to darken, #bf5909 to #bb5c11 is the same hue at 4.5:1 and this line can go. Applies to the Default and Light footer themes. .ft--dark pins the strip back to the contrast token, so a dark-bodied footer is unaffected. */ --site-footer-utility-text: #ffffff; }