/* * highcontrast.css * Center for Advanced Rehab at Parkside (parkside-2026 theme) * Applied when has class: high_contrast * -------------------------------------------------------- * Two-tone sectioning approach: * Dark sections → #000 background / #fff text * Light sections → #fff background / #000 text * Borders → currentColor or explicit #000/#fff * -------------------------------------------------------- */ /* ===================================================== BASE / BODY ===================================================== */ .high_contrast, .high_contrast body { background-color: #fff !important; color: #000 !important; } /* ===================================================== TYPOGRAPHY ===================================================== */ .high_contrast h1, .high_contrast h2, .high_contrast h3, .high_contrast h4, .high_contrast h5, .high_contrast h6, .high_contrast p, .high_contrast ul li, .high_contrast ol li, .high_contrast strong { color: inherit !important; } /* ===================================================== LINKS — inherit section color, underlined ===================================================== */ .high_contrast a, .high_contrast a strong { color: inherit !important; text-decoration: underline !important; } .high_contrast a:hover, .high_contrast a:focus-visible { outline: 2px solid currentColor !important; text-decoration: none !important; filter: invert(1) !important; } .high_contrast #logo a:hover, .high_contrast #logo a:focus-visible { filter: none !important; outline: none !important; } /* ===================================================== FOCUS STYLES ===================================================== */ .high_contrast a:focus-visible, .high_contrast button:focus-visible, .high_contrast [tabindex]:focus-visible, .high_contrast input:focus-visible, .high_contrast select:focus-visible, .high_contrast textarea:focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px !important; } /* ===================================================== BUTTONS / CTAs — always invert from section ===================================================== */ /* On light sections: black btn / white text */ .high_contrast .wp-block-button .wp-block-button__link, .high_contrast .button, .high_contrast .nav-previous a, .high_contrast .nav-next a { color: #fff !important; background-color: #000 !important; border: 2px solid #000 !important; text-decoration: none !important; } .high_contrast .wp-block-button .wp-block-button__link:hover, .high_contrast .wp-block-button .wp-block-button__link:focus-visible, .high_contrast .button:hover, .high_contrast .button:focus-visible, .high_contrast .nav-previous a:hover, .high_contrast .nav-next a:hover { color: #000 !important; background-color: #fff !important; border-color: #000 !important; filter: none !important; } /* On dark sections: white btn / black text */ .high_contrast .wp-block-cover .wp-block-button .wp-block-button__link, .high_contrast .wp-block-cover .button { color: #000 !important; background-color: #fff !important; border: 2px solid #fff !important; } .high_contrast .wp-block-cover .wp-block-button .wp-block-button__link:hover, .high_contrast .wp-block-cover .button:hover { color: #fff !important; background-color: #000 !important; border-color: #fff !important; filter: none !important; } /* Outline variant */ .high_contrast .wp-block-button.is-style-outline .wp-block-button__link { color: #000 !important; background-color: transparent !important; border: 2px solid #000 !important; } .high_contrast .wp-block-button.is-style-outline .wp-block-button__link:hover, .high_contrast .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { color: #fff !important; background-color: #000 !important; filter: none !important; } /* ===================================================== HEADER — DARK SECTION ===================================================== */ .high_contrast header { background-color: #000 !important; border-bottom: 2px solid #fff !important; color: #fff !important; } .high_contrast header h1, .high_contrast header h2, .high_contrast header h3, .high_contrast header h4, .high_contrast header p { color: #fff !important; } /* ===================================================== PRIMARY NAVIGATION (dark header) ===================================================== */ .high_contrast #primary nav ul li a { color: #fff !important; border-color: transparent !important; } .high_contrast #primary nav ul li:hover > a, .high_contrast #primary nav ul li.current-menu-item > a, .high_contrast #primary nav ul li.current_page_item > a, .high_contrast #primary nav ul li.current-page-ancestor > a, .high_contrast #primary nav ul li.current-menu-ancestor > a, .high_contrast #primary nav ul li.current-menu-parent > a, .high_contrast #primary nav ul li.current-page-parent > a, .high_contrast #primary nav ul li.current_page_parent > a, .high_contrast #primary nav ul li.current_page_ancestor > a { color: #aaa !important; background-color: transparent !important; border-color: transparent !important; } .high_contrast #primary nav ul li.menu-item-has-children > a::after { color: #fff !important; } /* Sub-menu — light section */ .high_contrast #primary nav ul.sub-menu { background-color: #fff !important; border: 2px solid #000 !important; color: #000 !important; } .high_contrast #primary nav ul.sub-menu li a { color: #000 !important; border-color: #ccc !important; } .high_contrast #primary nav ul.sub-menu li a:hover { color: #fff !important; background-color: #000 !important; filter: none !important; } .high_contrast #primary nav ul.sub-menu li.current-menu-item > a, .high_contrast #primary nav ul.sub-menu li.current_page_item > a { color: #fff !important; background-color: #000 !important; } /* Mobile nav */ @media all and (max-width: 900px) { .high_contrast html nav .menu-primary-menu-container { background-color: #000 !important; border: 1px solid #fff !important; color: #fff !important; } .high_contrast html #primary nav ul li a, .high_contrast #primary nav ul li ul.sub-menu li a { color: #fff !important; } .high_contrast html #primary nav ul li:hover > a, .high_contrast html #primary nav ul li.current-menu-item > a, .high_contrast html #primary nav ul li.current_page_item > a { color: #000 !important; background-color: #fff !important; } } .high_contrast .lines .line { background-color: #fff !important; } /* ===================================================== ACCESSIBILITY TOOLS BAR — DARK SECTION ===================================================== */ .high_contrast .acc-tools.relative, .high_contrast .acc-tools { background-color: transparent !important; border-bottom: none !important; color: #fff !important; } .high_contrast .acc-tools a, .high_contrast .acc-tools .highcontrast, .high_contrast .acc-tools .textsize { color: #fff !important; background-color: #000 !important; border: 1px solid #fff !important; } .high_contrast .acc-tools a:hover { color: #000 !important; background-color: #fff !important; filter: none !important; } /* Individual tool wrappers */ .high_contrast .acc-tools .tool { background-color: #000 !important; border: 1px solid #fff !important; } /* Search tool — match contrast/font tools */ .high_contrast .acc-tools .search-tool, .high_contrast .acc-tools .tool.search-tool { background-color: #000 !important; border: 1px solid #fff !important; } .high_contrast .acc-tools .search-tool input[type="text"], .high_contrast .acc-tools #s { background-color: #000 !important; color: #fff !important; border-color: #fff !important; } .high_contrast .acc-tools .search-icon, .high_contrast .acc-tools .search-icon i { color: #fff !important; } /* ===================================================== HERO — DARK SECTION ===================================================== */ .high_contrast #hero .info-inner .title, .high_contrast #hero .info h1, .high_contrast #hero h1, .high_contrast #hero .ill_hero_slider .stage .slide .caption, .high_contrast #hero .ill_hero_slider .stage .slide .caption h1, .high_contrast #hero .ill_hero_slider .stage .slide .caption h2, .high_contrast #hero .ill_hero_slider .stage .slide .caption h3, .high_contrast #hero .ill_hero_slider .stage .slide .caption h4, .high_contrast #hero .ill_hero_slider .stage .slide .caption h5, .high_contrast #hero .ill_hero_slider .stage .slide .caption h6, .high_contrast #hero .ill_hero_slider .stage .slide .caption p { color: #fff !important; text-shadow: 0 0 8px #000, 0 0 16px #000 !important; } .high_contrast #hero .info::after { background-image: linear-gradient(11deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%) !important; } .high_contrast .wp-block-cover__image-background { filter: brightness(0.3) !important; } /* Slider controls */ .high_contrast .splide__toggle, .high_contrast .splide__arrow { background-color: #000 !important; border: 2px solid #fff !important; fill: #fff !important; } .high_contrast .splide__pagination__page { background-color: #666 !important; } .high_contrast .splide__pagination__page.is-active { background-color: #fff !important; } /* ===================================================== CONTENT PANELS — LIGHT SECTION (white-bg cards, video+text row, contact box) ===================================================== */ .high_contrast .wp-block-group.has-white-background-color, .high_contrast .wp-block-group.has-background { background-color: #fff !important; color: #000 !important; border: 1px solid #ccc !important; } .high_contrast .wp-block-group.has-white-background-color h1, .high_contrast .wp-block-group.has-white-background-color h2, .high_contrast .wp-block-group.has-white-background-color h3, .high_contrast .wp-block-group.has-white-background-color h4, .high_contrast .wp-block-group.has-white-background-color p, .high_contrast .wp-block-group.has-background h1, .high_contrast .wp-block-group.has-background h2, .high_contrast .wp-block-group.has-background h3, .high_contrast .wp-block-group.has-background h4, .high_contrast .wp-block-group.has-background p { color: #000 !important; } /* Light grey surface panels */ .high_contrast .wp-block-group[style*="background-color:#f8f8f8"], .high_contrast .wp-block-group[style*="background-color: #f8f8f8"], .high_contrast .wp-block-group[style*="background-color:#eef3f9"], .high_contrast .wp-block-group[style*="background-color: #eef3f9"] { background-color: #f0f0f0 !important; color: #000 !important; } /* ===================================================== HIGHLIGHT BLOCKS — alternating Left (image right) → LIGHT section Right (image left) → DARK section ===================================================== */ /* LEFT — light */ .high_contrast .highlight-item.left { background-color: #f0f0f0 !important; } .high_contrast .highlight-item.left .info { background-color: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; color: #000 !important; } .high_contrast .highlight-item.left .info h2, .high_contrast .highlight-item.left .info p { color: #000 !important; } .high_contrast .highlight-item.left .info hr { border-color: #000 !important; } .high_contrast .highlight-item.left .info hr::before, .high_contrast .highlight-item.left .info hr::after { border-color: #000 !important; background-color: #fff !important; } /* RIGHT — dark */ .high_contrast .highlight-item.right { background-color: #000 !important; } .high_contrast .highlight-item.right .info { background-color: #111 !important; border: 1px solid #fff !important; box-shadow: none !important; color: #fff !important; } .high_contrast .highlight-item.right .info h2, .high_contrast .highlight-item.right .info p { color: #fff !important; } .high_contrast .highlight-item.right .info hr { border-color: #fff !important; } .high_contrast .highlight-item.right .info hr::before, .high_contrast .highlight-item.right .info hr::after { border-color: #fff !important; background-color: #111 !important; } .high_contrast .highlight-item.right .wp-block-button .wp-block-button__link, .high_contrast .highlight-item.right .button { color: #000 !important; background-color: #fff !important; border-color: #fff !important; } .high_contrast .highlight-item.right .wp-block-button .wp-block-button__link:hover, .high_contrast .highlight-item.right .button:hover { color: #fff !important; background-color: #000 !important; } /* Remove decorative background patterns */ .high_contrast .highlight-item.left::before, .high_contrast .highlight-item.left::after, .high_contrast .highlight-item.right::before, .high_contrast .highlight-item.right::after { display: none !important; } /* ===================================================== BLOG ROLL BLOCK — DARK SECTION ===================================================== */ .high_contrast .blogs-wrap article { background-color: #000 !important; border: 1px solid #fff !important; color: #fff !important; } .high_contrast .blogs-wrap h4, .high_contrast .blogs-wrap h4 a, .high_contrast .blogs-wrap .date { color: #fff !important; } /* ===================================================== EVENTS BLOCK — DARK SECTION ===================================================== */ .high_contrast .events-wrap article { background: #000 !important; border-left-color: #fff !important; color: #fff !important; } .high_contrast .events-wrap article .date, .high_contrast .events-wrap article h4, .high_contrast .events-wrap article h4 a { color: #fff !important; } /* ===================================================== COVER SECTIONS Reviews (green gradient) → DARK Testimonial/CTA cover → LIGHT Contact banner (green grad) → DARK ===================================================== */ .high_contrast .wp-block-cover { background-color: #000 !important; color: #fff !important; } .high_contrast .wp-block-cover__background, .high_contrast .wp-block-cover__gradient-background { background: #000 !important; opacity: 1 !important; } .high_contrast .wp-block-cover__inner-container { color: #fff !important; } .high_contrast .wp-block-cover__inner-container h2, .high_contrast .wp-block-cover__inner-container h3, .high_contrast .wp-block-cover__inner-container h4, .high_contrast .wp-block-cover__inner-container p { color: #fff !important; } /* Testimonial cover has a light background image — make it light */ .high_contrast .wp-block-cover.is-light { background-color: #fff !important; color: #000 !important; } .high_contrast .wp-block-cover.is-light .wp-block-cover__background, .high_contrast .wp-block-cover.is-light .wp-block-cover__gradient-background { background: transparent !important; opacity: 0 !important; } .high_contrast .wp-block-cover.is-light .wp-block-cover__inner-container, .high_contrast .wp-block-cover.is-light .wp-block-cover__inner-container h2, .high_contrast .wp-block-cover.is-light .wp-block-cover__inner-container h3, .high_contrast .wp-block-cover.is-light .wp-block-cover__inner-container h4, .high_contrast .wp-block-cover.is-light .wp-block-cover__inner-container p { color: #000 !important; } .high_contrast .wp-block-cover.is-light .wp-block-button .wp-block-button__link { color: #fff !important; background-color: #000 !important; border-color: #000 !important; } .high_contrast .wp-block-cover.is-light .wp-block-button .wp-block-button__link:hover { color: #000 !important; background-color: #fff !important; border-color: #000 !important; } /* ===================================================== SEPARATORS / HR ===================================================== */ .high_contrast .content .wp-block-separator, .high_contrast footer .wp-block-separator, .high_contrast hr, .high_contrast .search-result { border-color: currentColor !important; opacity: 0.3 !important; } .high_contrast .content hr.is-style-dots, .high_contrast .content .wp-block-separator.is-style-dots { border-color: currentColor !important; opacity: 1 !important; } /* ===================================================== ACCORDION / DETAILS BLOCKS ===================================================== */ .high_contrast .wp-block-details { border-color: currentColor !important; } .high_contrast .wp-block-details summary, .high_contrast .wp-block-details summary::after, .high_contrast .wp-block-details:hover summary, .high_contrast .wp-block-details[open] summary { color: inherit !important; } /* ===================================================== FORMS — LIGHT SECTION ===================================================== */ .high_contrast .content .gform_wrapper.gravity-theme input[type=text], .high_contrast .content .gform_wrapper.gravity-theme input[type=email], .high_contrast .content .gform_wrapper.gravity-theme input[type=tel], .high_contrast .content .gform_wrapper.gravity-theme input[type=number], .high_contrast .content .gform_wrapper.gravity-theme input[type=search], .high_contrast .content .gform_wrapper.gravity-theme input[type=url], .high_contrast .content .gform_wrapper.gravity-theme input[type=password], .high_contrast .content .gform_wrapper.gravity-theme input[type=date], .high_contrast .content .gform_wrapper.gravity-theme input[type=month], .high_contrast .content .gform_wrapper.gravity-theme input[type=week], .high_contrast .content .gform_wrapper.gravity-theme input[type=time], .high_contrast .content .gform_wrapper.gravity-theme input[type=datetime-local], .high_contrast .content .gform_wrapper.gravity-theme input[type=color], .high_contrast .content .gform_wrapper.gravity-theme select, .high_contrast .content .gform_wrapper.gravity-theme textarea, .high_contrast form.post-password-form input[type="password"] { background-color: #fff !important; color: #000 !important; border: 2px solid #000 !important; } .high_contrast .content .gform_wrapper.gravity-theme label, .high_contrast .content .gform_wrapper.gravity-theme .gfield_label { color: #000 !important; } .high_contrast form.post-password-form input[type="submit"], .high_contrast .content .gform_wrapper.gravity-theme .gform_footer button, .high_contrast .content .gform_wrapper.gravity-theme .gform_footer input, .high_contrast .content .gform_wrapper.gravity-theme .gform_page_footer button, .high_contrast .content .gform_wrapper.gravity-theme .gform_page_footer input { color: #fff !important; background-color: #000 !important; border: 2px solid #000 !important; } .high_contrast form.post-password-form input[type="submit"]:hover, .high_contrast .content .gform_wrapper.gravity-theme .gform_footer button:hover, .high_contrast .content .gform_wrapper.gravity-theme .gform_footer input:hover, .high_contrast .content .gform_wrapper.gravity-theme .gform_page_footer button:hover, .high_contrast .content .gform_wrapper.gravity-theme .gform_page_footer input:hover { color: #000 !important; background-color: #fff !important; } /* ===================================================== FOOTER — LIGHT SECTION ===================================================== */ .high_contrast footer { background-color: #fff !important; border-top: 2px solid #000 !important; color: #000 !important; } .high_contrast footer p, .high_contrast footer li, .high_contrast footer h1, .high_contrast footer h2, .high_contrast footer h3, .high_contrast footer h4, .high_contrast footer h5, .high_contrast footer h6, .high_contrast footer i { color: #000 !important; } .high_contrast footer a { color: #000 !important; } .high_contrast footer a:hover, .high_contrast footer a:focus-visible { color: #fff !important; background-color: #000 !important; filter: none !important; } .high_contrast footer .wp-block-separator { border-color: #ccc !important; opacity: 1 !important; } .high_contrast .wp-social-link, .high_contrast .wp-social-link a { background-color: #000 !important; border-radius: 50% !important; } .high_contrast .wp-social-link svg, .high_contrast .wp-social-link svg path { fill: #fff !important; color: #fff !important; } .high_contrast .wp-social-link:hover, .high_contrast .wp-social-link:hover a { background-color: #fff !important; box-shadow: 0 0 0 2px #000 !important; filter: none !important; } .high_contrast .wp-social-link:hover svg path { fill: #000 !important; } /* ===================================================== COPYRIGHT BAR — LIGHT SECTION ===================================================== */ .high_contrast .copyright-wrap { background-color: #f0f0f0 !important; border-top: 1px solid #ccc !important; color: #000 !important; } .high_contrast .copyright p, .high_contrast .copyright p a, .high_contrast #legal a { color: #000 !important; } .high_contrast .copyright p a:hover, .high_contrast #legal a:hover { color: #fff !important; background-color: #000 !important; filter: none !important; } /* ===================================================== GOOGLE REVIEWS WIDGET — DARK SECTION ===================================================== */ .high_contrast rp-review, .high_contrast rp-review-inner { background-color: #111 !important; border: 1px solid #333 !important; color: #fff !important; } .high_contrast rp-review-name a, .high_contrast rp-review-text, .high_contrast rp-review-time, .high_contrast rp-stars { color: #fff !important; } .high_contrast rp-reply { color: #ccc !important; border-left: 3px solid #555 !important; } .high_contrast rp-btn-prev, .high_contrast rp-btn-next { background-color: #000 !important; border: 1px solid #fff !important; } .high_contrast rp-btn-prev svg path, .high_contrast rp-btn-next svg path { fill: #fff !important; } /* ===================================================== MAP IFRAME ===================================================== */ .high_contrast iframe[title*="Map"] { filter: invert(90%) hue-rotate(180deg) !important; border: 2px solid #000 !important; } /* ===================================================== IMAGES ===================================================== */ .high_contrast img:not([role="none"]):not(.rplg-img):not(#logo img) { filter: brightness(0.85) contrast(1.1) !important; } .high_contrast .wp-block-cover__image-background { filter: brightness(0.3) !important; } /* Logo in dark header — invert to white */ .high_contrast #logo img { filter: brightness(0) invert(1) !important; }