/* ========================================================================== Academy custom overrides — loaded last, after the DreamLMS theme CSS. Do not edit assets/css/style.css (theme core) directly; put overrides here. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); :root { --hmh-bg: #f1f5f8; --hmh-border: #d1d5d8; --hmh-text-dark: #1d1d1d; --hmh-text-light: #909090; --hmh-accent: #f7542b; --hmh-accent-hover: #cc3b16; --hmh-dark: #070708; --hmh-dark-muted: #96999f; --hmh-dark-divider: #2a2b2c; } /* ========================================================================== Page preloader — shown the instant starts rendering, hidden once the page (images included) finishes loading. Present on every shell (inc/header.php, inc/admin-header.php, login.php). ========================================================================== */ .hmh-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background-color: #fff; transition: opacity 0.3s ease, visibility 0.3s ease; } .hmh-preloader.hmh-preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .hmh-preloader-spinner { width: 46px; height: 46px; border: 4px solid var(--hmh-border); border-top-color: var(--hmh-accent); border-radius: 50%; animation: hmh-preloader-spin 0.8s linear infinite; } @keyframes hmh-preloader-spin { to { transform: rotate(360deg); } } /* Global typography — Inter, matching the DreamLMS template (assets/css/style.css) and the admin panel, rather than the main WordPress site's Lato. */ body, input, textarea, select, button { font-family: "Inter", sans-serif; } /* The theme's own .settings-widget (dashboard/profile cards) only defines a flat 1px border, no elevation — but every other card-like component in this theme (stat widgets, course cards, etc.) uses a soft diffuse shadow in this same style, so this matches that established look rather than inventing a new one. */ .settings-widget { box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06); } /* ========================================================================== Brand accent — the DreamLMS theme default (#FF875A) is close but not an exact match to the main site's accent, so pin it site-wide (buttons, links, focus states) rather than just on individual pages. ========================================================================== */ .btn-primary { background-color: var(--hmh-accent); border-color: var(--hmh-accent); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .open > .dropdown-toggle.btn-primary { background-color: var(--hmh-accent-hover) !important; border-color: var(--hmh-accent-hover) !important; } a { color: var(--hmh-accent); } a:hover { color: var(--hmh-accent-hover); } /* ========================================================================== Site header (inc/header.php) — rebuilt to visually match the main site's navbar (dark bar, centered logo, same menu structure) without pulling in the main site's Elementor/trx_addons page-builder markup. ========================================================================== */ .hmh-header { background-color: var(--hmh-dark); font-family: "Inter", sans-serif; } .hmh-header .navbar { padding: 18px 0; } .hmh-header .navbar-brand img { max-height: 56px; width: auto; } .hmh-header .hmh-nav { gap: 6px; } .hmh-header .hmh-nav .nav-link { color: #fff; font-weight: 600; font-size: 17px; padding: 10px 14px; transition: color 0.2s ease; } .hmh-header .hmh-nav .nav-link:hover, .hmh-header .hmh-nav .nav-link.active { color: var(--hmh-accent); } .hmh-header .dropdown-menu { background-color: #101113; border: 1px solid var(--hmh-dark-divider); border-radius: 6px; padding: 6px 0; margin-top: 0; } /* Desktop: open on hover, no gap between the trigger and the menu so a diagonal mouse move down to an item never leaves the hoverable area — that gap is what causes a dropdown to vanish mid-move. Applies to every dropdown in the header (nav items like "About", and the user-profile menu) via the shared Bootstrap .dropdown wrapper class, not just .nav-item ones. Bootstrap's click-based JS toggle still runs alongside this (harmless — both just end up agreeing the menu should show), so keyboard/touch users who tap instead of hover still get a working menu. */ @media (min-width: 992px) { .hmh-header .dropdown { padding-bottom: 14px; margin-bottom: -14px; } .hmh-header .dropdown:hover > .dropdown-menu { display: block; } } .hmh-header .dropdown-item { color: #fff; font-size: 14px; padding: 8px 18px; } .hmh-header .dropdown-item:hover, .hmh-header .dropdown-item:focus { background-color: transparent; color: var(--hmh-accent); } .hmh-header .hmh-actions { gap: 18px; } .hmh-header .hmh-login-link { color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .hmh-header .hmh-login-link:hover { color: var(--hmh-accent); } .hmh-header .hmh-user-menu .dropdown-toggle::after { margin-left: 8px; } .hmh-header .hmh-user-menu .btn { color: #fff; font-weight: 600; font-size: 14px; } .hmh-header .navbar-toggler { border-color: rgba(255, 255, 255, 0.35); } .hmh-header .navbar-toggler-icon { filter: invert(1); } .hmh-pending-banner { background-color: #fff4e5; border-bottom: 1px solid #ffe1b3; color: #8a5a00; font-size: 14px; padding: 10px 0; } .hmh-pending-banner a { color: #8a5a00; font-weight: 700; text-decoration: underline; } /* ========================================================================== Site footer (inc/footer.php) ========================================================================== */ .hmh-footer { background-color: var(--hmh-dark); color: var(--hmh-dark-muted); font-family: "Inter", sans-serif; padding-top: 50px; } .hmh-footer .hmh-footer-brand img { max-height: 60px; width: auto; } .hmh-footer .hmh-footer-tagline { color: #fff; font-size: 28px; font-weight: 600; line-height: 1.3; margin: 0; } .hmh-footer h6.hmh-footer-heading { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 16px; } .hmh-footer .hmh-footer-links { list-style: none; margin: 0; padding: 0; } .hmh-footer .hmh-footer-links li { margin-bottom: 10px; } .hmh-footer .hmh-footer-links a { color: var(--hmh-dark-muted); font-size: 14px; text-decoration: none; transition: color 0.2s ease; } .hmh-footer .hmh-footer-links a:hover { color: var(--hmh-accent); } .hmh-footer .hmh-footer-contact-list { list-style: none; margin: 0; padding: 0; } .hmh-footer .hmh-footer-contact-list li { align-items: center; display: flex; gap: 10px; margin-bottom: 14px; } .hmh-footer .hmh-footer-contact-list li:last-child { margin-bottom: 0; } .hmh-footer .hmh-footer-contact-list i { color: var(--hmh-accent); flex-shrink: 0; font-size: 15px; width: 16px; text-align: center; } .hmh-footer .hmh-footer-contact-list a { color: var(--hmh-dark-muted); font-size: 14px; text-decoration: none; transition: color 0.2s ease; } .hmh-footer .hmh-footer-contact-list a:hover { color: var(--hmh-accent); } .hmh-footer .hmh-newsletter-form .hmh-newsletter-input-wrap { align-items: center; border-bottom: 1px solid var(--hmh-dark-divider); display: flex; gap: 10px; padding-bottom: 10px; } .hmh-footer .hmh-newsletter-form .hmh-newsletter-input-wrap > i { color: var(--hmh-dark-muted); font-size: 14px; } .hmh-footer .hmh-newsletter-form input[type="email"] { background: transparent; border: none; color: #fff; flex: 1; font-size: 14px; padding: 0; } .hmh-footer .hmh-newsletter-form input[type="email"]:focus { box-shadow: none; outline: none; } .hmh-footer .hmh-newsletter-form input[type="email"]::placeholder { color: var(--hmh-dark-muted); } .hmh-footer .hmh-newsletter-submit { background: none; border: none; color: #f7542b; cursor: pointer; flex-shrink: 0; font-size: 14px; line-height: 1; padding: 4px; transition: color 0.2s ease; } .hmh-footer .hmh-newsletter-submit:hover { color: #f7542b; } .hmh-footer .hmh-newsletter-consent { align-items: flex-start; display: flex; gap: 8px; } .hmh-footer .hmh-newsletter-consent input[type="checkbox"] { margin-top: 3px; } .hmh-footer .hmh-newsletter-consent label { color: var(--hmh-dark-muted); font-size: 13px; } .hmh-footer .hmh-newsletter-consent a { text-decoration: underline; } .hmh-footer p, .hmh-footer a { font-size: 14px; } .hmh-footer a { color: var(--hmh-dark-muted); } .hmh-footer a:hover { color: var(--hmh-accent); } .hmh-footer hr { border-color: var(--hmh-dark-divider); opacity: 1; margin: 40px 0 20px; } .hmh-footer .hmh-footer-bottom { font-size: 14px; padding-bottom: 24px; } .navbar-toggler { background-color: white !important; }