/* ========================================================= SYROHCHEM — PREMIUM CORPORATE HEADER / NAVIGATION All selectors prefixed .sh-nav- — matches include/navbar.php exactly. Load in : ========================================================= */ :root{ --sh-navy-900:#0D0F3A; --sh-navy-800:#14164A; --sh-gold:#FFD400; /* logo yellow — primary accent */ --sh-gold-soft:#FFE666; /* lighter accent, consistent with the footer's --sf-gold-soft */ --sh-gold-deep:#B8960B; /* deeper yellow tone, used for hover text on white */ --sh-ink:#1A1D29; --sh-slate-600:#5B6472; --sh-line:rgba(13,15,58,0.08); --sh-glass-bg:#FFFFFF; --sh-glass-bg-scrolled:#FFFFFF; --sh-glass-border:rgba(13,15,58,0.08); --sh-white:#FFFFFF; --sh-header-h:100px; --sh-header-h-scrolled:78px; --sh-header-top:22px; --sh-font-display:'IBM Plex Sans', sans-serif; --sh-font-body:'Inter', sans-serif; --sh-ease:cubic-bezier(.22,1,.36,1); } .sh-nav-header *{ box-sizing:border-box; } #mainNav, #mainNav *{ box-sizing:border-box; } .sh-nav-header{ position:fixed; top:22px; left:0; right:0; z-index:9999; padding:0 24px; display:flex; justify-content:center; background:transparent; border-bottom:none; } .sh-hero-offset{ /* ========================================================= SINGLE NAVBAR OFFSET — this is the ONLY compensation for the fixed header height. Previously the hero-inner also added 190px of padding-top, causing a large gap between the navbar and hero text. Now all offset is consolidated here: header top margin (22px) + header height (100px) + a consistent gap (~20px) = content starts just below the navbar. The gap is slightly tighter than before so the heading begins approx 30–40px beneath the glass header. ========================================================= */ padding-top:calc(var(--sh-header-top) + var(--sh-header-h) + 20px); } .sh-nav-inner{ position:relative; width:100%; max-width:1400px; margin:0 auto; padding:0 18px 0 12px; display:flex; align-items:center; justify-content:space-between; height:var(--sh-header-h); background:var(--sh-glass-bg); border:1px solid var(--sh-glass-border); border-radius:22px; box-shadow: 0 24px 60px -18px rgba(13,15,58,.35), 0 4px 18px -6px rgba(255,212,0,.12), inset 0 1px 0 rgba(255,255,255,.6); transition:height .4s var(--sh-ease), background .4s var(--sh-ease), box-shadow .4s var(--sh-ease); } .sh-nav-fx{ position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; } .sh-nav-header.is-scrolled .sh-nav-inner{ height:var(--sh-header-h-scrolled); background:var(--sh-glass-bg-scrolled); box-shadow:0 20px 50px -16px rgba(13,15,58,.4), 0 2px 10px rgba(255,212,0,.10); } .sh-nav-lattice{ position:absolute; inset:-40% -10%; z-index:0; opacity:.5; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cg fill='none' stroke='%230D0F3A' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z'/%3E%3Ccircle cx='42' cy='48' r='2' fill='%23FFD400' fill-opacity='0.14' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); background-size:84px 96px; animation:sh-lattice-drift 34s linear infinite; } @keyframes sh-lattice-drift{ from{ transform:translate(0,0);} to{ transform:translate(-84px,-96px);} } .sh-nav-goldline{ position:absolute; left:6%; right:6%; bottom:0; height:2px; z-index:1; background:linear-gradient(90deg, transparent, var(--sh-gold), var(--sh-gold-soft), var(--sh-gold), transparent); transform:scaleX(0); transform-origin:center; animation:sh-line-grow 1.3s .35s var(--sh-ease) forwards; } @keyframes sh-line-grow{ to{ transform:scaleX(1); } } .sh-nav-brand{ position:relative; z-index:2; display:flex; align-items:center; flex:0 0 auto; padding:8px 20px 8px 10px; margin-right:20px; border-right:none; background:transparent; border:none; box-shadow:none; transition:transform .35s var(--sh-ease); } .sh-nav-brand:hover{ transform:translateY(-2px); } .sh-nav-brand img{ height:64px; width:auto; display:block; object-fit:contain; transition:height .35s var(--sh-ease); } .sh-nav-header.is-scrolled .sh-nav-brand img{ height:50px; } .sh-nav-header.is-scrolled .sh-nav-brand{ padding:6px 16px 6px 8px; } .sh-nav-main{ position:relative; z-index:2; flex:1 1 auto; display:flex; align-items:center; height:100%; min-width:0; } .sh-nav-main > ul{ display:flex; align-items:center; justify-content:center; gap:6px; list-style:none; margin:0; padding:0; height:100%; width:100%; min-width:0; flex-wrap:nowrap; } .sh-nav-main > ul > li{ height:100%; display:flex; align-items:center; } .sh-nav-has-dropdown{ position:relative; } .sh-nav-has-mega{ position:static; } .sh-nav-link{ display:flex; align-items:center; gap:7px; height:100%; font-family:var(--sh-font-body); font-size:14.5px; font-weight:600; letter-spacing:.3px; color:var(--sh-navy-900); padding:0 20px; transition:color .3s var(--sh-ease), transform .3s var(--sh-ease), text-shadow .3s var(--sh-ease); white-space:nowrap; position:relative; min-width:0; } .sh-nav-caret{ display:inline-block; flex:0 0 auto; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; opacity:.55; transform:rotate(45deg) translateY(-1px); transition:transform .3s var(--sh-ease), opacity .3s var(--sh-ease); } .sh-nav-link:hover .sh-nav-caret, .sh-nav-link.active .sh-nav-caret{ opacity:.8; } .sh-nav-has-dropdown:hover .sh-nav-caret, .sh-nav-has-mega:hover .sh-nav-caret, .sh-nav-has-dropdown.is-open .sh-nav-caret, .sh-nav-has-mega.is-open .sh-nav-caret{ transform:rotate(225deg) translateY(1px); } .sh-nav-link:hover, .sh-nav-link.active{ color:var(--sh-navy-900); transform:translateY(-2px); } .sh-nav-link.active::after, .sh-nav-link:hover::after{ content:''; position:absolute; left:20px; right:20px; bottom:20px; height:2.5px; border-radius:2px; background:linear-gradient(90deg, var(--sh-gold-soft), var(--sh-gold)); } .sh-nav-dropdown{ position:absolute; top:100%; left:0; margin:16px 0 0; padding:12px; list-style:none; min-width:300px; background:#FFFFFF; border:1px solid rgba(13,15,58,.08); border-radius:18px; box-shadow:0 30px 70px -16px rgba(13,15,58,.28), inset 0 1px 0 rgba(255,255,255,.7); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .3s var(--sh-ease), transform .3s var(--sh-ease), visibility .3s; z-index:9998; } @media (min-width:1181px){ .sh-nav-has-dropdown:hover .sh-nav-dropdown, .sh-nav-has-dropdown:focus-within .sh-nav-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } } .sh-nav-dropdown li a{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:12px; font-family:var(--sh-font-body); font-size:13.5px; font-weight:600; color:var(--sh-ink); border-left:none; transition:background .25s var(--sh-ease), color .25s var(--sh-ease), padding-left .25s var(--sh-ease); } .sh-nav-dropdown li a:hover{ background:linear-gradient(90deg, rgba(255,212,0,.20), transparent); color:var(--sh-navy-900); padding-left:18px; } .sh-nav-ico{ width:34px; height:34px; border-radius:10px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--sh-navy-900), var(--sh-navy-800)); border:1px solid rgba(255,212,0,.35); box-shadow:0 4px 10px -4px rgba(13,15,58,.45), inset 0 1px 0 rgba(255,255,255,.08); color:var(--sh-gold-soft); font-size:14px; transition:transform .25s var(--sh-ease), box-shadow .25s var(--sh-ease), border-color .25s var(--sh-ease); } .sh-nav-dropdown li a:hover .sh-nav-ico, .sh-nav-mega-col ul li a:hover .sh-nav-ico{ transform:translateY(-1px) scale(1.04); border-color:rgba(255,212,0,.65); box-shadow:0 6px 16px -4px rgba(255,212,0,.45), inset 0 1px 0 rgba(255,255,255,.12); color:var(--sh-gold); } /* --------------------------------------------------------- Products mega menu — contained floating white card --------------------------------------------------------- */ .sh-nav-mega{ position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%) translateY(10px); width:min(1200px, 94vw); margin:0; z-index:9997; background:#FFFFFF; border:1px solid rgba(13,15,58,.08); border-radius:20px; box-shadow:0 32px 76px -18px rgba(13,15,58,.30), inset 0 1px 0 rgba(255,255,255,.7); opacity:0; visibility:hidden; transition:opacity .3s var(--sh-ease), transform .3s var(--sh-ease), visibility .3s; padding:32px 36px; max-height:calc(100vh - var(--sh-header-top) - var(--sh-header-h) - 40px); overflow-y:auto; } .sh-nav-mega::before{ content:''; position:absolute; top:0; left:8%; right:8%; height:2px; background:linear-gradient(90deg, transparent, var(--sh-gold), transparent); border-radius:2px; } @media (min-width:1181px){ .sh-nav-has-mega:hover .sh-nav-mega, .sh-nav-has-mega:focus-within .sh-nav-mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } } .sh-nav-mega-inner{ max-width:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:26px; align-items:start; } .sh-nav-mega-col h5{ display:flex; align-items:center; gap:9px; font-family:var(--sh-font-display); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sh-gold-deep); margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--sh-line); } .sh-nav-mega-col h5 i{ font-size:13px; } .sh-nav-mega-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; } /* --------------------------------------------------------- Mega item "cards" — icon + stacked title/desc, matching the bold-title / lighter-description card style used elsewhere on the site (e.g. the "Manufacturing Excellence" feature cards). Kept align-items:flex-start (not center) now that each item holds two lines instead of one, so the icon lines up with the top of the title rather than the vertical midpoint of both lines. --------------------------------------------------------- */ .sh-nav-mega-col ul li a{ display:flex; align-items:flex-start; gap:12px; padding:10px 9px; border-radius:12px; border:1px solid transparent; transition:background .25s var(--sh-ease), border-color .25s var(--sh-ease), transform .25s var(--sh-ease), color .25s var(--sh-ease); } .sh-nav-mega-col ul li a:hover{ background:linear-gradient(160deg,#FFFCF0,rgba(255,212,0,.10)); border-color:rgba(255,212,0,.5); transform:translateY(-2px); color:var(--sh-navy-900); } .sh-nav-mega-col ul li a .sh-nav-ico{ margin-top:1px; } .sh-nav-item-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; } .sh-nav-item-text{ font-family:var(--sh-font-display); font-size:13px; font-weight:700; line-height:1.3; color:var(--sh-navy-900); } .sh-nav-item-desc{ font-family:var(--sh-font-body); font-size:11px; font-weight:500; letter-spacing:.02em; line-height:1.3; color:var(--sh-slate-600); } .sh-nav-mega-col ul li a:hover .sh-nav-item-desc{ color:var(--sh-gold-deep); } .sh-nav-mega-col ul li a .sh-nav-arrow{ font-size:17px; color:var(--sh-gold); flex:0 0 auto; margin-top:2px; opacity:0; transform:translateX(-6px); transition:opacity .25s var(--sh-ease), transform .25s var(--sh-ease); } .sh-nav-mega-col ul li a:hover .sh-nav-arrow{ opacity:1; transform:translateX(0); } .sh-nav-mega-cta-col{ background:linear-gradient(165deg,#FAFAFC,rgba(255,212,0,.08)); border:1px solid var(--sh-line); border-radius:14px; padding:20px; } .sh-nav-mega-cta-col h5{ border-bottom-color:rgba(255,212,0,.35); } .sh-nav-mega-cta-col p{ font-family:var(--sh-font-body); font-size:12.5px; line-height:1.7; color:var(--sh-slate-600); margin:0 0 16px; } .sh-nav-mega-cta{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px; font-family:var(--sh-font-body); font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--sh-navy-900) 0%, var(--sh-navy-800) 100%); border:1.5px solid var(--sh-gold); padding:11px 20px; border-radius:10px; box-shadow:0 10px 24px -8px rgba(13,15,58,.5); transition:transform .3s var(--sh-ease), box-shadow .3s var(--sh-ease); } .sh-nav-mega-cta::before{ content:''; position:absolute; top:0; left:-60%; width:35%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent); transform:skewX(-18deg); transition:left .6s var(--sh-ease); } .sh-nav-mega-cta:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(13,15,58,.55); color:#fff; } .sh-nav-mega-cta:hover::before{ left:130%; } .sh-nav-mega-footer{ margin-top:24px; padding-top:22px; border-top:1px solid var(--sh-line); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .sh-nav-mega-footer p{ font-family:var(--sh-font-body); font-size:12.5px; line-height:1.6; color:var(--sh-slate-600); margin:0; max-width:520px; } .sh-nav-actions{ position:relative; z-index:2; flex:0 0 auto; display:flex; align-items:center; gap:18px; margin-left:16px; } .sh-nav-cta-btn{ display:none; } .sh-nav-lang{ position:relative; z-index:2; flex:0 0 auto; } .sh-nav-lang-trigger{ position:relative; display:flex; align-items:center; gap:9px; height:100%; font-family:var(--sh-font-body); font-size:14.5px; font-weight:600; letter-spacing:.3px; color:var(--sh-navy-900); padding:0 20px; border-radius:12px; background:transparent; border:none; cursor:pointer; transition:color .3s var(--sh-ease), transform .3s var(--sh-ease); white-space:nowrap; } .sh-nav-lang-trigger .sh-nav-caret{ margin-top:1px; } .sh-nav-lang-trigger::after{ content:''; position:absolute; left:20px; right:20px; bottom:20px; height:2.5px; border-radius:2px; background:linear-gradient(90deg, var(--sh-gold-soft), var(--sh-gold)); opacity:0; transform:translateY(4px); transition:opacity .25s var(--sh-ease), transform .25s var(--sh-ease); } .sh-nav-lang-trigger:hover::after, .sh-nav-lang-trigger.is-active::after{ opacity:1; transform:translateY(0); } .sh-nav-lang-trigger:hover, .sh-nav-lang-trigger.is-active{ color:var(--sh-navy-900); transform:translateY(-2px); } .sh-nav-lang-trigger:hover .sh-nav-caret, .sh-nav-lang-trigger.is-active .sh-nav-caret{ transform:rotate(225deg) translateY(1px); } .sh-nav-lang-flag{ width:22px; display:inline-flex; justify-content:center; align-items:center; flex:0 0 auto; } .sh-nav-lang-flag .flag-icon{ width:22px; height:16px; } .sh-nav-lang-text{ line-height:1; } .sh-nav-lang-dropdown{ position:absolute; top:calc(100% + 16px); right:0; min-width:420px; background:#FFFFFF; border:1px solid rgba(13,15,58,.08); border-radius:18px; box-shadow:0 30px 70px -16px rgba(13,15,58,.28), inset 0 1px 0 rgba(255,255,255,.7); opacity:0; visibility:hidden; transform:translateY(10px) scale(.99); transition:opacity .28s var(--sh-ease), transform .28s var(--sh-ease), visibility .28s; z-index:9998; padding:14px; } .sh-nav-lang.is-open .sh-nav-lang-dropdown{ opacity:1; visibility:visible; transform:translateY(0) scale(1); } .sh-nav-lang-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; padding:8px; } .sh-nav-lang-option{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; text-decoration:none !important; border:1px solid transparent; transition:background .25s var(--sh-ease), border-color .25s var(--sh-ease), transform .25s var(--sh-ease), color .25s var(--sh-ease); font-family:var(--sh-font-body); font-size:13.5px; font-weight:600; color:var(--sh-ink); } .sh-nav-lang-option:hover{ background:linear-gradient(90deg, rgba(255,212,0,.20), transparent); border-color:rgba(255,212,0,.45); transform:translateY(-2px); color:var(--sh-navy-900); } .sh-nav-lang-option-flag{ width:26px; display:flex; justify-content:center; } @media (prefers-reduced-motion:reduce){ .sh-nav-lang-dropdown{ transition:none; } .sh-nav-lang-option{ transition:none; } } /* --------------------------------------------------------- FIX: below 1180px the language switcher stays put in the fixed header bar next to the hamburger button (it is NOT part of the sliding #mainNav panel — see navbar.php markup), so it must remain a compact, auto-width button here rather than width:100%. The dropdown panel itself is already position:fixed + centered below, so it doesn't need the trigger to be full width to work correctly. --------------------------------------------------------- */ @media (max-width:1180px){ .sh-nav-lang{ width:auto; flex:0 0 auto; } .sh-nav-lang-trigger{ width:auto; height:44px; padding:0 14px; justify-content:center; border-radius:12px; background:rgba(13,15,58,.03); border:1px solid var(--sh-line); } .sh-nav-lang-dropdown{ position:fixed; top:calc(var(--sh-header-top) + var(--sh-header-h) + 10px); left:50%; transform:translateX(-50%) translateY(-8px); min-width:0; width:min(94vw, 420px); margin:0; box-shadow:0 30px 70px -16px rgba(13,15,58,.35); border:1px solid rgba(13,15,58,.08); background:#FFFFFF; padding:8px; opacity:0; visibility:hidden; transition:opacity .25s var(--sh-ease), transform .25s var(--sh-ease), visibility .25s; border-radius:16px; z-index:10001; max-height:calc(100vh - var(--sh-header-top) - var(--sh-header-h) - 20px); overflow-y:auto; } .sh-nav-lang.is-open .sh-nav-lang-dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .sh-nav-lang-grid{ padding:6px; gap:10px 10px; } .sh-nav-lang.is-open::before{ content:''; position:fixed; inset:0; background:rgba(13,15,58,.35); z-index:10000; } } /* Keep the header row from ever overflowing: brand + lang + toggle must fit on one line down to the smallest phones. */ .sh-nav-inner{ flex-wrap:nowrap; } .sh-nav-actions{ flex-wrap:nowrap; } .sh-nav-toggle{ display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; border-radius:12px; background:rgba(13,15,58,.03); border:1px solid var(--sh-line); cursor:pointer; padding:0; flex:0 0 auto; } .sh-nav-toggle span{ display:block; width:18px; height:2px; background:var(--sh-navy-900); border-radius:2px; transition:transform .3s var(--sh-ease), opacity .3s var(--sh-ease); } .sh-nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .sh-nav-toggle.is-active span:nth-child(2){ opacity:0; } .sh-nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } .sh-nav-close{ display:none; position:absolute; top:28px; right:24px; z-index:1; width:40px; height:40px; border-radius:12px; align-items:center; justify-content:center; background:rgba(13,15,58,.04); border:1px solid var(--sh-line); cursor:pointer; padding:0; } .sh-nav-close span{ position:absolute; width:18px; height:2px; background:var(--sh-navy-900); border-radius:2px; } .sh-nav-close span:nth-child(1){ transform:rotate(45deg); } .sh-nav-close span:nth-child(2){ transform:rotate(-45deg); } .sh-nav-close:hover{ background:rgba(255,212,0,.18); border-color:rgba(255,212,0,.4); } .sh-nav-close:hover span{ background:var(--sh-gold-deep); } .sh-nav-link, .sh-nav-dropdown li a, .sh-nav-mega-col ul li a, .sh-nav-mega-cta{ text-decoration:none !important; border-bottom:none !important; } @media (max-width:1400px){ .sh-nav-main > ul{ gap:0; } .sh-nav-link{ padding:0 14px; font-size:14px; } .sh-nav-mega-inner{ gap:20px; } .sh-nav-brand{ padding-right:16px; margin-right:12px; } .sh-nav-brand img{ height:54px; } } /* --------------------------------------------------------- NEW: small-laptop / large-tablet range just above the hamburger breakpoint. The mega menu's 4-column grid gets uncomfortably tight here, so drop it to 2 columns while the full desktop nav is still visible (nav itself already fits thanks to shrinking padding/gap above). --------------------------------------------------------- */ @media (max-width:1280px){ .sh-nav-mega-inner{ grid-template-columns:repeat(2, 1fr); gap:22px 28px; } .sh-nav-mega{ padding:28px 30px; } } @media (max-width:1180px){ :root{ --sh-header-h:84px; --sh-header-h-scrolled:70px; --sh-header-top:14px; } .sh-nav-header{ top:14px; padding:0 14px; } .sh-nav-inner{ border-radius:18px; padding:0 12px 0 10px; } .sh-nav-cta-btn{ display:none; } .sh-nav-toggle{ display:flex; } .sh-nav-close{ display:flex; } .sh-nav-brand{ border-right:none; padding-right:10px; } .sh-nav-brand img{ height:44px; } .sh-nav-header.is-scrolled .sh-nav-brand img{ height:38px; } .sh-nav-main{ position:fixed; top:0; right:0; bottom:0; width:min(400px, 88vw); background:#FFFFFF; border-left:1px solid rgba(13,15,58,.08); padding:110px 0 32px; overflow-y:auto; -webkit-overflow-scrolling:touch; transform:translateX(100%); transition:transform .4s var(--sh-ease); z-index:10000; height:auto; display:block; box-shadow:-20px 0 60px rgba(13,15,58,.25); } .sh-nav-main.is-open{ transform:translateX(0); } .sh-nav-main > ul{ flex-direction:column; align-items:stretch; gap:0; height:auto; } .sh-nav-main > ul > li{ border-bottom:1px solid var(--sh-line); height:auto; display:block; } .sh-nav-link{ padding:18px 30px; font-size:15.5px; justify-content:space-between; height:auto; } .sh-nav-link.active::after, .sh-nav-link:hover::after{ left:30px; right:30px; bottom:14px; } .sh-nav-link.active{ color:var(--sh-navy-900); } .sh-nav-has-dropdown .sh-nav-dropdown, .sh-nav-has-mega .sh-nav-mega{ position:static; opacity:1; transform:none; box-shadow:none; border:none; border-radius:0; background:#FAFAFC; padding:4px 0 12px; margin:0; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--sh-ease), padding .35s var(--sh-ease), visibility 0s linear .35s; } .sh-nav-has-dropdown.is-open .sh-nav-dropdown, .sh-nav-has-mega.is-open .sh-nav-mega{ max-height:2200px; padding:4px 0 20px; visibility:visible; transition:max-height .35s var(--sh-ease), padding .35s var(--sh-ease), visibility 0s linear 0s; } .sh-nav-has-dropdown:hover .sh-nav-dropdown, .sh-nav-has-dropdown:focus-within .sh-nav-dropdown, .sh-nav-has-mega:hover .sh-nav-mega, .sh-nav-has-mega:focus-within .sh-nav-mega{ transform:none; opacity:1; } .sh-nav-has-mega.is-open .sh-nav-mega{ width:100%; max-height:2200px; overflow:visible; } .sh-nav-mega-inner{ display:block; padding:0 30px; } .sh-nav-mega-inner{ grid-template-columns:1fr; } .sh-nav-mega-col{ margin-bottom:22px; } .sh-nav-mega-cta-col{ background:transparent; border:none; padding:0 30px; } .sh-nav-mega-footer{ padding:0 30px; margin-top:12px; border-top:none; } .sh-nav-dropdown{ position:static; margin:0; border-radius:0; border:none; box-shadow:none; padding:0 18px; } .sh-nav-backdrop{ position:fixed; inset:0; background:rgba(13,15,58,.45); opacity:0; visibility:hidden; transition:opacity .3s var(--sh-ease), visibility .3s; z-index:9999; } .sh-nav-backdrop.is-open{ opacity:1; visibility:visible; } } /* --------------------------------------------------------- NEW: tablet/phone landscape and the ~600–768px band where a single-column mobile menu already applies but the header row itself still needs a touch more breathing room. --------------------------------------------------------- */ @media (max-width:640px){ .sh-nav-header{ padding:0 12px; } .sh-nav-actions{ gap:10px; margin-left:8px; } } @media (max-width:480px){ .sh-nav-header{ top:10px; padding:0 10px; } :root{ --sh-header-top:10px; } .sh-nav-inner{ padding:0 8px 0 8px; border-radius:16px; } .sh-nav-brand{ padding:6px 10px 6px 6px; margin-right:8px; } .sh-nav-toggle{ width:40px; height:40px; } .sh-nav-close{ width:36px; height:36px; top:20px; right:16px; } .sh-nav-main{ width:100%; padding-top:96px; } .sh-nav-link{ padding:16px 20px; font-size:15px; } .sh-nav-mega-inner{ padding:0 20px; } .sh-nav-mega-cta-col{ padding:0 20px; } .sh-nav-dropdown{ padding:0 12px; min-width:0; } .sh-nav-lang-trigger{ padding:0 12px; } .sh-nav-lang-dropdown{ width:92vw; } .sh-nav-lang-grid{ grid-template-columns:1fr; padding:10px 6px; } } /* --------------------------------------------------------- NEW: guards the smallest common phone widths (iPhone SE / older Android, 320–380px) where brand logo + language button + hamburger can get tight on one row. Trim the flag+chevron button down to an icon-only control and shrink the logo a little further so nothing wraps or overflows horizontally. --------------------------------------------------------- */ @media (max-width:380px){ .sh-nav-lang-text{ display:none; } .sh-nav-lang-trigger{ padding:0 10px; gap:6px; } .sh-nav-lang-trigger .sh-nav-caret{ display:none; } .sh-nav-brand img{ height:34px; } .sh-nav-brand{ margin-right:6px; padding:6px 8px 6px 4px; } } @media (max-width:420px){ .sh-nav-brand img{ height:38px; } .sh-nav-main{ width:100%; } } @media (max-width:1180px) and (max-height:480px){ .sh-nav-main{ padding-top:80px; padding-bottom:20px; } .sh-nav-link{ padding-top:12px; padding-bottom:12px; } } @media (prefers-reduced-motion:reduce){ .sh-nav-lattice, .sh-nav-goldline, .sh-nav-cta-btn::before, .sh-nav-mega-cta::before{ animation:none; transition:none; } } .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, body > .skiptranslate{ display:none !important; } body{ top:0 !important; position:static !important; } .sh-nav-has-dropdown.sh-nav-force-close:hover .sh-nav-dropdown, .sh-nav-has-dropdown.sh-nav-force-close:focus-within .sh-nav-dropdown, .sh-nav-has-mega.sh-nav-force-close:hover .sh-nav-mega, .sh-nav-has-mega.sh-nav-force-close:focus-within .sh-nav-mega{ opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transform:translateY(10px) !important; }