/* --- Enforced font scaling --- */ :root { --a11y-font-scale: 1; } html, body { font-size: calc(100% * var(--a11y-font-scale)); } /* Skip link visibility */ .sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .sr-only-focusable:focus { position:static; width:auto; height:auto; padding:.5rem; background:#fff; outline:2px solid; } /* Toolbar basics */ .a11y-toolbar { position: fixed; z-index: 100000; right: 1rem; bottom: 4.5rem; /* sits above the launcher */ display: none !important; /* hidden by default; beats inline/theme */ flex-wrap: wrap; gap: .4rem; align-items: center; background: #fff; border: 1px solid #ddd; border-radius: .75rem; padding: .5rem .6rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); } .a11y-toolbar.is-open { display: flex !important; } .btn-a11y { border:1px solid #ccc; background:#f9f9f9; padding:.25rem .5rem; border-radius:.5rem; cursor:pointer; } .btn-a11y:focus-visible { outline:2px solid currentColor; outline-offset:2px; } /* Floating launcher button */ #a11y-launcher { position: fixed; bottom: 1rem; right: 1rem; z-index: 100001; background: #228b22; color: #fff; border: none; border-radius: 50%; width: 48px; height: 48px; font-size: 24px; line-height: 48px; text-align: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.2); } /* ============================ High-Contrast (Light) Mode Scope: add .a11y-contrast to or ============================ */ .a11y-contrast { --hc-bg: #ffffff; --hc-text: #000000; --hc-muted: #2c2c2c; --hc-link: #0033cc; --hc-link-hover: #001a80; --hc-border: #000000; --hc-focus: #000000; --hc-chip-bg: #fff; --hc-chip-text: #000; } .a11y-contrast body { background: var(--hc-bg) !important; color: var(--hc-text) !important; text-shadow: none !important; } /* Links */ .a11y-contrast a, .a11y-contrast a:visited { color: var(--hc-link) !important; text-decoration: underline !Important; text-decoration-thickness: 2px !important; text-underline-offset: 2px !important; background: transparent !important; } .a11y-contrast a:hover, .a11y-contrast a:focus { color: var(--hc-link-hover) !important; text-decoration-thickness: 3px !important; } /* Focus rings */ .a11y-contrast :where(a, button, [role="button"], summary, input, select, textarea):focus-visible { outline: 3px solid var(--hc-focus) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Text tokens */ .a11y-contrast .text-muted, .a11y-contrast .color-medium, .a11y-contrast .font-sm, .a11y-contrast .small, .a11y-contrast .breadcrumb, .a11y-contrast .ratings-total, .a11y-contrast .form-text, .a11y-contrast .help-block, .a11y-contrast .invalid-feedback { color: var(--hc-muted) !important; } /* Surfaces */ .a11y-contrast .card, .a11y-contrast .panel, .a11y-contrast .modal-content, .a11y-contrast .dropdown-menu, .a11y-contrast .list-group-item { background: #fff !important; color: var(--hc-text) !important; border: 2px solid var(--hc-border) !important; box-shadow: none !important; } /* Buttons */ .a11y-contrast .btn, .a11y-contrast [class*="btn-"] { border: 2px solid var(--hc-border) !important; box-shadow: none !important; } .a11y-contrast .btn, .a11y-contrast .btn-primary, .a11y-contrast .btn-success, .a11y-contrast .btn-info, .a11y-contrast .btn-warning, .a11y-contrast .btn-danger, .a11y-contrast .btn-dark { background: #000 !important; color: #fff !important; } .a11y-contrast .btn-outline-*, .a11y-contrast .btn-light { background: #fff !important; color: #000 !important; } .a11y-contrast .btn:hover, .a11y-contrast .btn:focus { filter: brightness(0.9) !important; } /* Forms */ .a11y-contrast input, .a11y-contrast select, .a11y-contrast textarea, .a11y-contrast .form-control { color: var(--hc-text) !important; background: #fff !important; border: 2px solid var(--hc-border) !important; box-shadow: none !important; } .a11y-contrast input::placeholder, .a11y-contrast textarea::placeholder { color: #383838 !important; } .a11y-contrast .input-group:focus-within { box-shadow: 0 0 0 3px var(--hc-focus) !important; border-radius: .75rem; } .a11y-contrast .form-control:focus, .a11y-contrast .pac-target-input:focus { outline: 0 !important; box-shadow: none !important; } /* Nav & tables */ .a11y-contrast .nav-link, .a11y-contrast .dropdown-item { color: var(--hc-text) !important; } .a11y-contrast .nav-link.active, .a11y-contrast .dropdown-item.active, .a11y-contrast .active > .nav-link { color: #fff !important; background: #000 !important; border: 2px solid var(--hc-border) !important; } .a11y-contrast table, .a11y-contrast th, .a11y-contrast td { border-color: var(--hc-border) !important; } .a11y-contrast thead th { background: #000 !important; color: #fff !important; } /* Breadcrumbs */ .a11y-contrast .breadcrumb .breadcrumb-item a { color: var(--hc-link) !important; text-decoration: underline !important; } .a11y-contrast .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--hc-text) !important; } /* Calendars */ .a11y-contrast .flatpickr-day, .a11y-contrast .ui-datepicker td span, .a11y-contrast .ui-datepicker td a, .a11y-contrast .datepicker td, .a11y-contrast .datepicker td a, .a11y-contrast #calGrid .cell { color: #000 !important; background: #fff !important; border-color: #000 !important; } .a11y-contrast .flatpickr-day.selected, .a11y-contrast .ui-datepicker .ui-state-active, .a11y-contrast #calGrid .cell.selected, .a11y-contrast #calGrid .cell.today { background: #000 !important; color: #fff !important; outline: 2px solid #000 !important; outline-offset: 2px !important; } /* Images & decor */ .a11y-contrast img { opacity: 1 !important; filter: none !important; } .a11y-contrast * { text-shadow: none !important; background-image: none !important; } /* === Footer overrides (LIGHT HC) === */ .a11y-contrast .footer-area { background: #fff !important; color: #000 !important; background-image: none !important; } .a11y-contrast .footer-area .footer-top, .a11y-contrast .footer-area .copy-right-area { background: #fff !important; } .a11y-contrast .footer-area .copy-right-area, .a11y-contrast .footer-area .border-top { border-top: 2px solid #000 !important; } .a11y-contrast .footer-area a, .a11y-contrast .footer-area a:visited { color: #000 !important; text-decoration: underline !important; } .a11y-contrast .footer-area a:hover, .a11y-contrast .footer-area a:focus { color: #000 !important; text-decoration-thickness: 3px !important; } .a11y-contrast .footer-area .go-top { background: #000 !important; color: #fff !important; border: 2px solid #000 !important; box-shadow: none !important; } /* ============================ High-Contrast (Dark) Mode (optional) Scope: add .a11y-contrast-dark to or ============================ */ .a11y-contrast-dark { --hc-bg: #000000; --hc-text: #ffffff; --hc-muted: #e6e6e6; --hc-link: #ffffff; --hc-link-hover: #ffffff; --hc-border: #ffffff; --hc-focus: #ffffff; --hc-chip-bg: #000; --hc-chip-text: #fff; } .a11y-contrast-dark body { background: var(--hc-bg) !important; color: var(--hc-text) !important; text-shadow: none !important; } .a11y-contrast-dark a, .a11y-contrast-dark a:visited { color: var(--hc-link) !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 2px !important; background: transparent !important; } .a11y-contrast-dark :where(a, button, [role="button"], summary, input, select, textarea):focus-visible { outline: 3px solid var(--hc-focus) !important; outline-offset: 2px !important; box-shadow: none !important; } .a11y-contrast-dark .text-muted, .a11y-contrast-dark .color-medium, .a11y-contrast-dark .font-sm, .a11y-contrast-dark .small, .a11y-contrast-dark .breadcrumb, .a11y-contrast-dark .ratings-total, .a11y-contrast-dark .form-text, .a11y-contrast-dark .help-block, .a11y-contrast-dark .invalid-feedback { color: var(--hc-muted) !important; } .a11y-contrast-dark .card, .a11y-contrast-dark .panel, .a11y-contrast-dark .modal-content, .a11y-contrast-dark .dropdown-menu, .a11y-contrast-dark .list-group-item { background: #000 !important; color: var(--hc-text) !important; border: 2px solid var(--hc-border) !important; box-shadow: none !important; } .a11y-contrast-dark .btn, .a11y-contrast-dark [class*="btn-"] { border: 2px solid var(--hc-border) !important; box-shadow: none !important; } .a11y-contrast-dark .btn, .a11y-contrast-dark .btn-dark { background: #000 !important; color: #fff !important; } .a11y-contrast-dark .btn:hover, .a11y-contrast-dark .btn:focus { filter: brightness(1.25) !important; } .a11y-contrast-dark .btn-outline-*, .a11y-contrast-dark .btn-light { background: #000 !important; color: #fff !important; } .a11y-contrast-dark input, .a11y-contrast-dark select, .a11y-contrast-dark textarea, .a11y-contrast-dark .form-control { color: var(--hc-text) !important; background: #000 !important; border: 2px solid var(--hc-border) !important; box-shadow: none !important; } .a11y-contrast-dark input::placeholder, .a11y-contrast-dark textarea::placeholder { color: #cfcfcf !important; } .a11y-contrast-dark .input-group:focus-within { box-shadow: 0 0 0 3px var(--hc-focus) !important; border-radius: .75rem; } .a11y-contrast-dark .form-control:focus, .a11y-contrast-dark .pac-target-input:focus { outline: 0 !important; box-shadow: none !important; } .a11y-contrast-dark .nav-link, .a11y-contrast-dark .dropdown-item { color: var(--hc-text) !important; } .a11y-contrast-dark .nav-link.active, .a11y-contrast-dark .dropdown-item.active, .a11y-contrast-dark .active > .nav-link { color: #000 !important; background: #fff !important; border: 2px solid var(--hc-border) !important; } .a11y-contrast-dark .badge, .a11y-contrast-dark .tag, .a11y-contrast-dark .label, .a11y-contrast-dark .product-category { background: var(--hc-chip-bg) !important; color: var(--hc-chip-text) !important; border: 2px solid var(--hc-border) !important; } .a11y-contrast-dark table, .a11y-contrast-dark th, .a11y-contrast-dark td { border-color: var(--hc-border) !important; } .a11y-contrast-dark thead th { background: #fff !important; color: #000 !important; } .a11y-contrast-dark .breadcrumb .breadcrumb-item a { color: #fff !important; text-decoration: underline !important; } .a11y-contrast-dark .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--hc-text) !important; } .a11y-contrast-dark .flatpickr-day, .a11y-contrast-dark .ui-datepicker td span, .a11y-contrast-dark .ui-datepicker td a, .a11y-contrast-dark .datepicker td, .a11y-contrast-dark .datepicker td a, .a11y-contrast-dark #calGrid .cell { color: #fff !important; background: #000 !important; border-color: #fff !important; } .a11y-contrast-dark .flatpickr-day.selected, .a11y-contrast-dark .ui-datepicker .ui-state-active, .a11y-contrast-dark #calGrid .cell.selected, .a11y-contrast-dark #calGrid .cell.today { background: #fff !important; color: #000 !important; outline: 2px solid #fff !important; outline-offset: 2px !important; } .a11y-contrast-dark img { opacity: 1 !important; filter: none !important; } .a11y-contrast-dark * { text-shadow: none !important; background-image: none !important; } /* === Footer overrides (DARK HC) === */ .a11y-contrast-dark .footer-area { background: #000 !important; color: #fff !important; background-image: none !important; } .a11y-contrast-dark .footer-area .footer-top, .a11y-contrast-dark .footer-area .copy-right-area { background: #000 !important; } .a11y-contrast-dark .footer-area .copy-right-area, .a11y-contrast-dark .footer-area .border-top { border-top: 2px solid #fff !important; } .a11y-contrast-dark .footer-area a, .a11y-contrast-dark .footer-area a:visited { color: #fff !important; text-decoration: underline !important; } .a11y-contrast-dark .footer-area a:hover, .a11y-contrast-dark .footer-area a:focus { color: #fff !important; text-decoration-thickness: 3px !important; } .a11y-contrast-dark .footer-area .go-top { background: #fff !important; color: #000 !important; border: 2px solid #fff !important; box-shadow: none !important; } /* ============================ Default theme hardening ============================ */ html, body { color: #111; } /* base text */ .text-muted, .color-medium, .font-sm, .small, .breadcrumb, .ratings-total { color: #4b5563; } a:not(.btn):not([class*="btn-"]):not(.nav-link):not(.dropdown-item) { color: #0b3d0b; } a:not(.btn):not([class*="btn-"]):hover, a:not(.btn):not([class*="btn-"]):focus { color: #094609; text-decoration: underline; } .breadcrumb .breadcrumb-item a { color: #0b3d0b; } .breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: #6b7280; } .btn-outline-2, .btn.btn-outline-secondary, .btn.btn-light { color: #0b3d0b; border-color: #0b3d0b; background-color: #fff; } .btn-outline-2:hover, .btn.btn-outline-secondary:hover, .btn.btn-light:hover { color: #fff; background-color: #0b3d0b; border-color: #0b3d0b; } .footer-area a { color: #0b3d0b; } .footer-area a:hover, .footer-area a:focus { color: #094609; text-decoration: underline; } .tag, .product-category, .badge, .label, .nav-link.toggle { color: #0b3d0b; } #calGrid .cell { color: #111; } #calGrid .bg-available { background: #e9f7e9; color: #111; } #calGrid .bg-unavailable { background: #f5f5f5; color: #111; } #calGrid .cell.today { outline: 2px solid #0b3d0b; outline-offset: 2px; } .datepicker td, .datepicker td a, .flatpickr-day, .ui-datepicker td span, .ui-datepicker td a, .pignose-calendar .pignose-calendar-unit, .pignose-calendar .pignose-calendar-unit a, .pignose-calendar .pignose-calendar-unit span { color: #111; } label { color: #111; } ::placeholder { color: #6b7280; } .form-text, .help-block, .invalid-feedback { color: #374151; } /* ============================ Inputs & Search: single halo (no doubles) ============================ */ :where(a, button, [role="button"], summary, [tabindex]:not(input):not(select):not(textarea)):focus-visible { outline: 3px solid currentColor !important; outline-offset: 2px !important; } input[type="search"], input[type="text"], input[type="email"], input[type="tel"], select, textarea { box-sizing: border-box; line-height: 1.2; min-height: 2.5rem; border: 1px solid #ccc; padding: .5rem .75rem; background-color: #fff; transition: border-color .12s ease, box-shadow .12s ease; } input[type="search"]:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus, input[type="search"]:focus-visible, input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="tel"]:focus-visible, select:focus-visible, textarea:focus-visible { outline: 0 !important; box-shadow: none !important; border-color: #999; } /* input-group unified ring */ .input-group { position: relative; border-radius: .75rem; } .input-group .form-control, .input-group .input-group-text { border: 1px solid #ccc; border-radius: .75rem; background: #fff; box-shadow: none !important; } .input-group:focus-within { outline: 0 !important; box-shadow: 0 0 0 3px rgba(79,180,247,.35) !important; border-radius: .75rem; } .input-group:focus-within .form-control, .input-group:focus-within .input-group-text { border-color: #999; } /* Google Places */ .pac-target-input:focus, .pac-target-input:focus-visible { outline: 0 !important; box-shadow: none !important; } /* Search icon padding helper */ .search-group { position: relative; } .search-group .search-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .search-group input[type="search"] { padding-left: 2rem; } /* ============================ Toolbar Modes ============================ */ /* Dyslexia mode */ @font-face { font-family: 'Atkinson Hyperlegible'; src: url('/assets/fonts/Atkinson-Hyperlegible-Regular-102.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } html.a11y-dyslexia, body.a11y-dyslexia { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; letter-spacing: .01em; word-spacing: .02em; } .a11y-dyslexia :where(h1,h2,h3,h4,h5,h6,button,.btn,input,select,textarea,label) { font-family: inherit !important; } /* Links mode: square box highlight */ html.a11y-links a, body.a11y-links a, .a11y-links a { text-decoration: none !important; display: inline-block; padding: 0 .15em; border-radius: .15em; box-shadow: inset 0 0 0 2px currentColor !important; /* square box */ color: inherit !important; background: transparent !important; } html.a11y-links a:focus-visible, body.a11y-links a:focus-visible, .a11y-links a:focus-visible { outline: 3px dashed currentColor !important; outline-offset: 3px !important; } /* Ensure Links mode wins inside contrast themes */ .a11y-contrast.a11y-links a, .a11y-contrast-dark.a11y-links a { box-shadow: inset 0 0 0 2px currentColor !important; color: inherit !important; text-decoration: none !important; } /* ============================ Home Hero & Works slider overrides (for contrast modes) ============================ */ /* Light contrast: remove gradients, enforce black text/borders */ .a11y-contrast .works-area .card[class*="card-bg"], .a11y-contrast .works-area .swiper-slide .card { background: #fff !important; background-image: none !important; border: 2px solid #000 !important; box-shadow: none !important; } .a11y-contrast .color-white, .a11y-contrast .content-title .color-white, .a11y-contrast .works-area .card .color-white, .a11y-contrast .works-area .card .card-title, .a11y-contrast .works-area .card .card-text { color: #000 !important; } .a11y-contrast .color-light { color: #000 !important; } .a11y-contrast .works-area .card .card-icon, .a11y-contrast .works-area .card .card-icon i { color: #000 !important; } .a11y-contrast .works-area .card .line { background: #000 !important; } .a11y-contrast .swiper-pagination-bullet { background: #000 !important; opacity: 1 !important; } .a11y-contrast .swiper-pagination-bullet-active { outline: 2px solid #000 !important; outline-offset: 2px !important; } .a11y-contrast .btn.btn-gradient { background: #000 !important; background-image: none !important; color: #fff !important; border: 2px solid #000 !important; } /* Dark contrast: remove gradients, enforce white text/borders */ .a11y-contrast-dark .works-area .card[class*="card-bg"], .a11y-contrast-dark .works-area .swiper-slide .card { background: #000 !important; background-image: none !important; border: 2px solid #fff !important; box-shadow: none !important; } .a11y-contrast-dark .content-title .title, .a11y-contrast-dark .color-white, .a11y-contrast-dark .works-area .card .card-title, .a11y-contrast-dark .works-area .card .card-text { color: #fff !important; } .a11y-contrast-dark .color-light { color: #fff !important; } .a11y-contrast-dark .works-area .card .card-icon, .a11y-contrast-dark .works-area .card .card-icon i { color: #fff !important; } .a11y-contrast-dark .works-area .card .line { background: #fff !important; } .a11y-contrast-dark .swiper-pagination-bullet { background: #fff !important; opacity: 1 !important; } .a11y-contrast-dark .swiper-pagination-bullet-active { outline: 2px solid #fff !important; outline-offset: 2px !important; } .a11y-contrast-dark .btn.btn-gradient { background: #fff !important; background-image: none !important; color: #000 !important; border: 2px solid #fff !important; } /* ============================ Motion reduction ============================ */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* === Service Details title in page-title-area (contrast overrides) === */ /* Light High-Contrast → BLACK heading + crumbs */ html.a11y-contrast body .page-title-area .content h1, html.a11y-contrast body .page-title-area .content h2 { color: #000 !important; text-shadow: none !important; } html.a11y-contrast body .page-title-area .breadcrumb .breadcrumb-item, html.a11y-contrast body .page-title-area .breadcrumb .breadcrumb-item a, html.a11y-contrast body .page-title-area .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #000 !important; text-shadow: none !important; opacity: 1 !important; } /* Dark High-Contrast → WHITE heading + crumbs */ html.a11y-contrast-dark body .page-title-area .content h1, html.a11y-contrast-dark body .page-title-area .content h2 { color: #fff !important; text-shadow: none !important; } html.a11y-contrast-dark body .page-title-area .breadcrumb .breadcrumb-item, html.a11y-contrast-dark body .page-title-area .breadcrumb .breadcrumb-item a, html.a11y-contrast-dark body .page-title-area .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #fff !important; text-shadow: none !important; opacity: 1 !important; } /* Optional: if your theme paints a white overlay over the hero text, this removes any gradient/text blend that could wash out the text in HC */ html.a11y-contrast body .page-title-area *, html.a11y-contrast-dark body .page-title-area * { mix-blend-mode: normal !important; }