/* ========================================================================== Accessibility remediation stylesheet — Novel Securities Added to fix WCAG 2.1 AA issues from the BrowserStack audit (Jul 2026). Loaded LAST in so these rules win the cascade. Palette kept on-brand: navy #040d7a, accessible red #c20000, amber #ffc107. ========================================================================== */ /* --- 2.4.1 Bypass Blocks: skip-to-main-content link --------------------- */ .skip-link{ position:absolute; left:8px; top:-60px; z-index:10001; background:#040d7a; color:#ffffff; padding:10px 18px; font-size:16px; font-weight:600; text-decoration:none; border-radius:0 0 6px 6px; transition:top .2s ease; } .skip-link:focus{ top:0; outline:3px solid #ffc107; outline-offset:2px; } /* --- 2.4.7 Focus Visible: a clear keyboard focus indicator everywhere --- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .nav-link:focus-visible, .default-btn:focus-visible{ outline:3px solid #ffc107 !important; outline-offset:2px !important; } /* Fallback for engines without :focus-visible */ a:focus, button:focus, input:focus, select:focus, textarea:focus{ outline:2px solid #ffc107; } /* --- 1.4.3 Contrast (text): brand red #ff0707 = 3.97:1 on white (fails). Darken to #c20000 = 6.4:1 with white text. --------------------------- */ .default-btn{ background-color:#c20000 !important; border-color:#c20000 !important; color:#ffffff !important; } .default-btn:hover, .default-btn:focus{ background-color:#a30000 !important; border-color:#a30000 !important; color:#ffffff !important; } /* Keep the Smartodr call-to-action green, but a WCAG-safe green (5.1:1). */ .register a[style*="green"]{ background-color:#008000 !important; border-color:#008000 !important; color:#ffffff !important; } /* Red eyebrow headings (#ff0707 on white) -> accessible red. */ .top-title{ color:#c20000 !important; } /* --- 1.4.3 Contrast: active/hover nav link was red on navy (3.9:1). Amber on navy (9.6:1) for TOP-LEVEL links only. --------------------- */ .main-nav nav .navbar-nav > .nav-item > a.active, .main-nav nav .navbar-nav > .nav-item > a:hover, .main-nav nav .navbar-nav > .nav-item > a:focus{ color:#ffc107 !important; } /* Dropdown panels are WHITE — amber/red fail there. Dark text, accessible red for hover/active (6.4:1 on white). */ .main-nav nav .navbar-nav .nav-item .dropdown-menu li a, .navbar-area .dropdown-menu a{ color:#212529 !important; } .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:focus, .main-nav nav .navbar-nav .nav-item .dropdown-menu li a.active, .navbar-area .dropdown-menu a:hover, .navbar-area .dropdown-menu a:focus, .navbar-area .dropdown-menu a.active{ color:#c20000 !important; } /* --- 1.4.3 / 2.3.3: entrance animations (WOW.js fadeIn*, sticky fadeInDown) rendered text at partial opacity — scanners capture those frames and users with vestibular disorders are harmed by large entrance motion. Disable them entirely; content renders in its final state. ----------- */ .wow, .animated, .fadeIn, .fadeInLeft, .fadeInRight, .fadeInUp, .fadeInDown, [data-wow-delay], [data-wow-duration]{ -webkit-animation:none !important; animation:none !important; visibility:visible !important; opacity:1 !important; -webkit-transform:none !important; transform:none !important; } .navbar-area.is-sticky{ -webkit-animation:none !important; animation:none !important; opacity:1 !important; } /* --- 1.4.3: "Our Novel" eyebrow on dark image bands was #ff0707 (~2.4:1). Amber on the dark overlay = 7.9:1. --------------------------------- */ .section-title.white-title span{ color:#ffc107 !important; } /* --- 1.4.3: remaining theme text in brand red #ff0707 (3.97:1 on white). Covers the feedback carousel byline ("Trader") incl. Owl clones, and sibling templates that use the same token. -------------------------- */ .feedback-item span, .feedback-area .feedback-item span, .feedback-area.feedback-area-three .feedback-item span, .feedback-area.feedback-area-three.feedback-area-style .feedback-item span, .single-course .course-content .tag, .single-news .news-content .tag, .news-listing-content .tag, .single-blog-content .blog-top-content .research, .footer-bottom-area .copyright-wrap p a{ color:#c20000 !important; } /* --- 1.4.3: index hero paragraph — darker grey for margin over the light banner artwork (9.6:1 on white). ----------------------------------- */ .banner-content p{ color:#3b3b3b !important; } /* --- 1.4.11 Non-text: form field borders were #ececed on near-white (≈1:1). #767676 gives ≥3:1 against white and #f5f6fa. ----------------------- */ .form-control{ border-color:#767676 !important; } /* Carousel dots: light grey on white failed 3:1 */ .owl-theme .owl-dots .owl-dot span{ background:#6b6b6b !important; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{ background:#c20000 !important; } /* --- Visible labels for the home "Request A Call" form ------------------- */ .courses-form .a11y-label{ display:block; color:#ffffff; font-size:14px; font-weight:500; margin:0 0 6px; text-align:left; } /* --- 1.4.3 Contrast: form fields rendered red text (#ff0707) -> dark text - */ .form-control{ color:#212529 !important; } .form-control::-webkit-input-placeholder{ color:#595c5c !important; opacity:1; } .form-control::placeholder{ color:#595c5c !important; opacity:1; } /* --- 1.4.11 Non-text contrast: back-to-top control (grey arrow on red 1.5:1) */ .go-top{ background-color:#c20000 !important; } .go-top i, .go-top{ color:#ffffff !important; } button.go-top{ border:none; padding:0; } /* --- 1.4.3 Contrast: footer highlight links #5e9b00 on navy (~4.5:1 borderline) -> lighter green (8.3:1). --------------------------------- */ footer a[style*="5e9b00"], .footer-top-area a[style*="5e9b00"]{ color:#9acd32 !important; } /* --- 2.1.1 Keyboard: desktop dropdowns were hover-only. Open on focus too - */ .main-nav nav .navbar-nav .nav-item:focus-within > .dropdown-menu{ opacity:1 !important; visibility:visible !important; top:100% !important; } /* --- 1.4.3 Contrast: white hero-title text sits over background images. The theme's own ::before (light #f5f6fa at opacity .8) was blending with our navy — force full-strength navy scrim + solid fallback so the title band is deterministic at every frame. ---------------------- */ .page-title-area{ position:relative; background-color:#040d7a; } .page-title-area::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(4,13,122,0.72) !important; background-color:rgba(4,13,122,0.72) !important; opacity:1 !important; z-index:0; } .page-title-area .container{ position:relative; z-index:1; } .page-title-content h1, .page-title-content h2, .page-title-content li, .page-title-content a{ color:#ffffff !important; } /* keep the page-title heading visually identical after promoting h2 -> h1 */ .page-title-content h1{ margin-bottom:15px; font-size:30px; font-weight:700; line-height:1.2; } /* --- 1.4.3 Contrast: active download tab was red (#ff0707) on #f5f6fa (3.67:1) */ .single-course-tab .tabs li.current a, .tab ul.tabs li.current a{ color:#c20000 !important; } .single-course-tab .tabs li.current a::before{ background-color:#c20000 !important; } /* --- 1.4.3 Contrast: parallax band — the theme's own overlay (#111 at .8) is correct; just add a solid dark fallback so white text never sits on unloaded/light pixels, and keep content above the overlay. ------- */ .tutor-area{ position:relative; background-color:#111111 !important; } .tutor-area .container{ position:relative; z-index:1; } /* --- 2.2.2 Pause, Stop, Hide: accessible replacement for -------- */ .a11y-notices{ padding:6px 0; } .a11y-ticker{ overflow:hidden; white-space:nowrap; position:relative; width:100%; } .a11y-ticker__track{ display:inline-block; white-space:nowrap; padding-left:100%; will-change:transform; animation:a11y-ticker-scroll 38s linear infinite; } .a11y-ticker:hover .a11y-ticker__track, .a11y-ticker:focus-within .a11y-ticker__track, .a11y-notices.is-paused .a11y-ticker__track{ animation-play-state:paused; } @keyframes a11y-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } } /* Respect users who ask for reduced motion: no scrolling, wrap text. */ @media (prefers-reduced-motion: reduce){ .a11y-ticker{ white-space:normal; overflow:visible; } .a11y-ticker__track{ animation:none; padding-left:0; white-space:normal; display:block; } } .a11y-notices__pause{ display:inline-flex; align-items:center; gap:6px; margin:0 0 6px 0; padding:6px 14px; font-size:14px; font-weight:600; color:#ffffff; background:#040d7a; border:1px solid #040d7a; border-radius:4px; cursor:pointer; } .a11y-notices__pause:hover{ background:#03095a; } /* --- Accessibility toolbar widget: make it usable & labelled ------------- */ .access-toggle{ border:none; font-size:20px; line-height:1; } .access-toggle:focus-visible, .access-toolbar button:focus-visible, .theme-btn:focus-visible{ outline:3px solid #ffc107 !important; outline-offset:2px !important; } .theme-btn{ position:relative; } /* --- Visually-hidden labels (kept in the accessibility tree) ------------- */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* --- Notice ticker links: readable blue on white (7:1) ------------------ */ .a11y-ticker a{ color:#0a58ca !important; text-decoration:underline; } /* --- Data-table headers pulled from Word paste: keep them legible -------- */ th[scope]{ text-align:left; } /* --- 1.4.3 Contrast: footer "Compliance Officer" h6 was red on navy (3.9:1) */ .footer-widget h6{ color:#ff8a8a !important; /* light red on navy = 6.9:1 */ } /* --- 1.4.3 Contrast: red section-title eyebrow (#ff0707) on light panels -- Leave white-title variants (they sit on dark bands) untouched. ------- */ .section-title:not(.white-title) span{ color:#c20000 !important; }