/* ============================================================================
Nexio — custom overrides (qm-dev)
THE ONLY place to hand-write CSS for the Nexio frontend template.
Helix auto-loads this file LAST (onBeforeCompileHead -> addCustomAssets),
i.e. after bootstrap.min.css, template.css, rtl.css and presets/*.css, so
plain selectors win without !important. It is NEVER SCSS-compiled and
survives both Helix-plugin and Nexio-template updates.
DO NOT edit templates/nexio/css/template.css or rtl.css (SCSS-generated,
overwritten on every template-style save). Put everything here.
----------------------------------------------------------------------------
INDEX
§0 Design tokens ................... CSS variables (--qm-*) — tune once
§1 RTL dropdown chevron fix ........ all headers, RTL only (LTR untouched)
§2 "Centered Menu" header .......... preset 10-CenteredMenu (DORMANT — fallback)
§3 "Topbar Centered" header ........ preset 11-TopbarCentered (ACTIVE)
§4 SPPB page-content top spacing ... every SP Page Builder page (all presets)
§5 Floating help button ........... site-wide FAB (all presets)
§6 Footer .......................... #sp-footer darker + right-aligned + full-width container
§7 SPPB buttons ..................... brand palette for .sppb-btn-* (solid + outline + link)
§8 Sticky footer .................... site-wide; footer rests at viewport bottom on short pages
§9 Smart Search page .............. com_finder /search — branded form, filters & result cards
§10 Error / 404 page ............... templates/nexio/error.php — Arabic 404 + 5s redirect to home
§11 GTranslate switcher ............ floating language popup — compact, rounded, brand colours
§12 Floating buttons placement ..... accessibility widget + help bottom-RIGHT (stacked), GTranslate bottom-LEFT
§13 OSMap HTML sitemap ............. com_osmap view=html — branded list (RTL, green headings)
----------------------------------------------------------------------------
============================================================================ */
/* ============================================================================
§0. Design tokens — tune once; everything below references them.
Pure refactor: values are identical to the previously-hardcoded literals
(no visual change). :root cascades everywhere; the --qm- prefix avoids
clashing with Helix / SPPB variables. (§2 dormant fallback intentionally
still uses literals — it's a separate, inactive colour scheme.)
============================================================================ */
:root {
--qm-green: #315b4d; /* primary brand green — links, menu hover/active, accents */
--qm-ink: #11212d; /* primary text on light */
--qm-gold: #b18f5d; /* gold accent — floating help button */
--qm-accent: var(--qm-green); /* accent = brand green (e.g. dropdown top-cap) */
--qm-border: #e2e6ea; /* hairline — menu band */
--qm-border-soft: #dfe5e8; /* hairline — dropdown panel */
--qm-hover-tint: rgba(49, 91, 77, .09); /* hover wash (= --qm-green @ ~9%) */
--qm-radius: 12px; /* panel radius (matches template.css dropdown) */
--qm-radius-item: 7px; /* row / item radius */
/* SPPB button palette (used by §7). Hover shades ≈ 15% darker. Primary &
secondary reuse the brand green/gold; the four semantics are brand-
harmonised and all carry white text. */
--qm-green-h: #274a3f; /* primary button hover (= --qm-green darker) */
--qm-gold-h: #9a7b4c; /* secondary button hover (= --qm-gold darker) */
--qm-success: #4f8c69; /* forest green */
--qm-success-h: #41785a;
--qm-info: #4a8589; /* dusty teal */
--qm-info-h: #3c6e72;
--qm-warning: #b3791f; /* deep amber-ochre*/
--qm-warning-h: #976419;
--qm-danger: #b46550; /* muted terracotta*/
--qm-danger-h: #9a5340;
--qm-neutral: #eff1f4; /* Default button — neutral light grey */
--qm-neutral-h: #d7dadd;
--qm-neutral-bd: #cfd6db; /* Default outline border */
}
/* ============================================================================
§1. Dropdown chevron — RTL: ONE caret, AFTER the word; Solid face (no tofu)
----------------------------------------------------------------------------
Two stock bugs combine on this RTL site:
(a) template.css defines the top-level caret on `> a:after` (content + weight 900)
but does NOT scope it to body.ltr, so it ALSO renders in RTL.
(b) rtl.css ADDS a second caret on `> a:before` (floated left, weight unset → tofu).
Because the centred-menu header makes the top-level display:inline-flex, both
pseudo-elements become flex items: :before lands at the start (RIGHT = before the
word) and :after at the end (LEFT = after the word) — a duplicate, wrong-side caret.
Fix: drop the :before caret in RTL and keep :after (already after the word in the
inline-flex), forced to the Solid (900) face so the angle glyph shows. Angle glyphs
(\f107 / \f104 / \f105) exist only in the Solid face. (LTR / qmnex unaffected.)
========================================================================== */
/* remove the wrong-side (right / before-the-word) top-level caret */
body.rtl .sp-megamenu-parent > li.sp-has-child > a:before,
body.rtl .sp-megamenu-parent > li.sp-has-child > span:before {
content: none !important;
}
/* re-define the :after caret as a normal flowing flex item on the LEFT (after the
word). The stock :after is position:absolute + float:right, which misplaces it
inside our inline-flex (it vanished). Pin content + static flow + Solid face. */
body.rtl .sp-megamenu-parent > li.sp-has-child > a:after,
body.rtl .sp-megamenu-parent > li.sp-has-child > span:after {
content: "\f107" !important; /* fa-angle-down */
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
-webkit-font-smoothing: antialiased;
position: static !important; /* flow as a flex item (stock makes it absolute) */
float: none !important;
top: auto !important;
margin: 0 7px 0 0 !important; /* gap between caret (left) and label (right) */
}
/* 2nd / 3rd-level dropdown carets: rtl.css already floats these left (correct side) —
just force the Solid face so the angle glyph renders instead of a tofu box. */
body.rtl .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > a:after,
body.rtl .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > span:after {
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
-webkit-font-smoothing: antialiased;
}
/* Menu-Heading dropdown parents render as (HelixultimateMenu::item, heading/
separator branch), so rtl.css's `.sp-has-child > a:after` caret never matches them and
they show NO submenu arrow. Supply the same left-angle glyph + float that rtl.css gives
the variant. (RTL-scoped → LTR untouched.) */
body.rtl .sp-megamenu-parent .sp-dropdown .sp-dropdown-items .sp-has-child > span:after {
content: "\f104" !important; /* fa-angle-left — RTL flyout opens to the left */
float: left !important;
margin-right: 7px !important;
}
/* ----------------------------------------------------------------------------
Nested sub-dropdown (3rd level) not opening — ROOT CAUSE: the main dropdown's
inner (#sp-header #sp-menu … .sp-dropdown-inner) is overflow:hidden, which CLIPS
the sub-dropdown when it opens out to the side (the stock overflow:visible rule
is scoped to #modal-menu only, not this header). Let inners that actually contain
a submenu overflow. Direction-NEUTRAL — fixes nested menus in BOTH LTR and RTL
(LTR opens the sub to the right via stock left:100%, also outside the inner). The
stock right:100% (RTL) / left:100% (LTR) positioning is already correct. */
#sp-header #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent li .sp-dropdown .sp-dropdown-inner:has(.sp-dropdown-sub) {
overflow: visible;
}
/* ============================================================================
§2. "Centered Menu" predefined header (#sp-header.header-centered-menu)
----------------------------------------------------------------------------
STATUS: DORMANT — fallback preset (10-CenteredMenu). These rules ONLY apply
when that header is active; the live header is §3 (11-TopbarCentered). Kept
so we can switch back without re-deriving the dark-pill layout. The pill /
white colours below are this preset's, NOT the active site's.
Logo centered on its own row, horizontal menu centered on the row below.
Scoped to the preset's hook class so switching to another header is clean.
Desktop only (lg+); below lg the burger/offcanvas handles navigation.
========================================================================== */
@media (min-width: 992px) {
#sp-header.header-centered-menu .container-inner > .row {
flex-wrap: wrap;
justify-content: center;
}
/* --- Logo: full-width, centered, on top --- */
#sp-header.header-centered-menu #sp-logo {
order: 1;
flex: 0 0 100%;
max-width: 100%;
margin: 0 auto !important;
padding: 0 !important;
text-align: center;
}
#sp-header.header-centered-menu #sp-logo .sp-column,
#sp-header.header-centered-menu #sp-logo .logo {
display: flex;
justify-content: center;
align-items: center;
}
#sp-header.header-centered-menu #sp-logo .logo-image,
#sp-header.header-centered-menu #sp-logo img {
margin: 0 auto;
display: inline-block;
}
/* --- Menu: full-width, centered, below the logo --- */
#sp-header.header-centered-menu #sp-menu {
order: 2;
flex: 0 0 100%;
max-width: 100%;
}
/* Re-centre the flex chain. Bootstrap's .justify-content-between is
!important and the base .menu-with-offcanvas/.flex-auto grow, which
(combined with the block-float UL below) made the menu spread full-width.
Force centre + don't grow so the menu is a tight, centred group. */
#sp-header.header-centered-menu #sp-menu .sp-column {
position: relative;
justify-content: center !important;
}
#sp-header.header-centered-menu #sp-menu .menu-with-offcanvas {
justify-content: center !important;
flex: 0 1 auto !important;
}
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper {
justify-content: center !important;
flex: 0 1 auto !important;
width: auto !important;
/* rounded "pill" that hugs the menu (content-width, centred) */
background: rgba(17, 33, 45, 0.60); /* dark green-navy, translucent */
border-radius: 999px; /* full pill */
padding: 5px 28px;
box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
/* THE KEY FIX: the base rule is `.sp-megamenu-parent{display:block;float:right}`
with `>li{display:inline-block}` — that is what made the items spread and
the overflow item drop to a RIGHT-aligned 2nd row. Force the UL to be a
centred flex row. !important guarantees the win over the generated
base/rtl.css rules regardless of their specificity. */
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
/* Item spacing + kill the base 120px line-height (that tall green band) so
the menu row is a sane height. */
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item {
margin: 0 9px !important;
}
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item > a,
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item > span {
line-height: 1.2 !important;
padding: 10px 6px !important;
display: inline-flex;
align-items: center;
color: #ffffff !important; /* readable on the dark pill (carets inherit) */
}
/* hover / active accent (gold), readable on the dark pill */
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item:hover > a,
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item.active > a,
#sp-header.header-centered-menu #sp-menu .sp-megamenu-wrapper .sp-megamenu-parent > li.sp-menu-item.current > a {
color: #d8b888 !important;
}
/* Pin the header modules (search/login) and the "menu" module position
(.modules-wrap — currently holds an "Admin Menu" module) out of the flex
flow so the megamenu centres in the FULL width, not pushed off-centre.
inset-inline-end is RTL-aware (left edge in RTL). */
#sp-header.header-centered-menu #sp-menu .header-modules,
#sp-header.header-centered-menu #sp-menu .modules-wrap {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
}
/* ============================================================================
§3. "Topbar Centered" predefined header (#sp-header.header-topbar-centered)
----------------------------------------------------------------------------
STATUS: ACTIVE — this is the live header (preset 11-TopbarCentered, set via
the header_style param on template_styles id=21). Edit HERE for the current
site's header look.
artolio-style stacked header: Helix topbar -> centred logo -> FULL-WIDTH white
menu band with the menu centred inside it. No pill.
TOPBAR is fully Helix-controlled: its colours come from the params
topbar_bg_color / topbar_text_color (System > Templates > Nexio style > Top Bar)
and its content from the social/contact features + the top1/top2 module
positions (Module Manager) — so add/remove elements there, never in CSS.
========================================================================== */
/* --- Topbar: tidy inline contact + social (applies at all widths, RTL-safe) --- */
#sp-top-bar .sp-contact-info {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-wrap: wrap;
gap: 4px 22px;
align-items: center;
vertical-align: middle;
}
#sp-top-bar .sp-contact-info > li { line-height: 1.6; }
#sp-top-bar .sp-contact-info a { text-decoration: none; }
#sp-top-bar .sp-contact-info [class*="fa-"] { margin-inline-end: 6px; opacity: .85; }
#sp-top-bar ul.social-icons { margin: 0; vertical-align: middle; }
/* --- Topbar date/time (3 separate Custom HTML modules in top2:
"Topbar — Hijri Date" / "— Gregorian Date" / "— Madinah Time").
Lay the modules out in one inline row with thin dividers between them.
Logical properties (inline-start/-end) keep it RTL-safe AND LTR-safe. --- */
#sp-top-bar #sp-top2 .sp-column { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
@media (min-width: 992px) { #sp-top-bar #sp-top2 .sp-column { justify-content: flex-end; } }
#sp-top-bar #sp-top2 .sp-module { margin: 0; padding-inline: 14px; }
#sp-top-bar #sp-top2 .sp-module + .sp-module { border-inline-start: 1px solid rgba(255, 255, 255, 0.18); }
#sp-top-bar .topbar-dt { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; line-height: 1.7; }
#sp-top-bar .topbar-dt > [class*="fa-"] { opacity: .8; font-size: .95em; }
#sp-top-bar .topbar-dt .tb-tz { opacity: .7; font-size: .85em; margin-inline-start: 2px; }
/* header is now multi-row: let it size to its content.
Also kill the stock `.full-header` 45px side padding (scss/theme.scss; 10px on
mobile via responsive.scss) so the full-width white #sp-menu-bar runs edge-to-
edge. Direction-neutral (LTR-safe); the inner .container still caps + centres
the logo / topbar / menu content. Scoped to our preset so the other headers
keep their stock 45px. */
#sp-header.header-topbar-centered {
height: auto;
background: transparent;
padding-left: 0;
padding-right: 0;
}
/* --- Mobile (<992px): stacked topbar-centred header. Stock Helix forces
#sp-header .logo{height:65px} (responsive.scss), which clips our taller
stacked logo (emblem + titles + calligraphy) so its top spills up into the
dark topbar. Let the logo size to its content and give the logo row top
breathing room below the topbar. Scoped to our preset; LTR-safe. --- */
@media (max-width: 991.98px) {
#sp-header.header-topbar-centered #sp-logo,
#sp-header.header-topbar-centered #sp-logo .sp-column,
#sp-header.header-topbar-centered #sp-logo .logo,
#sp-header.header-topbar-centered #sp-logo .logo-image {
height: auto;
}
#sp-header.header-topbar-centered .sp-logo-row {
padding-top: 20px;
padding-bottom: 12px;
}
}
@media (min-width: 992px) {
/* Row 2 — centred logo */
#sp-header.header-topbar-centered .sp-logo-row { padding: 16px 0; }
#sp-header.header-topbar-centered #sp-logo {
float: none;
text-align: center;
/* Kill template.css `#sp-header #sp-logo{margin-right:48px}` which offset
the centered logo to the left in this stacked header. */
margin-right: 0;
}
#sp-header.header-topbar-centered #sp-logo .sp-column,
#sp-header.header-topbar-centered #sp-logo .logo {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
#sp-header.header-topbar-centered #sp-logo img,
#sp-header.header-topbar-centered #sp-logo .logo-image { margin: 0 auto; }
/* Row 3 — FULL-WIDTH white menu band */
#sp-header.header-topbar-centered #sp-menu-bar {
width: 100%;
background: #ffffff;
border-top: 1px solid var(--qm-border);
border-bottom: 1px solid var(--qm-border);
/* box-shadow disabled (kept borders only): box-shadow: 0 2px 6px rgba(17, 33, 45, 0.06); */
}
/* === Dropdown UI — Variant B "Green top-cap" (flat / shadowless) ==========
1px hairline edge defines the floating surface (replaces the shadow); a 3px
brand-green TOP border adds depth-via-colour + brand identity. 12px radius
kept from template.css. Items: comfortable padding, 7px radius, FULL-ROW
green-tint hover + green text — same for the active/current page AND the
3rd-level sub-dropdown (both reuse .sp-dropdown-inner / .sp-dropdown-items).
The hover/active backgrounds use !important to beat a higher-specificity
generated rule (template.css `…>a:hover{background:var(--sppb-bg-card-primary)}`
which otherwise paints the row grey) and the preset's gold hover (#b99a6b).
RTL + LTR safe (no direction-specific CSS). */
/* panel: kill shadow (vendor: main 0 3px 5px, sub 0 0 5px), hairline + green cap */
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown .sp-dropdown-inner {
box-shadow: none;
border: 1px solid var(--qm-border-soft);
border-top: 3px solid var(--qm-accent); /* Variant B: brand-green top-cap */
background-color: #ffffff;
padding: 8px;
}
/* items */
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item > a,
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item > span {
display: block;
padding: 10px 16px;
border-radius: var(--qm-radius-item);
color: var(--qm-ink);
font-size: 16px !important; /* match the top-level menu titles (vendor sets dropdown to 18px) */
line-height: 1.45;
transition: background-color .15s ease, color .15s ease;
}
/* full-row hover + keyboard focus (green tint — !important beats vendor grey) */
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item:hover > a,
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item:hover > span,
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item > a:focus {
background-color: var(--qm-hover-tint) !important;
color: var(--qm-green) !important;
}
/* active / current page */
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item.active > a,
#sp-header.header-topbar-centered #sp-menu-bar .sp-dropdown-items > li.sp-menu-item.current > a {
background-color: var(--qm-hover-tint) !important;
color: var(--qm-green) !important;
}
/* menu wrapper spans the band, auto height (kills the base 120px band) */
#sp-header.header-topbar-centered #sp-menu-bar #sp-menu {
position: relative;
float: none;
width: 100%;
height: auto;
}
#sp-header.header-topbar-centered #sp-menu-bar #sp-menu > .sp-column {
height: auto;
width: 100%;
justify-content: flex-start !important; /* override Bootstrap's .justify-content-center */
}
/* FULL WIDTH: the megamenu takes ALL available space and distributes items
edge-to-edge. space-between is direction-neutral (works LTR + RTL). */
#sp-header.header-topbar-centered #sp-menu-bar .menu-with-offcanvas {
flex: 1 1 auto !important;
width: 100%;
justify-content: space-between !important;
}
#sp-header.header-topbar-centered #sp-menu-bar .sp-megamenu-wrapper {
flex: 1 1 auto !important;
width: 100% !important;
justify-content: space-between !important;
}
/* base rule is .sp-megamenu-parent{display:block;float:right}; force a full-width
flex row that spreads items across all available space. */
#sp-header.header-topbar-centered #sp-menu-bar .sp-megamenu-parent {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
align-items: center !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
}
#sp-header.header-topbar-centered #sp-menu-bar .sp-megamenu-parent > li.sp-menu-item {
margin: 0 !important;
}
/* `> span` (plain direct child) styles a "Menu Heading" / "Text Separator"
item the SAME as a link. Helix renders those non-link types as a bare