/*
* ═══════════════════════════════════════════════════════════════
* YMFLOW — Joomla Custom Template Stylesheet
* Path : /templates/ymflow/css/template.css
*
* Fonts (add to index.php before this stylesheet):
*
*
*
* ═══════════════════════════════════════════════════════════════
*
* TABLE OF CONTENTS
* 01. Design Tokens
* 02. Joomla Layout Reset
* 03. Header & Navigation ← NEW
* 04. Base & Typography
* 05. Utilities & Buttons
* 06. Page Header Band
* 07. Home — Hero
* 08. Home — Ticker
* 09. Home — Services Cards
* 10. Home — Kaizen Philosophy
* 11. Home — CTA Banner
* 12. Our Company — About
* 13. Our Company — Team
* 14. Our Company — Ethics
* 15. Our Company — What We Do
* 16. Our Company — Qualification
* 17. Services — Split & Features
* 18. Services — Calculator
* 19. Services — Process Steps
* 20. Legal — Layout & Table
* 21. Legal — Registration & Brokers
* 22. Blog Page (.ym-blog-page)
* 23. Calculator Page (.ym-calc-page)
* 24. Footer (.ym-footer-wrap / .ym-footer)
* 25. Animations
* 26. Responsive — Tablet ≤960px
* 27. Responsive — Mobile ≤560px
* ═══════════════════════════════════════════════════════════════
*/
/* ═════════════════════════════════════════════════════════════
01. DESIGN TOKENS
═════════════════════════════════════════════════════════════ */
:root {
--cream: #f8f5f0;
--parchment: #ede8df;
--white: #ffffff;
--gold: #9a7b3a;
--gold-lt: #c4a35a;
--gold-dim: rgba(154,123,58,.13);
--rule: rgba(154,123,58,.22);
--ink: #1c1a17;
--ink-mid: #3d3a34;
--ink-soft: #7a7469;
--slate: #2d3240;
--footer-bg: #1e1c19;
--font-d: 'Playfair Display', Georgia, serif;
--font-b: 'Jost', sans-serif;
--max-w: 1200px;
--pad-h: 2.5rem;
--gap: 1.5rem;
--ease: .28s ease;
}
/* ═════════════════════════════════════════════════════════════
02. JOOMLA LAYOUT RESET
Neutralises offsets added by the Joomla template wrapper,
Bootstrap grid, and module positions.
═════════════════════════════════════════════════════════════ */
/* Remove any left-offset from Joomla content containers */
#sp-component,
#sp-main-body,
#system-message-container,
.sp-grid,
.sp-column,
.sp-module,
.container,
.container-fluid,
.row {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
float: none !important;
}
/* Kill Bootstrap col- gutters that push content right */
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* Joomla article wrappers */
.item-page,
.blog,
.com_content,
#sp-page-builder,
.page-content {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Nav menu left-alignment */
.mod-menu__list,
.nav-pills,
.nav-tabs,
ul.nav,
.navbar-nav {
display: flex !important;
justify-content: flex-start !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
/* ═════════════════════════════════════════════════════════════
03. HEADER & NAVIGATION
Targets .ym-header / .ym-nav / .ym-logo from index.php
═════════════════════════════════════════════════════════════ */
/* ── Site wrapper ── */
.ym-site-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ym-main { flex: 1; }
/* ── Container — matches .wrap concept ── */
.ym-container {
max-width: var(--max-w);
width: 100%;
margin: 0 auto;
padding: 0 var(--pad-h);
}
/* ── Topbar (above header, if used) ── */
.ym-topbar {
background: var(--footer-bg);
border-bottom: 1px solid rgba(154,123,58,.18);
padding: .4rem 0;
font-size: .62rem;
color: rgba(232,225,210,.5);
letter-spacing:.1em;
}
/* ── Header ── */
.ym-header {
background: var(--footer-bg);
border-bottom: 2px solid var(--gold);
position: sticky;
top: 0;
z-index: 500;
-webkit-font-smoothing: antialiased;
}
.ym-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0;
gap: 2rem;
}
/* ── Logo ── */
.ym-logo a {
display: flex;
align-items: center;
gap: .75rem;
color: #f5f2ec;
text-decoration: none;
transition: opacity var(--ease);
}
.ym-logo a:hover { opacity: .8; color: #f5f2ec; }
.ym-logo-mark {
width: 34px;
height: 34px;
border: 1.5px solid var(--gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.ym-logo-mark span {
width: 11px;
height: 11px;
background: var(--gold);
border-radius: 50%;
opacity: .5;
}
.ym-logo-name {
font-family: var(--font-d);
font-size: 1.2rem;
font-weight: 600;
color: #f5f2ec;
letter-spacing: .08em;
}
/* ── Nav wrapper ── */
.ym-nav {
display: flex;
align-items: center;
}
/* ── Joomla module menu output inside .ym-nav ──
mod_menu renders: