/* ========================================================================== AjonTec — frontend fixes -------------------------------------------------------------------------- Loaded after style.css, meanmenu.css and ats-enhance.css, so it wins on equal specificity. Two problems are fixed here. 1. MOBILE MENU OPENED DOWNWARD The theme already has a proper right-hand drawer (.sidebar-area), and the hamburger (#openButton) slides it in correctly. MeanMenu is injected into .mobile-menu INSIDE that drawer -- and MeanMenu hides its own list and adds a SECOND hamburger to reveal it. So the real behaviour was: tap hamburger -> drawer slides in from the right, but appears almost empty -> tap a second hamburger inside -> the links slide DOWN from the top of the drawer. That downward slide is what looked like "the menu opens from the top". Fix: drop MeanMenu's redundant reveal button and keep the first-level list permanently visible inside the drawer. Sub-menus keep their expand/collapse, which is still useful. 2. DARK MODE LEFT WHITE PATCHES Dark mode is driven by [data-theme=dark_mode] on , which only re-points CSS variables. ats-enhance.css sets `background:#fff !important` on seven blocks, so in dark mode those stayed bright white against a dark page. Those seven are re-pointed at variables below. Nothing here changes layout geometry outside the mobile drawer. ========================================================================== */ /* ========================================================================== 1. MOBILE MENU — inside the drawer, no second hamburger ========================================================================== */ @media (max-width: 991px) { /* MeanMenu's own reveal button is redundant: the drawer has #openButton to open it and #closeButton to close it. A second hamburger inside an already-open panel just reads as broken. */ .sidebar-area .mean-container a.meanmenu-reveal { display: none !important; } /* MeanMenu calls .hide() on the list, which writes inline display:none. Only !important can beat an inline style. Scoped to the first level so nested sub-menus still open and close on tap. */ .sidebar-area .mean-container .mean-nav > ul { display: block !important; } /* The bar is a wrapper here, not a visible toolbar. */ .sidebar-area .mean-container .mean-bar { background: transparent !important; padding: 0 !important; min-height: 0 !important; float: none !important; z-index: auto !important; } .sidebar-area .mean-container .mean-nav { float: none !important; width: 100% !important; margin: 0 !important; background: transparent !important; } /* Readable list inside a dark drawer. */ .sidebar-area .mean-container .mean-nav ul li { float: none !important; width: 100% !important; border-top: 1px solid rgba(255, 255, 255, .10); } .sidebar-area .mean-container .mean-nav ul li a { display: block; width: 100% !important; padding: 13px 4px !important; color: #fff !important; font-size: 15px; font-weight: 500; border-top: 0 !important; text-transform: none; } .sidebar-area .mean-container .mean-nav ul li a:hover, .sidebar-area .mean-container .mean-nav ul li a:focus-visible { color: var(--primary-color, #1e3a8a) !important; } /* Sub-menu items, one step in so the hierarchy is visible. */ .sidebar-area .mean-container .mean-nav ul li li a { padding-left: 20px !important; font-size: 14px; opacity: .85; } /* The +/- control for sub-menus. */ .sidebar-area .mean-container .mean-nav ul li a.mean-expand { width: 42px !important; height: 44px !important; padding: 0 !important; line-height: 44px !important; text-align: center; border: 0 !important; background: rgba(255, 255, 255, .06) !important; border-radius: 6px; top: 0; } .sidebar-area .mean-container .mean-nav ul li a.mean-expand:hover { background: rgba(255, 255, 255, .14) !important; } /* The drawer scrolls on short screens instead of clipping the last links. */ .sidebar-area { overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding-bottom: 40px; } /* Tapping the dimmed backdrop should feel like it will close the drawer. (#closeButton still does the actual closing.) */ .sidebar-area .sidebar__overlay { cursor: pointer; } /* Keep the close button clear of the menu. */ .sidebar-area button#closeButton { z-index: 5; } } /* ========================================================================== 2. DARK MODE — remove the white patches ========================================================================== */ [data-theme=dark_mode] { /* Surfaces used by the overrides below. Kept close to the theme's own --main-bg / --sub-bg so panels sit on the page rather than float. */ --ajt-surface: #1c1a33; --ajt-surface-soft: #16142c; --ajt-line: rgba(255, 255, 255, .10); --ajt-text: rgba(255, 255, 255, .88); --ajt-text-dim: rgba(255, 255, 255, .62); } /* The seven blocks ats-enhance.css pins to #fff. */ [data-theme=dark_mode] .pricing__item, [data-theme=dark_mode] .about__right-item, [data-theme=dark_mode] .process__item, [data-theme=dark_mode] .testimonial__item, [data-theme=dark_mode] .talk-us__item { background: var(--ajt-surface) !important; border-color: var(--ajt-line) !important; color: var(--ajt-text) !important; } [data-theme=dark_mode] .about-area { background: var(--ajt-surface-soft) !important; } [data-theme=dark_mode] .pricing-area { background: var(--ajt-surface-soft) !important; } [data-theme=dark_mode] .footer-title { color: var(--ajt-text) !important; } /* Text inside those panels, which inherited a dark ink colour from :root. */ [data-theme=dark_mode] .pricing__item h2, [data-theme=dark_mode] .pricing__item h3, [data-theme=dark_mode] .pricing__item h4, [data-theme=dark_mode] .pricing__item li, [data-theme=dark_mode] .about__right-item h3, [data-theme=dark_mode] .about__right-item h4, [data-theme=dark_mode] .process__item h3, [data-theme=dark_mode] .process__item h4, [data-theme=dark_mode] .testimonial__item h4, [data-theme=dark_mode] .talk-us__item h4 { color: var(--ajt-text) !important; } [data-theme=dark_mode] .pricing__item p, [data-theme=dark_mode] .about__right-item p, [data-theme=dark_mode] .process__item p, [data-theme=dark_mode] .testimonial__item p, [data-theme=dark_mode] .talk-us__item p { color: var(--ajt-text-dim) !important; } /* Form controls: the browser default is a white field with dark text, which is jarring beside dark panels and looks like an unstyled element. */ [data-theme=dark_mode] input[type=text], [data-theme=dark_mode] input[type=email], [data-theme=dark_mode] input[type=tel], [data-theme=dark_mode] input[type=number], [data-theme=dark_mode] input[type=password], [data-theme=dark_mode] input[type=search], [data-theme=dark_mode] textarea, [data-theme=dark_mode] select { background-color: var(--ajt-surface) !important; border-color: var(--ajt-line) !important; color: var(--ajt-text) !important; } [data-theme=dark_mode] input::placeholder, [data-theme=dark_mode] textarea::placeholder { color: rgba(255, 255, 255, .42) !important; } /* .light-area is the theme's opt-out: blocks that should stay light even in dark mode. Its inputs must stay light too, or they invert twice. */ [data-theme=dark_mode] .light-area input, [data-theme=dark_mode] .light-area textarea, [data-theme=dark_mode] .light-area select { background-color: #fff !important; border-color: #e3e8f0 !important; color: #101117 !important; } /* Tables read as a bright slab in dark mode otherwise. */ [data-theme=dark_mode] table:not(.light-area table) { color: var(--ajt-text); } [data-theme=dark_mode] .table > :not(caption) > * > * { background-color: transparent !important; color: var(--ajt-text) !important; border-color: var(--ajt-line) !important; } /* Cards and modals from Bootstrap, which default to white. */ [data-theme=dark_mode] .card:not(.light-area .card), [data-theme=dark_mode] .modal-content:not(.light-area .modal-content) { background-color: var(--ajt-surface) !important; border-color: var(--ajt-line) !important; color: var(--ajt-text) !important; } /* Horizontal rules and borders that were tuned for a light page. */ [data-theme=dark_mode] hr { border-color: var(--ajt-line) !important; opacity: 1; } /* Selection highlight, so selected text stays readable. */ [data-theme=dark_mode] ::selection { background: rgba(120, 150, 255, .32); color: #fff; } /* ========================================================================== 3. USER PANEL MOBILE MENU — slide in from the left, not down from the top -------------------------------------------------------------------------- The user panel is a different layout from the public site. Its menu is a Bootstrap collapse: