/* =================================================================== WebIQ — Unified navigation system (nav.css) Mega-menu top nav · multi-column footer · breadcrumbs · mobile Loaded last in so it overrides page-inline styles. =================================================================== */ :root{ --wq-primary:#6C3CE1; --wq-primary-light:#8B5CF6; --wq-accent:#06D6A0; --wq-dark:#0F0A1F; --wq-dark2:#1A1230; --wq-ink:#C9C6D6; --wq-muted:#9CA3AF; } /* ---------- Top nav: mega dropdown ---------- */ .nav-links .has-mega{position:relative;} .nav-links .has-mega > a .nav-caret{font-size:.65em;opacity:.75;margin-inline-start:.3rem;display:inline-block;transition:transform .3s;} .nav-links .has-mega:hover > a .nav-caret, .nav-links .has-mega:focus-within > a .nav-caret{transform:rotate(180deg);} /* invisible hover bridge to keep panel open while moving cursor down */ .nav-links .has-mega::before{content:"";position:absolute;top:100%;right:0;left:0;height:18px;} .mega-menu{ position:absolute; top:calc(100% + 16px); right:0; display:grid; grid-template-columns:1fr 1fr; gap:.4rem 2rem; min-width:540px; padding:1.6rem 1.8rem; background:rgba(26,18,48,.98); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); border:1px solid rgba(255,255,255,.12); border-radius:18px; box-shadow:0 30px 60px -15px rgba(0,0,0,.6); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease, visibility .25s; z-index:1002; } .nav-links .has-mega:hover .mega-menu, .nav-links .has-mega:focus-within .mega-menu{opacity:1; visibility:visible; transform:translateY(0);} .mega-col{display:flex; flex-direction:column; gap:.1rem;} .mega-title{font-size:.72rem; font-weight:700; letter-spacing:.03em; color:var(--wq-accent); margin-bottom:.55rem; padding-bottom:.5rem; border-bottom:1px solid rgba(255,255,255,.09);} .mega-menu a{display:block; color:var(--wq-ink)!important; font-size:.9rem!important; font-weight:500; padding:.5rem .65rem!important; border-radius:9px; white-space:nowrap; transition:background .2s,color .2s;} .mega-menu a::after{display:none!important;} .mega-menu a:hover{background:rgba(108,60,225,.20); color:#fff!important;} /* ---------- Breadcrumbs (inside hero-content, above H1) ---------- */ .wq-breadcrumbs{margin:0 0 1.3rem;} .wq-breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin:0; padding:0; font-size:.85rem;} .wq-breadcrumbs li{display:inline-flex; align-items:center; color:var(--wq-muted);} .wq-breadcrumbs a{color:var(--wq-muted); text-decoration:none; transition:color .2s;} .wq-breadcrumbs a:hover{color:var(--wq-accent);} .wq-breadcrumbs li[aria-current]{color:#fff; font-weight:600;} .wq-breadcrumbs .sep{opacity:.45; margin:0 .1rem;} /* standalone breadcrumb (blog/list pages not in a hero) */ .wq-breadcrumbs.standalone{max-width:1200px; margin:0 auto; padding:96px 2rem .2rem;} /* ---------- Multi-column footer ---------- */ .footer .footer-content.footer-cols{ display:grid!important; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:2.4rem; align-items:start; text-align:right; width:100%; } .footer-col h4{color:#fff; font-size:1rem; font-weight:700; margin:0 0 1.1rem;} .footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem;} .footer-col ul li a{color:var(--wq-muted); text-decoration:none; font-size:.9rem; transition:color .2s;} .footer-col ul li a:hover{color:var(--wq-accent);} .footer-brand .footer-logo{display:inline-flex; margin-bottom:.9rem;} .footer-brand p{color:var(--wq-muted); font-size:.9rem; line-height:1.75; margin:0 0 1.1rem; max-width:34ch;} .footer-contact{display:flex; flex-direction:column; gap:.55rem;} .footer-contact a{display:inline-flex; align-items:center; gap:.55rem; color:var(--wq-ink); text-decoration:none; font-size:.9rem; transition:color .2s;} .footer-contact a:hover{color:var(--wq-accent);} .footer-contact a svg{flex-shrink:0; stroke:var(--wq-accent);} /* ---------- Mobile (<=768px) ---------- */ @media (max-width:768px){ /* make the fullscreen menu scrollable & top-aligned to fit the mega links */ .nav-links.active{ justify-content:flex-start!important; align-items:center!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; padding:5.5rem 1.5rem 2.5rem!important; gap:.4rem!important; } .nav-links .has-mega{width:100%;} .nav-caret{display:none!important;} /* mega panel becomes an inline expanded list */ .mega-menu{ position:static!important; display:flex!important; flex-direction:column; min-width:0!important; opacity:1!important; visibility:visible!important; transform:none!important; background:transparent!important; border:none!important; box-shadow:none!important; padding:.2rem 0 .6rem!important; gap:.15rem; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .mega-col{align-items:center;} .mega-title{color:var(--wq-accent); font-size:.8rem; margin:.7rem 0 .2rem; border:none; padding:0;} .mega-menu a{font-size:1.05rem!important; color:#d6d1e6!important; padding:.4rem!important; text-align:center; white-space:normal;} .footer .footer-content.footer-cols{grid-template-columns:1fr 1fr!important; gap:1.6rem; text-align:right;} .footer-brand{grid-column:1 / -1;} .wq-breadcrumbs.standalone{padding-top:88px;} } @media (max-width:480px){ .footer .footer-content.footer-cols{grid-template-columns:1fr!important;} } /* ---------- Infographic SVG RTL fix ---------- Charts/infographics are drawn LTR (x-coords, text-anchor). On an RTL page the browser flips text placement and clips labels. Forcing LTR on SVG text restores the intended layout (Hebrew still reads RTL within each run). Applies to all current + FUTURE svg infographics. */ svg text{direction:ltr;}