/* ===================================================================== Nuggetts EAM — shared site chrome (header + footer + theme bridge) Self-contained, namespaced (.sh-*). No dependency on Tailwind / FA / Lucide. Loaded last in on every page so it wins the cascade. ===================================================================== */ /* ---- shared chrome palette (independent of each page's own vars) ---- */ :root{ --sh-bar:rgba(255,255,255,.82); --sh-bar-solid:#ffffff; --sh-fg:#0a1330; --sh-muted:#3a4668; --sh-blue:#146CFF; --sh-blue-deep:#0b256e; --sh-navy:#071A52; --sh-border:rgba(7,26,82,.10); --sh-border-2:rgba(7,26,82,.14); --sh-panel:#ffffff; --sh-panel-hover:#f1f5ff; --sh-shadow:0 12px 34px -18px rgba(7,26,82,.45); --sh-foot-bg:#f4f7fc; } html.dark{ --sh-bar:rgba(8,15,38,.78); --sh-bar-solid:#0b1430; --sh-fg:#eaf0ff; --sh-muted:#aebbe0; --sh-blue:#5b9bff; --sh-blue-deep:#3b86ff; --sh-navy:#cdd9ff; --sh-border:rgba(120,160,255,.16); --sh-border-2:rgba(120,160,255,.22); --sh-panel:#0e1838; --sh-panel-hover:#142150; --sh-shadow:0 12px 34px -18px rgba(0,0,0,.7); --sh-foot-bg:#070b22; } /* ---- hide each page's ORIGINAL header/footer/mobile menus ---- */ #header, header.nav-blur, #drawer, #mnav, footer:not(.sh-foot){ display:none !important; } /* ====================== HEADER ====================== */ .sh-nav{ position:fixed; top:0; left:0; right:0; z-index:1000; height:64px; background:var(--sh-bar); -webkit-backdrop-filter:saturate(150%) blur(16px); backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid var(--sh-border); font-family:'DM Sans',system-ui,sans-serif; transition:background .3s ease, border-color .3s ease; } .sh-wrap{ max-width:1240px; margin:0 auto; height:100%; padding:0 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; } .sh-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; } .sh-logo{ width:36px; height:36px; border-radius:9px; box-shadow:0 4px 10px rgba(7,26,82,.18); object-fit:cover; } .sh-word{ font-family:'Syne',sans-serif; font-weight:800; font-size:20px; line-height:1; color:var(--sh-fg); display:block; } .sh-word small{ display:block; font-family:'DM Mono',monospace; font-weight:500; font-size:9px; letter-spacing:.26em; color:var(--sh-blue); margin-top:3px; } .sh-menu{ display:flex; align-items:center; gap:2px; } .sh-link{ position:relative; display:inline-flex; align-items:center; gap:5px; font-size:14.5px; font-weight:600; color:var(--sh-muted); text-decoration:none; padding:9px 13px; border-radius:10px; background:none; border:0; cursor:pointer; font-family:inherit; transition:color .2s, background .2s; } .sh-link:hover{ color:var(--sh-blue); background:rgba(20,108,255,.08); } .sh-link.active{ color:var(--sh-blue); background:rgba(20,108,255,.11); font-weight:700; } /* Solutions dropdown */ .sh-drop{ position:relative; } /* invisible hover bridge so moving the cursor across the gap from toggle to panel keeps .sh-drop:hover alive — keeps the dropdown open on hover */ .sh-drop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:16px; } .sh-chev{ width:14px; height:14px; transition:transform .25s; } .sh-drop:hover .sh-chev, .sh-drop.open .sh-chev{ transform:rotate(180deg); } .sh-panel{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); width:460px; background:var(--sh-panel); border:1px solid var(--sh-border); border-radius:16px; box-shadow:var(--sh-shadow); padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:4px; opacity:0; visibility:hidden; pointer-events:none; transition:.24s cubic-bezier(.22,.61,.36,1); } .sh-drop:hover .sh-panel, .sh-drop.open .sh-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } .sh-panel-item{ display:flex; gap:11px; align-items:flex-start; padding:11px; border-radius:11px; text-decoration:none; transition:background .18s; } .sh-panel-item:hover{ background:var(--sh-panel-hover); } .sh-pico{ flex:0 0 34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; } .sh-pico svg{ width:17px; height:17px; } .sh-panel-item b{ display:block; font-size:13.5px; font-weight:700; color:var(--sh-fg); } .sh-panel-item i{ display:block; font-style:normal; font-size:11.5px; color:var(--sh-muted); margin-top:2px; line-height:1.35; } /* right side */ .sh-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } .sh-toggle{ width:40px; height:40px; border-radius:11px; border:1px solid var(--sh-border); background:transparent; color:var(--sh-fg); cursor:pointer; display:grid; place-items:center; transition:.2s; } .sh-toggle:hover{ border-color:var(--sh-blue); color:var(--sh-blue); } .sh-toggle svg{ width:18px; height:18px; } .sh-sun{ display:none; } html.dark .sh-sun{ display:block; } html.dark .sh-moon{ display:none; } .sh-btn{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:14px; font-weight:600; padding:10px 18px; border-radius:11px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:.2s; white-space:nowrap; } .sh-btn-ghost{ color:var(--sh-fg); border-color:var(--sh-border-2); background:transparent; } .sh-btn-ghost:hover{ border-color:var(--sh-blue); color:var(--sh-blue); background:rgba(20,108,255,.06); } .sh-btn-primary{ color:#fff; background:linear-gradient(135deg,var(--sh-blue) 0%, var(--sh-blue-deep) 100%); box-shadow:0 10px 24px -12px rgba(20,108,255,.6); } .sh-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 34px -12px rgba(20,108,255,.7); } .sh-btn svg{ width:15px; height:15px; } .sh-burger{ display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--sh-border); background:transparent; color:var(--sh-fg); cursor:pointer; place-items:center; } .sh-burger svg{ width:22px; height:22px; } /* ---- mobile drawer ---- */ .sh-drawer{ position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:1100; background:var(--sh-bar-solid); border-left:1px solid var(--sh-border); box-shadow:-30px 0 80px -30px rgba(7,26,82,.5); transform:translateX(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); padding:78px 22px 28px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; font-family:'DM Sans',sans-serif; } .sh-drawer.open{ transform:translateX(0); } .sh-drawer-close{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:11px; border:1px solid var(--sh-border); background:transparent; color:var(--sh-fg); cursor:pointer; display:grid; place-items:center; } .sh-drawer-close svg{ width:20px; height:20px; } .sh-dlink{ font-size:16px; font-weight:600; color:var(--sh-fg); text-decoration:none; padding:12px 12px; border-radius:11px; } .sh-dlink:hover, .sh-dlink.active{ color:var(--sh-blue); background:rgba(20,108,255,.08); } .sh-dgroup{ font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sh-muted); padding:14px 12px 4px; } .sh-dsub{ padding-left:24px; font-weight:500; font-size:15px; } .sh-drawer .sh-btn{ justify-content:center; margin-top:8px; } .sh-scrim{ position:fixed; inset:0; z-index:1090; background:rgba(7,16,40,.45); opacity:0; visibility:hidden; transition:.3s; } .sh-scrim.open{ opacity:1; visibility:visible; } /* ====================== FOOTER ====================== */ .sh-foot{ background:var(--sh-foot-bg); border-top:1px solid var(--sh-border); color:var(--sh-muted); font-family:'DM Sans',sans-serif; padding:56px 22px 28px; margin-top:0; } .sh-foot-wrap{ max-width:1240px; margin:0 auto; } .sh-foot-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; } .sh-foot-brand .sh-brand{ margin-bottom:14px; } .sh-foot-brand p{ font-size:14px; line-height:1.6; max-width:30ch; margin:0 0 16px; } .sh-foot-contact{ font-size:13.5px; line-height:1.9; } .sh-foot-contact a{ color:var(--sh-muted); text-decoration:none; } .sh-foot-contact a:hover{ color:var(--sh-blue); } .sh-fcol h5{ font-family:'Syne',sans-serif; font-size:13px; font-weight:700; color:var(--sh-fg); margin:0 0 14px; letter-spacing:.02em; } .sh-fcol a{ display:block; font-size:14px; color:var(--sh-muted); text-decoration:none; padding:5px 0; } .sh-fcol a:hover{ color:var(--sh-blue); } .sh-foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--sh-border); font-size:13px; } .sh-social{ display:flex; gap:10px; } .sh-social a{ width:38px; height:38px; border-radius:10px; border:1px solid var(--sh-border); display:grid; place-items:center; color:var(--sh-muted); } .sh-social a:hover{ color:var(--sh-blue); border-color:var(--sh-blue); } .sh-social svg{ width:17px; height:17px; } /* ====================== RESPONSIVE ====================== */ @media (max-width:1024px){ .sh-menu, .sh-cta .sh-btn, .sh-cta .sh-toggle{ display:none; } .sh-burger{ display:grid; } .sh-foot-top{ grid-template-columns:1fr 1fr; gap:28px; } } @media (max-width:560px){ .sh-word small{ display:none; } .sh-foot-top{ grid-template-columns:1fr; } }