/* ========================================================================== WittyTrades.com — accessibility corrections Closes findings from ACR-149 (auditor: Venkatesh, 10 Oct 2026) Load AFTER the Mobirise theme stylesheets. ========================================================================== */ /* -------------------------------------------------------------------------- 2.4.1 Bypass Blocks (A) — skip link -------------------------------------------------------------------------- */ .wt-skip{ position:absolute; left:-9999px; top:0; z-index:100000; background:#0B3D6B; color:#fff; padding:12px 22px; font-weight:700; text-decoration:underline; border-radius:0 0 8px 0; } .wt-skip:focus{ left:0; } #main-content:focus{ outline:none; } /* -------------------------------------------------------------------------- 2.4.7 Focus Visible (AA) — the theme suppressed the focus ring site-wide -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .btn:focus-visible{ outline:3px solid #005FCC !important; outline-offset:2px !important; border-radius:3px; } /* older engines without :focus-visible */ a:focus, button:focus, input:focus, select:focus, textarea:focus{ outline:3px solid #005FCC; outline-offset:2px; } /* -------------------------------------------------------------------------- 1.4.1 Use of Color (A) — inline links must not rely on colour alone -------------------------------------------------------------------------- */ p a, li a, td a, .mbr-text a, .mbr-section-text a, .card-text a, dd a, .item-wrap a, address a{ text-decoration:underline !important; text-underline-offset:2px; } /* navigation, buttons and image links are identifiable by position/shape */ .navbar a, .nav-link, .btn, .navbar-caption, .iconfont-wrapper, a.btn, .wt-skip, .footer-link-row a{ text-decoration:none !important; } /* -------------------------------------------------------------------------- 1.4.3 Contrast (Minimum) (AA) The theme dims the footer list to 50% opacity, which halves the contrast of whatever colour is used — restoring opacity is the real fix. -------------------------------------------------------------------------- */ .list-wrapper .list .item-wrap, li.item-wrap{ opacity:1 !important; } /* greys below 4.5:1 on white -> #595959 (7.0:1), per the auditor's advice */ [class*="cid-"] .text-black, [class*="cid-"] a.text-black, [class*="cid-"] a.text-black:visited, [class*="cid-"] .mbr-contact-desc, [class*="cid-"] .display-7 small, .text-muted{ color:#595959 !important; } /* teal 3.32:1 -> #1F6B80 (5.5:1) as text and as a button ground */ [class*="cid-"] .text-primary, [class*="cid-"] a.text-primary, [class*="cid-"] .text-success, [class*="cid-"] a.text-success, [class*="cid-"] a.text-success > strong{ color:#1F6B80 !important; } /* The theme's reds were #ff4a52 / #ff0000 at ~3.3:1 and failed contrast. They were first darkened to a passing red; the client has since asked for no red at all, so they are dark grey here, and golden yellow where the ground is dark (handled at run time, where the real background can be measured). */ [class*="cid-"] .text-danger, [class*="cid-"] .cardcolor h4, [class*="cid-"] .cardcolor h4 strong, [class*="cid-"] .cardcolor p strong{ color:#333333 !important; } [class*="cid-"] .header-text .mbr-text strong{ color:#595959 !important; } /* -------------------------------------------------------------------------- 1.4.11 Non-text Contrast (AA) The WhatsApp green and Telegram blue buttons were below 3:1. #16883D gives white text 4.6:1; #1B4F9C gives white text 7.0:1. -------------------------------------------------------------------------- */ .btn-success, a.btn-success, .btn-success:active, .btn-success.active, [class*="cid-"] .btn-success{ background-color:#16883D !important; border-color:#0F6B2F !important; color:#ffffff !important; } .btn-info, a.btn-info, [class*="cid-"] .btn-info, .btn-primary, a.btn-primary, [class*="cid-"] .btn-primary{ background-color:#1B4F9C !important; border-color:#143B75 !important; color:#ffffff !important; } .btn-white-outline, a.btn-white-outline{ background-color:#16883D !important; border-color:#ffffff !important; color:#ffffff !important; } input[type=submit], button[type=submit], .btn-form{ background-color:#1B4F9C !important; border-color:#143B75 !important; color:#ffffff !important; } /* -------------------------------------------------------------------------- 2.5.8 Target Size (AA, WCAG 2.2) — advisory, kept comfortably above 24px -------------------------------------------------------------------------- */ .item-wrap a, .mbr-contact a, a[href^="tel:"], a[href^="mailto:"]{ display:inline-block; min-height:24px; padding-block:2px; } .navbar-toggler{ min-width:44px !important; min-height:44px !important; } /* -------------------------------------------------------------------------- 3.3.2 Labels or Instructions (A) / 3.3.3 Error Suggestion (AA) -------------------------------------------------------------------------- */ .wt-label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:4px; color:#2B2B2B; } .wt-hint{ display:block; font-size:.85rem; color:#595959; margin-top:3px; } .wt-error{ display:block; font-size:.88rem; color:#B3261E; font-weight:600; margin-top:4px; } .wt-field-invalid{ border:2px solid #B3261E !important; } /* -------------------------------------------------------------------------- 4.1.3 Status Messages (AA) -------------------------------------------------------------------------- */ .wt-status{ margin:10px 0; padding:11px 14px; border-radius:6px; font-weight:600; font-size:.95rem; } .wt-status.ok{ background:#E3F3E8; border:1px solid #9CCBAE; color:#14532D; } .wt-status.err{ background:#FBE7E5; border:1px solid #E3B4AE; color:#8A1D14; } .wt-status:empty{ display:none; } /* -------------------------------------------------------------------------- 2.4.5 Multiple Ways (AA) — footer link row shown on every page -------------------------------------------------------------------------- */ .wt-footer-nav{ background:#F4F6F8; border-top:1px solid #D9DEE3; padding:22px 16px; font-size:.93rem; } .wt-footer-nav .wt-fn-in{ max-width:1180px; margin-inline:auto; } .wt-footer-nav h2{ font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; color:#595959; margin:0 0 8px; font-weight:700; } .wt-footer-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; } .wt-footer-nav a{ color:#0B3D6B; text-decoration:underline; text-underline-offset:2px; display:inline-flex; align-items:center; min-height:28px; } .wt-footer-nav a:hover{ color:#07294A; } /* -------------------------------------------------------------------------- 2.3.3 — respect reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* -------------------------------------------------------------------------- 1.4.3 (AA) — Mobirise's form alert boxes ship a low-contrast palette. They stay hidden until the form is submitted, exactly as the theme intends; this only corrects the colours for when they do appear. -------------------------------------------------------------------------- */ .alert-success, [data-form-alert]{ background:#E3F3E8 !important; border:1px solid #9CCBAE !important; color:#14532D !important; } .alert-danger, [data-form-alert-danger]{ background:#FBE7E5 !important; border:1px solid #E3B4AE !important; color:#8A1D14 !important; } /* the off-screen live region that speaks the form's result (SC 4.1.3) */ .wt-sr-only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; } /* inline style="color:#8fb5c0" on content links beats a class selector */ a[style*="color"]{ color:#1F6B80 !important; } /* chat widget: give the third-party panel a readable launcher focus ring */ #df-btn-cont [role="button"]:focus-visible{ outline:3px solid #005FCC !important; outline-offset:2px !important; } /* The theme also dims .mbr-contact-desc to 50% opacity, which halves the contrast of the links inside it (SC 1.4.3). Restoring opacity is the fix. */ .mbr-contact-desc, [class*="cid-"] .mbr-contact-desc{ opacity:1 !important; } /* -------------------------------------------------------------------------- 1.4.3 (AA) — three remaining theme colours on light grounds. These sit over a background image, so axe reports them "incomplete" rather than failing; measured by hand against white they were 2.68:1, 3.30:1 and 3.31:1. #9e9e9e -> #595959 2.68:1 -> 7.00:1 section titles #878e99 -> #4F5663 3.30:1 -> 7.07:1 card body text #ff4a52 -> #333333 3.31:1 -> 12.6:1 update labels (no red, per client) -------------------------------------------------------------------------- */ .mbr-section-title, [class*="cid-"] .mbr-section-title{ color:#595959 !important; } .card-text, [class*="cid-"] .card-text{ color:#4F5663 !important; } /* ...but some cards sit on a dark navy ground, where dark text is worse */ .cid-ufp8by7vEG .card-text, .cid-ufp8by7vEG .card-title, .cid-ufp8by7vEG .card .mbr-text, .cid-ufp8by7vEG .card p{ color:#FFFFFF !important; } [class*="cid-"] .mbr-text.align-left.display-4, [class*="cid-"] p.mbr-text.display-4{ color:#333333 !important; } /* keep headings that are meant to be dark actually dark */ h1.mbr-section-title, h1[class*="mbr-section-title"]{ color:#1A1A1A !important; } /* -------------------------------------------------------------------------- 1.4.3 (AA) — the AiSensy chat widget ships its own low-contrast palette: #848484 on white (3.74:1) and white on #4dc247 (2.30:1). The widget is third-party but renders inside our DOM, so its presentation can be corrected here. Re-check after any AiSensy update. -------------------------------------------------------------------------- */ #df-btn-cont .df-window-msg-cont-brandname, #df-btn-cont .df-bottombar-branding{ color:#595959 !important; } /* the brand name/sub sit on the widget's dark green topbar, so they need light text, not dark — #FFFFFF on #0A5F54 = 8.6:1 */ #df-btn-cont .df-brand-sub, #df-btn-cont .df-brand-name{ color:#FFFFFF !important; } #df-btn-cont .df-bottombar-btn{ background-color:#15803D !important; color:#FFFFFF !important; } #df-btn-cont a{ color:#1F6B80 !important; } /* page title added where the template had no H1 (SC 1.3.1) */ .wt-page-title{ max-width:1180px; margin:18px auto 0; padding:0 24px; font-size:1.9rem; line-height:1.2; color:#1A1A1A; } /* -------------------------------------------------------------------------- 1.4.11 Non-text Contrast (AA) — the chat launcher is a white icon on the vendor's #4dc247 green (2.30:1). #15803D takes white to 5.4:1. -------------------------------------------------------------------------- */ #df-btn-cont .df-btn-text, #df-btn-cont .df-btn-text-icon-only, #df-btn-cont .df-bottombar-btn{ background-color:#15803D !important; color:#FFFFFF !important; } #df-btn-cont .df-btn-text svg, #df-btn-cont .df-btn-text-icon-only svg{ fill:#FFFFFF !important; } /* -------------------------------------------------------------------------- 1.4.3 (AA) — the Payment Options page puts cards on a navy ground, where the teal link colour drops to 2.75:1. Light text is required there. -------------------------------------------------------------------------- */ .cid-ufp8by7vEG .text-primary, .cid-ufp8by7vEG a.text-primary, .cid-ufp8by7vEG .text-success, .cid-ufp8by7vEG a, .cid-ufp8by7vEG .card-text, .cid-ufp8by7vEG .card-title, .cid-ufp8by7vEG .mbr-text{ color:#FFFFFF !important; } .cid-ufp8by7vEG a{ text-decoration:underline !important; } /* -------------------------------------------------------------------------- 2.5.8 Target Size (AA) — inline policy links measured 710x23. The back-to-top control sat against the chat launcher, leaving less than 24px of clear space between two targets. -------------------------------------------------------------------------- */ .mbr-contact-desc a, .mbr-contact-desc .text-primary, p a.text-primary, span a.text-primary{ display:inline-block; min-height:26px; padding-block:3px; } #scrollToTop, .scrollToTop{ bottom:96px !important; } /* -------------------------------------------------------------------------- The language switcher's choices are buttons now (they were href="javascript:void(0)" anchors, which report the wrong role). They must still look and sit exactly as they did, and each must be at least 24 x 24 CSS px (SC 2.5.8 Target Size (Minimum), AA). -------------------------------------------------------------------------- */ #witty-lang-menu button{ display:block; width:100%; text-align:left; padding:12px 15px; min-height:44px; background:transparent; border:0; border-bottom:1px solid #eee; color:#333; font-size:14px; font-family:inherit; cursor:pointer; } #witty-lang-menu button:last-child{ border-bottom:none; } #witty-lang-menu button:hover{ background:#f5f8ff; } #witty-lang-btn{ min-height:44px; background:#4C7A33 !important; } /* -------------------------------------------------------------------------- 1.4.3 (AA) — the step numbers on the KYC and plan pages are drawn at opacity .4, which renders #141414 as #a1a1a1 (2.58:1) whatever colour is declared. Restore the opacity and set a passing shade. -------------------------------------------------------------------------- */ .card-number, .mbr-section-title_1, .mbr-number{ opacity:1 !important; color:#4F5663 !important; } /* -------------------------------------------------------------------------- 2.5.8 Target Size (Minimum) (AA) — a list whose items are a single link (the article's reference list) gives each link a 13px-tall hit area. Padding brings every one to at least 24 CSS px without moving the text. -------------------------------------------------------------------------- */ li > a:only-child{ display:inline-block; min-height:24px; padding-top:5px; padding-bottom:5px; } /* -------------------------------------------------------------------------- 1.2.2 Captions (A) — the YouTube embed is played through Able Player so the captions can come from this site rather than from the YouTube account. The player has to sit in the space the old embed occupied. -------------------------------------------------------------------------- */ .wt-video{ width:100%; margin:0 auto; } .wt-video .able, .wt-video .able-wrapper{ width:100% !important; max-width:100% !important; } .wt-video .able-video, .wt-video .able-vidcap-container, .wt-video iframe{ width:100% !important; } .wt-video .able-media-container{ width:100% !important; } /* captions readable: the player's default is grey on part-transparent black */ .able-captions, .able-captions-wrapper{ background-color:rgba(0,0,0,0.85) !important; color:#FFFFFF !important; font-size:1rem !important; line-height:1.4 !important; } /* the interactive transcript below the video */ .able-transcript{ max-height:320px; border:1px solid #C9D2E3; border-radius:8px; background:#FFFFFF; color:#1A1A1A; padding:10px 12px; margin-top:10px; } .able-transcript .able-highlight{ background:#FFF3C4 !important; color:#1A1A1A !important; } .able-controller button:focus-visible{ outline:3px solid #005FCC !important; outline-offset:2px; } /* -------------------------------------------------------------------------- 1.2.2 — where a video is not captioned, it is either replaced by a still that opens YouTube (no synchronised media on the page), or kept with a text description beside it. -------------------------------------------------------------------------- */ .wt-video-card{ width:100%; } .wt-video-link{ display:block; text-decoration:none; color:#1B4F9C; border:1px solid #C9D2E3; border-radius:10px; overflow:hidden; background:#FFFFFF; } .wt-video-link img{ display:block; width:100%; height:auto; } .wt-video-cta{ display:block; padding:12px 14px; font-weight:700; line-height:1.4; text-decoration:underline; min-height:44px; } .wt-video-note{ font-weight:400; text-decoration:none; color:#4F5663; } .wt-video-link:hover .wt-video-cta{ background:#F2F6FD; } .wt-video-link:focus-visible{ outline:3px solid #005FCC; outline-offset:2px; } .wt-video-alt{ position:relative; background:#F6F8FC; border:1px solid #C9D2E3; border-radius:10px; padding:14px 16px 26px; margin:12px 0 0; color:#26324C; max-height:168px; overflow-y:auto; -webkit-overflow-scrolling:touch; /* a visible scroll line, so it reads as scrollable rather than cut off */ scrollbar-width:thin; scrollbar-color:#8A97B1 #E4EAF5; } .wt-video-alt::-webkit-scrollbar{ width:10px; } .wt-video-alt::-webkit-scrollbar-track{ background:#E4EAF5; border-radius:8px; } .wt-video-alt::-webkit-scrollbar-thumb{ background:#8A97B1; border-radius:8px; border:2px solid #E4EAF5; } .wt-video-alt::-webkit-scrollbar-thumb:hover{ background:#5E6C88; } /* a hint at the foot that fades out once the reader reaches the end */ /* The hint sits over the last line of the note, so it needs enough solid colour under it to fade that line out rather than collide with it. */ .wt-video-scroll-hint{ position:sticky; bottom:-26px; margin:6px -16px -26px; padding:20px 16px 20px; font-size:.78rem; font-weight:600; color:#3F4A63; text-align:right; background:linear-gradient(to top, #F6F8FC 0, #F6F8FC 60%, rgba(246,248,252,.94) 78%, rgba(246,248,252,0) 100%); pointer-events:none; transition:opacity .2s; } .wt-video-alt.wt-at-end .wt-video-scroll-hint{ opacity:0; } .wt-video-alt:focus-visible{ outline:3px solid #005FCC; outline-offset:2px; } .wt-video-alt p{ margin:0 0 8px; line-height:1.55; } .wt-video-alt p:last-child{ margin-bottom:0; } .wt-alt-title{ font-size:1.05rem; margin:0 0 8px; color:#1A2B4C; font-weight:800; } .wt-video-alt a{ color:#1B4F9C; } /* -------------------------------------------------------------------------- The theme's pop-ups are laid out inline at the foot of the page instead of over it: Mobirise sets .popup-builder .modal{position:relative; display:block; z-index:1}, which overrides Bootstrap's fixed positioning. Bootstrap still adds the dim backdrop, so a visitor saw the screen dim with no dialog on it and no way to close it. The open/closed state lives on the
wrapper, which Bootstrap gives .show while the dialog is open - so every rule that lifts the dialog out of the page is scoped to .show. Unscoped, it would also lift the pop-up sections that sit in the page unopened, covering the page with an invisible panel. -------------------------------------------------------------------------- */ .popup-builder.show .modal, .popup-builder.show .modal.mbr-popup{ position:fixed !important; top:0; right:0; bottom:0; left:0; z-index:1060 !important; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 12px; } .modal-backdrop{ z-index:1050 !important; } .popup-builder.show .modal-dialog{ margin:0 auto !important; max-width:min(620px, 94vw); display:flex; align-items:center; min-height:calc(100% - 32px); } .popup-builder.show .modal-content{ width:100%; border-radius:12px; position:relative; } .popup-builder.show .modal-header{ position:static; } .popup-builder.show .modal img{ max-width:100%; height:auto; } /* the close control: large enough to hit, visible against the panel. Not scoped to .show - a 44px target is right in either state. */ .popup-builder .close, .modal.mbr-popup .close{ position:absolute; top:8px; right:10px; z-index:2; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; opacity:1; background:#FFFFFF; border:1px solid #C9D2E3; border-radius:50%; color:#1A1A1A; font-size:20px; line-height:1; cursor:pointer; } .popup-builder .close:hover, .modal.mbr-popup .close:hover{ background:#F2F6FD; } .popup-builder .close:focus-visible, .modal.mbr-popup .close:focus-visible{ outline:3px solid #005FCC; outline-offset:2px; } .popup-builder .close svg, .modal.mbr-popup .close svg{ width:18px; height:18px; fill:currentColor; } /* ========================================================================== SITE-WIDE PRESENTATION LAYER - body.wt-v2 Arihant Intellect, 14 October 2026 The header, the footer and the disclaimer block are the same furniture on every page, so their corrections live here rather than in the home page's own stylesheet. Mobirise gives each page its own section ids, so these are keyed to the classes instead: .menu1 (71 pages), .footer0d1 (11 pages), .list3 (14 pages). TO SWITCH IT OFF: remove the wt-v2 class from . Nothing else changes. ========================================================================== */ body.wt-v2{ --wt-sec-y: clamp(34px, 5vw, 68px); /* vertical rhythm between sections */ --wt-gap: clamp(14px, 2.2vw, 26px); /* gap inside grids */ --wt-r: 14px; /* corner radius */ --wt-navy: #0A1C44; --wt-line: #D5DCEC; --wt-ink: #333333; --wt-link: #1B4F9C; --wt-gold: #F6C851; --wt-shadow: 0 1px 2px rgba(10,28,68,.06), 0 6px 18px rgba(10,28,68,.07); --wt-shadow-lift: 0 2px 4px rgba(10,28,68,.08), 0 14px 32px rgba(10,28,68,.13); } /* -------------------------------------------------------------------------- 13. The header. The menu links carry 4px of padding either side, so five items sit almost touching in the middle of the bar, and the social icons to the right sit 2px lower than the menu - which is the misalignment you see across the top of the page. Nothing is moved or renamed; the items are simply given room and put on the same centre line. -------------------------------------------------------------------------- */ /* The menu is set in IBM Plex Sans at 13.76px with a line-height of 13.76px - a different typeface from the logo and the rest of the page, at a size with no leading. And the "Subscription Details" item is a dropdown toggle, which renders 5px lower than its four neighbours, so the row of links does not sit on one line. Same links, same wording: the page's own typeface, a readable size, and every item on one centre line. */ body.wt-v2 .menu1 .navbar-nav .nav-link{ font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: .94rem; line-height: 1.4; } @media (min-width: 992px){ body.wt-v2 .menu1 .navbar-nav{ align-items: center; } body.wt-v2 .menu1 .navbar-nav > .nav-item{ display: flex; align-items: center; } body.wt-v2 .menu1 .navbar-nav .nav-link{ display: flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; padding-left: 11px; padding-right: 11px; } /* the icon row carries 4.8px of padding on top and none underneath, which is what drops the social icons below the line of the menu links */ body.wt-v2 .menu1 .icons-menu{ display: flex; align-items: center; gap: 2px; padding-top: 0; padding-bottom: 0; } /* the icons were 48x31 and 2px low - centre them and make them a real target */ body.wt-v2 .menu1 .icons-menu a{ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; border-radius: 8px; } } /* -------------------------------------------------------------------------- 10. The footer. Both of its columns are col-lg-3, so on a 1140px container the whole footer crams into 592px and leaves the right half empty: the sixteen policy links stack into one tall tower, half of them wrapping onto a second line, and the contact block runs down beside it with uneven gaps. Same markup, same links, same order - laid out across the width it already has: two tidy link columns and the contact block beside them. -------------------------------------------------------------------------- */ body.wt-v2 .footer0d1 .item-wrap{ margin-bottom: 8px; line-height: 1.5; } body.wt-v2 .footer0d1 .item-wrap:empty{ display: none; } body.wt-v2 .footer0d1 .list{ margin-bottom: 0; } body.wt-v2 .footer0d1 .contacts-wrapper{ margin-bottom: 18px; } /* Three links in the contact block have no text at all. The remediation has already taken them out of the tab order and hidden them from a screen reader; they were still holding open about 80px of blank space, which is the gap between the email block and "Market News". Collapse them. */ body.wt-v2 .footer0d1 a[aria-hidden="true"][tabindex="-1"]{ display: none !important; } body.wt-v2 .footer0d1 .mbr-contact-desc{ margin-bottom: 6px; line-height: 1.55; } /* The sixteen links sit in two