.WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink { width: 150px; height: 50px; } .WaGadgetLoginForm .loginContainer.authenticated.loginContainer.authenticated .loginLink:before { font: normal 25px/50px 'Tahoma'; content: 'Profile'; } .WaGadgetLoginForm .loginContainer.loginContainer .loginLink { width: 150px; height: 50px; } .WaGadgetLoginForm .loginContainer.loginContainer .loginLink:before { font: normal 25px/50px 'Tahoma'; content: 'Login'; } /* Contact Us header fix 2026-07-04: make the CTA a deliberate top-aligned button instead of stranded text */ .isong-header-inner { align-items: flex-start !important; } .isong-header-cta { margin-top: 20px; } .isong-header-text { background-color: #2E4C78 !important; color: #ffffff !important; border: 2px solid #2E4C78 !important; } .isong-header-text:hover { background-color: #ffffff !important; color: #2E4C78 !important; border: 2px solid #56B9A0 !important; } /* ISONG header: match the Login/Profile button to the Contact Us button and align it */ .WaGadgetLoginForm .loginContainer .loginLink { position: relative !important; display: inline-block !important; box-sizing: border-box !important; width: 124px !important; height: 46px !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; background-color: #67B8DB !important; border: 2px solid #67B8DB !important; border-radius: 8px !important; vertical-align: middle !important; } .WaGadgetLoginForm .loginContainer .loginLink:before { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: Ubuntu, -apple-system, "system-ui", sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; color: #ffffff !important; } @media (max-width: 900px) { .WaGadgetLoginForm .loginContainer .loginLink { width: 106px !important; height: 40px !important; } .WaGadgetLoginForm .loginContainer .loginLink:before { font-size: 13px !important; } } @media (min-width: 901px) { .WaGadgetLoginForm { margin-top: 42px !important; } } @media (max-width: 900px) { .WaGadgetLoginForm { margin-top: 38px !important; } } /* Give the Login/Profile button room on inner-page headers so it does not overflow the header area. Inner pages split the header table 95%/5% (only ~60px for the login); this matches them to the home page's split so both buttons sit inside the header, identically on every page. */ .WaLayoutItem:has(.isong-header) { width: 83% !important; } .WaLayoutItem:has(.WaGadgetLoginForm) { width: 17% !important; } .WaGadgetLoginForm, .WaGadgetLoginForm .loginContainer, .WaGadgetLoginForm .authBox { text-align: left !important; } /* ========================================================================== ISONG accessibility overrides - added July 2026 Fixes WCAG 1.4.3 (contrast, AA) and WCAG 2.1.1 (keyboard, A) identified in the members-only accessibility audit. Each rule notes what it fixes. ========================================================================== */ /* --- 1. Keyboard-operable dropdown menus (WCAG 2.1.1, Level A) ------------- The theme opened submenus on :hover only, so keyboard users could not reach ANY second-level page, including the entire members-only area. Mirror the hover reveal with :focus-within. */ .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul, .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within ul.secondLevel { visibility: visible !important; opacity: 1 !important; } .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li, .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li > .item, .WaGadgetMenuHorizontal .menuInner ul.firstLevel li:focus-within > ul > li > .item > a { visibility: visible !important; } /* Visible focus indicator on menu links (WCAG 2.4.7) */ .WaGadgetMenuHorizontal .menuInner ul a:focus, .WaGadgetMenuHorizontal .menuInner ul a:focus-visible { outline: 3px solid #1A4E8A !important; outline-offset: -2px !important; } /* --- 2. Colour contrast (WCAG 1.4.3, Level AA) ---------------------------- Brand green #56B9A0 on white is 2.37:1; AA needs 4.5:1 (body) / 3:1 (large). Darken green TEXT on light backgrounds to #2E7D68 (4.94:1 on white). Decorative rules and buttons keep the original green. */ h1:not(.promo), .gadgetStyleNone h1:not(.promo), .pageTitleOuterContainer h1, .WaGadgetContentBlock h1, .WaGadgetContentBlock h2, .WaGadgetContentBlock h3, .gadgetContentEditableArea h1, .gadgetContentEditableArea h2, .gadgetContentEditableArea h3 { color: #2E7D68; } .WaGadgetContentBlock a:not(.functionalButton), .gadgetContentEditableArea a:not(.functionalButton), .boxOuterContainer a:not(.functionalButton), .WaGadgetPoweredByWA a, a[href*="wildapricot.com"] { color: #2E7D68 !important; } /* Green headline banners carry WHITE text (white on #56B9A0 = 2.13:1). Darken the FILL so the white text passes (white on #2E7D68 = 4.94:1). */ [style*="background-color:#56B9A0"], [style*="background-color: #56B9A0"], [style*="background-color:#56b9a0"], [style*="background-color: #56b9a0"] { background-color: #2E7D68 !important; } /* --- 3. Footer: green on the navy footer is 3.68:1. LIGHTEN (never darken) to the palette's lighter green #7DD4BE = 5.01:1 on navy. ----------------- */ .isong-footer h1, .isong-footer h2, .isong-footer h3, .isong-footer h4, .isong-footer h5, .isong-footer h6 { color: #7DD4BE !important; } /* --- 4. Inline colour overrides (added after post-fix re-audit) ----------- Abstract titles, presenter names and similar content are authored with an INLINE font colour of #56B9A0, which beats a plain stylesheet rule. Force the accessible green (#2E7D68 = 4.94:1 on white) wherever that colour is set inline. Elements on the navy banners set their own colours, so they are unaffected. */ font[color="#56B9A0"], font[color="#56b9a0"], [style*="color:#56B9A0"], [style*="color: #56B9A0"], [style*="color:#56b9a0"], [style*="color: #56b9a0"] { color: #2E7D68 !important; } /* The "Published Research" panel uses a mid-blue fill (#6C8EBF) behind WHITE link text, which measures only 3.36:1. Darken the fill to #4A6FA5 (5.11:1 with white) so those links pass AA. Same blue family, no visible redesign. */ [style*="background-color:#6C8EBF"], [style*="background-color: #6C8EBF"], [style*="background-color:#6c8ebf"], [style*="background-color: #6c8ebf"] { background-color: #4A6FA5 !important; } /* --- 5. Site-wide contrast sweep (public + member pages) ------------------ Found by auditing all 49 pages. Each replacement was checked to pass AA before being applied; the "was" figure is the failing ratio it replaces. */ /* Event-list dates were light grey (#B7B7B7) at 2.01:1. -> #6E6E6E = 5.10:1 */ .boxesListInner td.left, .WaGadgetEventsStateList td.left, td.left { color: #6E6E6E !important; } /* Committee chair roles were a lighter green (#3F9D85) at 3.15:1 on the card background. -> #2E7D68 = 4.72:1 */ .isong-chair-role, span.isong-chair-role { color: #2E7D68 !important; } /* Brand-green buttons carried white text at 2.37:1. Darken the fill so the white text passes: white on #2E7D68 = 4.94:1. */ a.stylizedButton.buttonStyle001, a.stylizedButton.buttonStyle002, .stylizedButton.buttonStyle001, .stylizedButton.buttonStyle002 { background-color: #2E7D68 !important; color: #FFFFFF !important; } /* Blue callout panels (#3598C1) held dark body text at 3.86:1, and after the green link fix their links dropped to 1.5:1. Darken the panel and set all text and links inside to white (5.86:1), matching the navy callouts used elsewhere on the site. */ [style*="background-color:#3598C1"], [style*="background-color: #3598C1"], [style*="background-color:#3598c1"], [style*="background-color: #3598c1"] { background-color: #1F6C8C !important; } [style*="background-color:#3598C1"] *, [style*="background-color: #3598C1"] *, [style*="background-color:#3598c1"] *, [style*="background-color: #3598c1"] * { color: #FFFFFF !important; } [style*="background-color:#3598C1"] a, [style*="background-color:#3598c1"] a { color: #FFFFFF !important; text-decoration: underline !important; } /* Muted italic note on the homepage was #6B7A90 at 4.36:1. -> #5A6778 = 5.76:1 */ .isong-repro-note, em[style*="color:#6B7A90"], [style*="color:#6b7a90"] { color: #5A6778 !important; } /* --- 6. Final contrast pass (all 49 pages re-audited) --------------------- Every replacement below was measured before being applied. */ /* IMPORTANT GUARD: text sitting on the navy panels must be WHITE, not the darkened green. Darkened green on navy is 1.76:1 - worse than the original problem. This is what stops a global green from breaking the dark panels. Do not remove it if you ever change the green. */ [style*="background-color:#2E4C78"] h1, [style*="background-color:#2E4C78"] h2, [style*="background-color:#2E4C78"] h3, [style*="background-color:#2E4C78"] h4, [style*="background-color:#2E4C78"] p, [style*="background-color:#2E4C78"] span, [style*="background-color:#2E4C78"] li, [style*="background-color:#2E4C78"] a, [style*="background-color:#2e4c78"] h2, [style*="background-color:#2e4c78"] a, [style*="background-color: #2E4C78"] h2, [style*="background-color: #2E4C78"] a { color: #FFFFFF !important; } [style*="background-color:#2E4C78"] a, [style*="background-color:#2e4c78"] a { text-decoration: underline !important; } /* Brand-green button/fill: white text needs the darker green (4.94:1). */ a.isong-members-btn, .isong-members-btn, span.isong-welcome-divider { background-color: #2E7D68 !important; } a.isong-members-btn, .isong-members-btn { color: #FFFFFF !important; } /* Header Profile / login button: white on #67B8DB was 2.22:1 -> 5.25:1. */ /* ISONG's own CSS sets this blue with !important at higher specificity, so we keep their blue button and darken the TEXT instead: #333333 on #67B8DB = 5.69:1 (white was 2.22:1). Least invasive, button looks unchanged. */ .WaGadgetLoginForm .loginContainer .loginLink, .WaGadgetLoginForm .loginContainer.loginContainer .loginLink, .WaGadgetLoginForm .loginContainer.authenticated .loginLink, a.loginLink, .loginLink { color: #333333 !important; } /* Role labels on board and committee cards (#3F9D85 -> 4.72:1). */ .isong-member-role, span.isong-member-role, .isong-chair-role, span.isong-chair-role, .isong-committee-card h3, .isong-member-card h3 { color: #2E7D68 !important; } /* Forum metadata greys (#B7B7B7 = 2.0:1 -> 5.10:1). */ span.linkDisabled, .linkDisabled, span.lastReplyAuthor, .lastReplyAuthor { color: #6E6E6E !important; } /* Muted homepage note (#6B7A90 = 4.36:1 -> 5.76:1). */ p.isong-welcome-note, .isong-welcome-note { color: #5A6778 !important; } /* Green text on the pale green tint: #2E7D68 there is 4.48:1 (just under). #26685A = 5.93:1. */ [style*="background-color:#E8F7F3"] a, [style*="background-color:#E8F7F3"] span, [style*="background-color:#e8f7f3"] a, [style*="background-color:#e8f7f3"] span { color: #26685A !important; } /* --- 7. Corrections after re-audit --------------------------------------- */ .WaGadgetContent[style*="2E4C78"] *, .isong-navy *, .isong-navy-panel * { color:#FFFFFF !important; } a.stylizedButton.buttonStyle001, a.stylizedButton.buttonStyle002, .stylizedButton.buttonStyle001, .stylizedButton.buttonStyle002, a.isong-members-btn { color:#FFFFFF !important; } .isong-muted, [style*="color:#AAAAAA"], [style*="color:#aaaaaa"] { color:#6E6E6E !important; } [style*="color:#777777"] { color:#5F5F5F !important; } /* --- 8. Residual contrast + dark-mode opt-out ---------------------------- From an audit of ALL 49 pages (public and member). Every replacement below was measured before being applied. */ /* Opt out of forced dark mode. The site has no dark theme; without this, some mobile browsers (notably Chrome on Android "Auto Dark Theme") will invert it and produce unpredictable, low-contrast results. Equivalent to . */ :root { color-scheme: light; } /* The SELECTED top-level nav item was brand green on white (2.37:1). This was the single most common failure - one on nearly every page. -> 4.94:1 */ .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel > .item > a, .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li.sel.dir > .item > a { color: #2E7D68 !important; } /* Content buttons (.btn) were white on brand green (2.37:1). -> 4.94:1 */ a.btn, .btn { background-color: #2E7D68 !important; color: #FFFFFF !important; } /* Labels/badges on the pale green tint (2.15:1). -> 5.93:1 */ .mission-label, .badge { color: #26685A !important; } /* Small print inside content cards (#AAAAAA on #F8FAFB = 2.21:1). -> 4.87:1 */ .isong-committee-card .footer, .footer[class="footer"], div.footer { color: #6E6E6E !important; } /* Donation form: "Mandatory fields" note (#777 = 4.47:1). -> 6.39:1 */ .WaGadgetDonationForm strong, .generalFieldsContainer strong { color: #5F5F5F !important; } /* Donation form buttons: white on the light blue (2.22:1). As with the Profile button, keep the blue and darken the text: #333333 = 5.69:1. */ input.nextButton, .nextButton, input.nextButton.button { color: #333333 !important; } /* Board role-group headings (#3F9D85 = 3.29:1). -> 4.94:1 */ .isong-role-group-header h3, .isong-role-group h3 { color: #2E7D68 !important; } /* GUARD: navy buttons (.buttonStyle003) had our green text inside at 1.75:1. Text on navy must be white. */ a.buttonStyle003, a.buttonStyle003 *, .buttonStyle003, .buttonStyle003 * { color: #FFFFFF !important; } /* Links on the light-grey callout (#E6E6E6): our green is 3.96:1 there. -> 6.21:1 */ [style*="background-color:#E6E6E6"] a, [style*="background-color: #E6E6E6"] a, [style*="background-color:#e6e6e6"] a { color: #245C4C !important; } /* ============================================================ WCAG 2.1 AA - 1.4.3 Contrast (final pass, 12 Jul 2026) ============================================================ */ /* Light ISONG green (#56b9a0) applied INLINE by the editor as rgb(86,185,160). 2.37:1 on white -> #2E7D68 = 4.94:1. NOTE: earlier rules matched only the hex spelling, so they never fired. Keep BOTH the rgb() and hex forms below. */ .gadgetContentEditableArea [style*="rgb(86, 185, 160)"], .gadgetContentEditableArea [style*="rgb(86,185,160)"], .gadgetContentEditableArea [style*="#56b9a0" i], .gadgetContentEditableArea font[color="#56b9a0" i], .gadgetContentEditableArea font[color="#56b9a0" i] * { color: #2E7D68 !important; } /* Plain links on the light-grey (#E6E6E6) content panel: 3.96:1 -> #245C4C = 6.21:1. DO NOT REMOVE :not(.stylizedButton) - filled buttons on that same panel are white text on a #2E7D68 fill; darkening them drops the button to 1.56:1. */ div[style*="background-color:#E6E6E6" i] .gadgetContentEditableArea a:not(.stylizedButton), div[style*="background-color:#E6E6E6" i] .gadgetContentEditableArea a:not(.stylizedButton) * { color: #245C4C !important; } /* WildApricot membership-application form (the Join page) - vendor system greys. #777777 = 4.48:1 and #888888 = 3.54:1 -> #6E6E6E = 5.10:1. Text elements only; never inputs, so member-typed text stays black. */ .formTitleContainer, .formTitleContainer div, .mandatoryFieldsTitle, .mandatoryFieldsTitle strong, .textLine.typeInstruction, .typeInstruction, .extraInfo, .levelDescription, .levelRenewal, .levelRecurring { color: #6E6E6E !important; } /* ============================================================ Top-level menu: keep all 10 items visible (2026-07-12) ============================================================ WA collapses menu items it cannot fit into an unlabelled '...' overflow, and it always sacrifices the LAST item. With 10 top-level items the default padding overflows at 1200px. Trimming the horizontal padding lets all 10 fit down to 1200px (covers 1280/1366/1440/1512/1920). Menu order is deliberately: ... Resources, Members Only, Build the Helix. Members Only must NOT be last - it is the paid member benefit and was the original findability bug. Build the Helix is public and always visible to non-members (their menu is only 9 items), so it is the safe last item. */ .WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a { padding-left: 11px !important; padding-right: 11px !important; letter-spacing: 0 !important; } /* ================= BEGIN ISONG ACCESSIBILITY PATCH ================= */ /* Added 25 July 2026. WCAG 2.1 AA contrast corrections. */ /* To remove, delete everything between the BEGIN and END markers. */ /* Nothing above this block was modified. */ /* -- Skip link (needs the companion script to be inserted) ---------- */ .isong-skip{ position:absolute; left:-9999px; top:0; z-index:100000; display:inline-block; padding:.7rem 1.25rem; background:#0C3D33; color:#fff; text-decoration:none; font:600 1rem/1.2 Ubuntu,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; border-radius:0 0 4px 0; } .isong-skip:focus,.isong-skip:focus-visible{ left:0; outline:3px solid #A8E6D5; outline-offset:2px; } /* -- Visible keyboard focus ---------------------------------------- */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:3px solid #17685A; outline-offset:2px; } /* -- Build the Helix card: white text was 2.02:1 to 2.37:1 ---------- */ /* Same hue family, darker. Now 5.3:1 to 9.3:1. */ .isong-helix{ background-image:linear-gradient(135deg,#17685A 0%,#115043 55%,#0C3D33 100%) !important; } .isong-helix .isong-eyebrow{ color:#FFFFFF !important; } .isong-helix .isong-lead,.isong-helix .isong-pullquote{ color:#FFFFFF !important; } /* -- Footer: 4.26:1 and 4.00:1, both just under 4.5:1 --------------- */ .isong-brand-tag{ color:#C9D4E2 !important; } .isong-fb,.isong-x,.isong-bs,.isong-li,.isong-ig{ color:#A8E6D5 !important; } /* -- Login page ----------------------------------------------------- */ /* Theme link color #2E7D68 was inherited by the sign-in buttons: */ /* Google 1.38:1, Microsoft 2.70:1, Apple 4.24:1 */ .wa-authenticateLoginButton,.wa-authenticateLoginButton *{ color:#FFFFFF !important; } /* Google gets its own sanctioned neutral button rather than a */ /* darkened blue, so there is no branding conflict. 10.5:1. */ .googlePlus.wa-authenticateLoginButton{ background-color:#FFFFFF !important; border:1px solid #DADCE0 !important; } .googlePlus.wa-authenticateLoginButton,.googlePlus.wa-authenticateLoginButton *{ color:#3C4043 !important; } /* Submit button: white on #67B8DB was 2.22:1. Brand teal is 6.6:1. */ input[type=submit].loginButton,.loginContainerForm input[type=submit]{ background-color:#17685A !important; color:#FFFFFF !important; } /* ================== END ISONG ACCESSIBILITY PATCH ================== */ /* ================= BEGIN ISONG BUTTON CONTRAST ===================== */ /* Added 25 July 2026. WCAG 1.4.3. */ /* Measured from what actually renders, across all 26 stylized buttons */ /* on the public site: */ /* buttonStyle001 12 instances #FFFFFF on #2E7D68 4.94:1 pass */ /* buttonStyle002 12 instances #FFFFFF on #2E7D68 4.94:1 pass */ /* buttonStyle003 2 instances #2E7D68 on #2E4C78 1.76:1 FAIL */ /* Only 003 fails. Both instances are on the 2026 World Congress page: */ /* "Become a Sponsor Today" and "Call for Abstracts". The theme link */ /* color is inheriting onto a navy button, the same root cause as the */ /* sign-in buttons on the login page. */ /* White on #2E4C78 gives 8.68:1. Background is left untouched. */ /* To remove, delete everything between the BEGIN and END markers. */ a.buttonStyle003, a:link.buttonStyle003, a:visited.buttonStyle003, a.buttonStyle003:hover, a:link.buttonStyle003:hover, a.buttonStyle003:active, a:link.buttonStyle003:active{ color:#FFFFFF !important; } /* Keyboard focus for the stylized buttons. WCAG 2.4.7. */ a[class*="buttonStyle"]:focus-visible{ outline:3px solid #17685A !important; outline-offset:3px; } /* ================== END ISONG BUTTON CONTRAST ====================== */ /* ===== BEGIN ISONG HOME HEADING FONT (2026-07-25c) ===== */ /* The home page "Welcome to ISONG" h1 is set in Caveat, a handwriting face, by an inline style block inside the home page content gadget. This overrides the family only, leaving the responsive sizes and the brand colour alone. user.css loads last, so this wins without editing the fragile gadget. Rollback: delete everything between these two markers. */ .isong-welcome-header h1 { font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; letter-spacing: -0.01em !important; } /* ===== END ISONG HOME HEADING FONT (2026-07-25c) ===== */