/* ============================================================================ Masar : Custom CSS Stored at: public/frontend//css/custom.css Managed by: Admin panel -> Frontend Manage -> Custom CSS/JS (Modules/FrontendManage CustomStyleScriptController writes here). Loaded LAST in (see partials/_header.blade.php), so it overrides theme CSS. Brand: primary blue #1E38D3 (theme primary/gradient), accent lime #9CDE0A (theme "secondary", exposed as CSS var --system_secendory_color). ============================================================================ */ :root { /* Correctly-spelled lime handle. The theme's own CSS misspells the variable as --system_secendary_color (with an "a") which is undefined, so the lime never rendered. The DEFINED variable is --system_secendory_color (with an "o"). We alias it here with a literal fallback so future tweaks are 1 line. */ --masar-lime: var(--system_secendory_color, #9CDE0A); } /* ============================================================================ FIX 1 : Keep the primary navigation on ONE line (desktop) Nav markup: header .heading > nav.d-none.d-lg-block > ul.heading-nav > li.heading-list > a.heading-links The desktop nav appears at the Bootstrap lg breakpoint (>=992px). We force the menu row to never wrap, tighten item spacing, and trim the search field so everything fits on a single row at desktop widths (>=1200px). Mobile (<992px uses the off-canvas menu) is untouched. ============================================================================ */ @media (min-width: 992px) { .heading nav ul.heading-nav { display: flex !important; flex-wrap: nowrap !important; white-space: nowrap; align-items: center; } .heading nav ul.heading-nav > .heading-list { flex: 0 0 auto; } .heading nav ul.heading-nav > .heading-list > .heading-links { white-space: nowrap; } } @media (min-width: 1200px) { /* pull the menu closer to the logo/category to reclaim horizontal room */ .heading nav { margin-left: 20px !important; } /* tighten per-item horizontal padding (theme default is 22px) */ .heading nav ul.heading-nav > .heading-list > .heading-links { padding-left: 12px; padding-right: 12px; } /* the "Catégories" button must always show its label; never let it shrink. The theme hides this span at max-width:1600px (header-v7.css:1377) so we force it back on for desktop widths. */ .heading-category { flex: 0 0 auto; } .heading-category-inner span { display: inline-block !important; white-space: nowrap; } /* trim the search field, and let IT yield space (shrink) instead of the category label / nav when the row gets tight */ .heading-search-box { flex: 0 1 auto !important; width: auto !important; max-width: 200px !important; min-width: 96px; } .heading-search-box .form-control { width: 100% !important; } } /* mid-desktop is where space is tightest: tighten a touch more */ @media (min-width: 1200px) and (max-width: 1440px) { .heading nav { margin-left: 12px !important; } .heading nav ul.heading-nav > .heading-list > .heading-links { padding-left: 9px; padding-right: 9px; font-size: 14px; } .heading-search-box { max-width: 130px !important; } } /* ============================================================================ FIX 2 : Surface the brand lime (#9CDE0A) as a tasteful ACCENT Blue stays dominant; lime appears as underlines / borders / hovers / marks only (never body-sized lime text on white). ============================================================================ */ /* (a) Section titles: short lime underline bar under each section heading */ .section_head h2 { position: relative; padding-bottom: 18px; } .section_head h2::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 4px; border-radius: 2px; background: var(--masar-lime); } /* (b) Active / hover nav indicator: lime underline that grows under the item */ @media (min-width: 992px) { .heading-nav .heading-list > .heading-links { position: relative; } .heading-nav .heading-list > .heading-links::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--masar-lime); transform: scaleX(0); transform-origin: left center; transition: transform 0.25s ease; } .heading-nav .heading-list > .heading-links:hover::after, .heading-nav .heading-list > .heading-links.active::after { transform: scaleX(1); } } /* (c) Hero secondary CTA ("Decouvrir les cours"): lime detail (border + arrow) */ .banner-area-btns .secondary-btn { border-bottom: 3px solid var(--masar-lime); } .banner-area-btns .secondary-btn i { color: var(--masar-lime); transition: color 0.3s ease; } .banner-area-btns .secondary-btn:hover i { color: #ffffff; } /* (d) "View all" section links: lime on hover */ .view-all-btn a:hover { color: var(--masar-lime); } .view-all-btn a:hover i { color: var(--masar-lime); }