/*! * IndeedSEO — Header redesign (Stripe-style mega menu + mobile drawer) * Portable drop-in stylesheet. Load this once per page (in or before ). * Pair with iseo-header.js and the header markup (
...
). * No external CSS dependencies. Uses CSS custom properties scoped to .iseo-header. */ /* ================= IndeedSEO Header Redesign — Mega menu + Mobile ================= */ .iseo-header{ --iseo-primary:#1778BE; --iseo-green:#30AD1C; --iseo-orange:#FF8D54; --iseo-ink:#1A2B3B; --iseo-muted:#6B7684; --iseo-line:#E6EBF1; --iseo-soft:#F6F9FC; } .iseo-header .navbar .container{ position:relative; } .iseo-has-mega{ position:static !important; } /* ---------- MEGA PANEL ---------- */ .iseo-mega{ position:absolute; left:50%; top:calc(100% + 16px); transform:translateX(-50%); width:min(1180px, calc(100vw - 36px)); background:#fff; border:1px solid var(--iseo-line); border-radius:20px; box-shadow:0 30px 70px -18px rgba(19,45,86,.28), 0 10px 30px -12px rgba(19,45,86,.12); opacity:0; visibility:hidden; pointer-events:none; z-index:60; overflow:hidden; will-change:transform, opacity; } .iseo-mega.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .iseo-mega::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; } .iseo-mega__inner{ display:grid; grid-template-columns:324px 1fr; } /* left rail */ .iseo-mega__rail{ background:var(--iseo-soft); border-right:1px solid var(--iseo-line); padding:18px; display:flex; flex-direction:column; gap:2px; } .iseo-rail__item{ display:flex; gap:13px; align-items:flex-start; padding:12px 14px; border-radius:13px; text-decoration:none; position:relative; transition:background .2s ease, box-shadow .2s ease; } .iseo-rail__item:hover{ background:#fff; } .iseo-rail__ic{ width:26px; height:26px; flex:0 0 26px; display:grid; place-items:center; } .iseo-rail__ic img{ width:100%; height:100%; object-fit:contain; transition:filter .2s ease; /* normalise any source (white or dark svg) to a consistent grey */ filter:brightness(0) saturate(100%) invert(46%); } .iseo-rail__tx{ min-width:0; } .iseo-rail__tt{ display:block; font:600 15px/1.25 var(--body-font, sans-serif); color:var(--iseo-ink); } .iseo-rail__ds{ display:block; font:400 12.5px/1.45 var(--body-font, sans-serif); color:var(--iseo-muted); margin-top:3px; max-height:0; opacity:0; overflow:hidden; transition:max-height .3s ease, opacity .25s ease, margin .3s ease; } .iseo-rail__item.is-active{ background:#fff; box-shadow:0 8px 22px -10px rgba(19,45,86,.22); } .iseo-rail__item.is-active::after{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:0 3px 3px 0; background:var(--iseo-primary); } .iseo-rail__item.is-active .iseo-rail__ds{ max-height:64px; opacity:1; margin-top:5px; } .iseo-rail__item:hover .iseo-rail__ic img, .iseo-rail__item.is-active .iseo-rail__ic img{ filter:brightness(0) saturate(100%) invert(37%) sepia(74%) saturate(1900%) hue-rotate(178deg) brightness(91%) contrast(88%); } /* stage */ .iseo-mega__stage{ position:relative; padding:26px 30px 78px; min-height:406px; overflow:hidden; } .iseo-panel{ position:absolute; top:26px; left:30px; right:30px; opacity:0; visibility:hidden; } .iseo-panel.is-active{ opacity:1; visibility:visible; } .iseo-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px 24px; } .iseo-grid.is-wide{ grid-template-columns:1fr; gap:8px; max-width:780px; } .iseo-col{ min-width:0; } .iseo-col + .iseo-col{ border-left:1px solid var(--iseo-line); padding-left:24px; } .iseo-grid.is-wide .iseo-col + .iseo-col{ border-left:0; padding-left:0; } .iseo-list{ list-style:none; margin:0; padding:0; } .iseo-list a{ display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:10px; font:500 14px/1.35 var(--body-font, sans-serif); color:#3C4257; text-decoration:none; transition:background .18s ease, color .18s ease, transform .18s ease; } .iseo-list a::before{ content:""; width:6px; height:6px; border-radius:50%; background:transparent; flex:0 0 6px; transition:background .18s ease, transform .18s ease; } .iseo-list a:hover{ background:var(--iseo-soft); color:var(--iseo-primary); transform:translateX(3px); } .iseo-list a:hover::before{ background:var(--iseo-primary); } .iseo-list a.iseo-more{ font-weight:700; color:var(--iseo-ink); margin-top:2px; } .iseo-list a.iseo-more svg{ transition:transform .18s ease; } .iseo-list a.iseo-more:hover svg{ transform:translateX(4px); } .iseo-list a.iseo-more:hover svg path{ stroke:var(--iseo-primary); } /* rich links (ORM / Link Building / Content Writing) */ .iseo-rich a{ display:block; padding:12px 14px; border-radius:14px; text-decoration:none; border:1px solid transparent; transition:border-color .2s ease, background .2s ease, transform .2s ease; } .iseo-rich a + a{ margin-top:6px; } .iseo-rich a:hover{ background:var(--iseo-soft); border-color:var(--iseo-line); transform:translateY(-1px); } .iseo-rich__t{ display:block; font:700 14.5px/1.3 var(--body-font, sans-serif); color:var(--iseo-ink); } .iseo-rich__d{ display:block; font:400 12.5px/1.5 var(--body-font, sans-serif); color:var(--iseo-muted); margin-top:5px; } /* aside "always available" */ .iseo-aside{ background:var(--iseo-soft); border:1px solid var(--iseo-line); border-radius:16px; padding:16px; } .iseo-aside__k{ display:block; font:600 11px/1 var(--body-font, sans-serif); letter-spacing:.09em; text-transform:uppercase; color:var(--iseo-ink); margin-bottom:10px; } .iseo-aside__img{ width:100%; height:104px; } .iseo-aside__img img{ width:100%; height:100%; object-fit:contain; object-position:left; } .iseo-aside ul{ list-style:none; margin:14px 0 0; padding:0; } .iseo-aside li{ position:relative; padding-left:24px; margin-top:9px; font:500 13px/1.4 var(--body-font, sans-serif); color:var(--iseo-ink); } .iseo-aside li::before{ content:""; position:absolute; left:0; top:1px; width:16px; height:16px; background:url(https://indeedseo.com/images/mega-images/mega-check-img.svg) center/cover no-repeat; } /* case study */ .iseo-cs{ margin-top:6px; } .iseo-cs__img{ width:100%; height:130px; border-radius:14px; overflow:hidden; } .iseo-cs__img img{ width:100%; height:100%; object-fit:cover; } .iseo-cs__t{ display:block; margin-top:10px; font:700 14px/1.3 var(--body-font, sans-serif); color:var(--iseo-ink); text-decoration:none; } .iseo-cs__p{ margin:6px 0 0; font:400 12.5px/1.5 var(--body-font, sans-serif); color:var(--iseo-muted); } .iseo-cs__all{ display:inline-block; margin-top:10px; font:700 13px/1 var(--body-font, sans-serif); color:var(--iseo-primary); text-decoration:none; } .iseo-cs__all:hover{ color:var(--iseo-orange); } /* bottom cta bar */ .iseo-mega__cta{ position:absolute; left:0; right:0; bottom:0; padding:16px 30px; background:var(--iseo-soft); border-top:1px solid var(--iseo-line); } .iseo-mega__cta p{ margin:0; font:500 14px/1.4 var(--body-font, sans-serif); color:var(--iseo-ink); } .iseo-mega__cta a{ color:var(--iseo-green); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:color .2s ease; } .iseo-mega__cta a:hover{ color:var(--iseo-orange); } .iseo-mega__cta a:hover svg{ transform:translateX(3px); } .iseo-mega__cta a svg{ transition:transform .2s ease; } .iseo-mega__cta a:hover svg path{ fill:var(--iseo-orange); } /* trigger chevrons */ .iseo-has-mega > .nav-link i, .iseo-has-sub > .nav-link i{ transition:transform .25s ease; } .iseo-has-mega.is-open > .nav-link i, .iseo-has-sub.is-open > .nav-link i{ transform:rotate(180deg); } /* ---------- Resources sub ---------- */ /* scoped + !important on layout props to beat the theme's global .sub-menu rules */ .iseo-header .iseo-sub{ position:absolute !important; top:calc(100% + 16px) !important; left:auto !important; right:0 !important; bottom:auto !important; transform:none; width:328px !important; min-width:328px !important; max-width:none !important; list-style:none; margin:0; padding:8px !important; background:#fff; border:1px solid var(--iseo-line); border-radius:18px; box-shadow:0 26px 56px -18px rgba(19,45,86,.30), 0 8px 22px -12px rgba(19,45,86,.14); opacity:0; visibility:hidden; pointer-events:none; z-index:60; } .iseo-header .iseo-sub::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; } .iseo-header .iseo-sub.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .iseo-header .iseo-sub .iseo-sub__hd{ display:block; padding:8px 12px 6px; margin:0; color:var(--iseo-muted); background:none; font:600 10.5px/1 var(--body-font, sans-serif); letter-spacing:.11em; text-transform:uppercase; border:0; } .iseo-header .iseo-sub li{ list-style:none; width:100% !important; float:none !important; margin:0; padding:0; border:0; } .iseo-header .iseo-sub li a{ display:flex !important; align-items:center; gap:12px; width:100% !important; padding:10px 12px !important; margin:0 !important; border:0 !important; border-radius:13px; color:#3C4257 !important; text-decoration:none; white-space:normal !important; position:relative; transition:background .16s ease; } .iseo-header .iseo-sub li a:hover{ background:var(--iseo-soft) !important; } .iseo-header .iseo-sub .iseo-sub__ic{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:grid; place-items:center; background:#EAF2FB; color:var(--iseo-primary); transition:background .16s ease, color .16s ease, transform .16s ease; } .iseo-header .iseo-sub li a:hover .iseo-sub__ic{ background:var(--iseo-primary); color:#fff; transform:translateY(-1px); } .iseo-header .iseo-sub .iseo-sub__tx{ min-width:0; flex:1 1 auto; } .iseo-header .iseo-sub .iseo-sub__tt{ display:block; font:600 14px/1.2 var(--body-font, sans-serif); color:var(--iseo-ink); } .iseo-header .iseo-sub .iseo-sub__ds{ display:block; margin-top:2px; font:400 12px/1.35 var(--body-font, sans-serif); color:var(--iseo-muted); } .iseo-header .iseo-sub .iseo-sub__ar{ margin-left:auto; flex:0 0 auto; width:16px; height:16px; color:var(--iseo-muted); opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; } .iseo-header .iseo-sub li a:hover .iseo-sub__ar{ opacity:1; transform:translateX(0); color:var(--iseo-primary); } @media (max-width:1349px){ .iseo-mega{ width:min(1120px, calc(100vw - 32px)); } } @media (max-width:1199px){ .iseo-mega__inner{ grid-template-columns:284px 1fr; } .iseo-grid{ grid-template-columns:1fr 1fr; } .iseo-grid .iseo-col:nth-child(3){ grid-column:1 / -1; border-left:0; padding-left:0; border-top:1px solid var(--iseo-line); padding-top:14px; margin-top:8px; } .iseo-grid.is-wide{ grid-template-columns:1fr; } } @media (max-width:991px){ .iseo-mega, .iseo-sub{ display:none !important; } } /* ================= MOBILE OVERLAY ================= */ .iseo-mobile{ position:fixed; inset:0; z-index:2000; background:#fff; display:flex; flex-direction:column; opacity:0; visibility:hidden; pointer-events:none; } .iseo-mobile.is-open{ opacity:1; visibility:visible; pointer-events:auto; } .iseo-mobile__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--iseo-line); } .iseo-mobile__head img{ max-width:116px; } .iseo-mobile__close{ width:42px; height:42px; border:1px solid var(--iseo-line); background:#fff; border-radius:12px; font-size:20px; line-height:1; color:var(--iseo-ink); display:grid; place-items:center; cursor:pointer; } .iseo-mobile__nav{ flex:1; overflow-y:auto; padding:6px 20px 20px; -webkit-overflow-scrolling:touch; } .iseo-m-item{ border-bottom:1px solid var(--iseo-line); } .iseo-m-row{ display:flex; align-items:center; gap:14px; width:100%; background:none; border:0; padding:19px 4px; text-align:left; text-decoration:none; cursor:pointer; } .iseo-m-num{ display: none; font:700 12px/1 var(--body-font, sans-serif); color:var(--iseo-muted); width:22px; flex:0 0 22px; padding-top:5px; } .iseo-m-tt{ flex:1; font:800 25px/1.15 var(--header-font-bold, var(--body-font, sans-serif)); color:var(--iseo-ink); } .iseo-m-ar{ margin-left:auto; color:var(--iseo-ink); flex:0 0 auto; transition:transform .25s ease; } .iseo-m-item.is-open > .iseo-m-row .iseo-m-ar{ transform:rotate(180deg); } .iseo-m-sub{ height:0; overflow:hidden; } /* first-level child panel = soft card (full width, no left gutter) */ .iseo-m-sub__in{ margin:4px 0 18px; padding:6px; background:var(--iseo-soft); border:1px solid var(--iseo-line); border-radius:16px; } .iseo-m-eyebrow{ display:block; padding:11px 12px 7px; color:var(--iseo-muted); font:600 10px/1 var(--body-font, sans-serif); letter-spacing:.13em; text-transform:uppercase; } /* level 2 rows (services under Solutions) */ .iseo-m-item2 + .iseo-m-item2{ border-top:1px solid var(--iseo-line); } .iseo-m-row2{ display:flex; align-items:center; gap:10px; width:100%; padding:15px 12px; background:none; border:0; border-radius:11px; font:700 15px/1.25 var(--body-font, sans-serif); color:var(--iseo-ink); text-align:left; text-decoration:none; cursor:pointer; } .iseo-m-item2.is-open > .iseo-m-row2{ color:var(--iseo-primary); } .iseo-m-row2 .iseo-m-ar{ margin-left:auto; width:18px; height:18px; flex:0 0 auto; color:var(--iseo-muted); transition:transform .25s ease, color .2s ease; } .iseo-m-item2.is-open > .iseo-m-row2 .iseo-m-ar{ transform:rotate(180deg); color:var(--iseo-primary); } /* level 3 links (inside a service) = inset white block */ .iseo-m-sub2{ height:0; overflow:hidden; } .iseo-m-sub2__in{ margin:0 6px 6px; padding:2px 10px 4px; background:#fff; border:1px solid var(--iseo-line); border-radius:11px; } .iseo-m-sub2__in a{ display:block; padding:12px 2px; border-top:1px solid var(--iseo-line); font:600 14px/1.3 var(--body-font, sans-serif); color:#3C4257; text-decoration:none; } .iseo-m-sub2__in a:first-child{ border-top:0; } /* Resources: plain leaf links with a right chevron */ .iseo-m-sub__in > a{ display:flex; align-items:center; gap:11px; width:100%; padding:15px 12px; border-radius:11px; font:700 15px/1.25 var(--body-font, sans-serif); color:var(--iseo-ink); text-decoration:none; } .iseo-m-sub__in > a + a{ border-top:1px solid var(--iseo-line); } .iseo-m-sub__in > a::after{ content:""; width:7px; height:7px; margin-left:auto; flex:0 0 auto; border-right:2px solid var(--iseo-muted); border-top:2px solid var(--iseo-muted); transform:rotate(45deg); } .iseo-mobile__foot{ padding:16px 20px 20px; border-top:1px solid var(--iseo-line); display:flex; flex-direction:column; gap:14px; } .iseo-mobile__foot .section__btn{ display:block; width:100%; text-align:center; border-radius:12px; } .iseo-mobile__contacts{ display:flex; flex-wrap:wrap; gap:10px 20px; } .iseo-mobile__contacts a{ display:flex; align-items:center; gap:8px; font:600 13px/1 var(--body-font, sans-serif); color:var(--iseo-ink); text-decoration:none; } .iseo-mobile__contacts img{ width:18px; height:auto; } @media (min-width:992px){ .iseo-mobile{ display:none !important; } } @media (max-width:400px){ .iseo-m-tt{ font-size:22px; } .iseo-m-row{ padding:16px 4px; } } @media (prefers-reduced-motion: reduce){ .iseo-mega, .iseo-sub, .iseo-mobile, .iseo-panel, .iseo-m-ar, .iseo-rail__ds{ transition:none !important; } }