/* ── header.css ── */ /* Desklog header styles. Loaded in BEFORE any other stylesheet so the sticky header renders with its final styles on the first paint — otherwise the header briefly renders as unstyled boxes while bootstrap/main/theme CSS is still being parsed, causing a visible layout shift. */ :root{ --dlh-green:#84C341; --dlh-green-d:#6ea836; --dlh-navy:#0B2046; --dlh-navy-2:#1c3050; --dlh-ink:#243043; --dlh-muted:#5c6b7e; --dlh-line:#e7ebf1; --dlh-line-soft:#eef1f6; --dlh-tint-green:#f3f9ea; --dlh-tint-navy:#eef2f8; --dlh-shadow:0 18px 50px -18px rgba(11,32,70,.30); } .dl-hdr *,.dl-hdr-drawer *{box-sizing:border-box} .dl-hdr{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:1px solid var(--dlh-line);font-family:'Inter','Poppins',system-ui,sans-serif} .dl-hdr-bar{max-width:1320px;margin:0 auto;padding:0 26px;height:74px;display:flex;align-items:center;gap:24px} .dl-hdr-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;width:160px;height:40px} .dl-hdr-logo img{display:block;width:160px;height:40px;object-fit:contain} .dl-hdr-logotext{font-weight:700;font-size:22px;color:var(--dlh-navy);letter-spacing:-.3px} .dl-hdr-logotext span{color:var(--dlh-green);font-weight:500} .dl-hdr-nav{display:flex;align-items:center;gap:2px;flex:1} .dl-hdr-item{position:relative} .dl-hdr-link{background:none;border:none;font-family:inherit;cursor:pointer;font-size:15px;font-weight:500;color:var(--dlh-ink);padding:10px 13px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:color .15s,background .15s;line-height:1.2} .dl-hdr-link:hover,.dl-hdr-item.is-open>.dl-hdr-link,.dl-hdr-item:hover>.dl-hdr-link{color:var(--dlh-green-d);background:var(--dlh-tint-green)} .dl-hdr-chev{width:11px;height:11px;transition:transform .2s} .dl-hdr-item.is-open .dl-hdr-chev,.dl-hdr-item:hover .dl-hdr-chev{transform:rotate(180deg)} .dl-hdr-actions{display:flex;align-items:center;gap:13px;flex-shrink:0;height:44px} .dl-hdr-ghost{font-size:15px;font-weight:500;color:var(--dlh-ink);text-decoration:none;padding:8px 4px;font-family:inherit;line-height:1.2;display:inline-flex;align-items:center;height:100%} .dl-hdr-ghost:hover{color:var(--dlh-green-d)} .dl-hdr-ghost-green{color:var(--dlh-green-d);font-weight:600} .dl-hdr-ghost-green:hover{color:var(--dlh-navy)} .dl-hdr-btn{font-family:inherit;font-size:15px;font-weight:600;border-radius:11px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:background .15s, border-color .15s, color .15s;line-height:1;white-space:nowrap;height:42px;box-sizing:border-box} .dl-hdr-btn svg{width:14px;height:14px;flex-shrink:0} .dl-hdr-btn-outline{padding:0 22px;border:1.5px solid #d6dde7;color:var(--dlh-ink);background:#fff} .dl-hdr-btn-outline:hover{border-color:var(--dlh-green);color:var(--dlh-green-d)} .dl-hdr-btn-green{padding:0 22px;background:var(--dlh-green);color:#fff;border:1.5px solid var(--dlh-green);box-shadow:0 8px 18px -8px rgba(132,195,65,.7)} .dl-hdr-btn-green:hover{background:var(--dlh-green-d);border-color:var(--dlh-green-d);color:#fff} .dl-hdr-panel{ position:absolute;left:50%;top:calc(100% + 14px); transform:translateX(-50%) translateY(8px); background:#fff;border:1px solid var(--dlh-line);border-radius:14px;box-shadow:var(--dlh-shadow); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .dl-hdr-item.is-open>.dl-hdr-panel, .dl-hdr-item:hover>.dl-hdr-panel, .dl-hdr-item:focus-within>.dl-hdr-panel{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0); transition:opacity .18s ease, transform .18s ease, visibility 0s; } .dl-hdr-item>.dl-hdr-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .dl-hdr-nav{position:relative} .dl-hdr-item{position:static} .dl-hdr-panel.dl-hdr-align-left{left:50%;right:auto;transform:translateX(-50%) translateY(8px)} .dl-hdr-item.is-open>.dl-hdr-panel.dl-hdr-align-left, .dl-hdr-item:hover>.dl-hdr-panel.dl-hdr-align-left, .dl-hdr-item:focus-within>.dl-hdr-panel.dl-hdr-align-left{transform:translateX(-50%) translateY(0)} .dl-hdr-collabel{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9aa6b4;padding-bottom:11px;margin-bottom:6px;border-bottom:1px solid var(--dlh-line-soft)} .dl-hdr-feat{display:flex;gap:12px;padding:10px 11px;border-radius:11px;text-decoration:none;transition:background .14s;align-items:flex-start} .dl-hdr-feat:hover{background:var(--dlh-tint-green);text-decoration:none} .dl-hdr-ico{width:34px;height:34px;border-radius:9px;background:var(--dlh-tint-navy);display:grid;place-items:center;flex-shrink:0;color:var(--dlh-navy);transition:.14s} .dl-hdr-feat:hover .dl-hdr-ico{background:#e4f0d0;color:var(--dlh-green-d)} .dl-hdr-ico svg{width:17px;height:17px;stroke-width:1.7} /* !important guards these against migrated-page inline styles that set global h1..h6/p rules with !important (e.g. /desklog-vs-desktime). */ .dl-hdr-feat h4,.dl-hdr-feat .dl-hdr-feat-title{font-size:14px!important;font-weight:600!important;color:var(--dlh-ink)!important;margin:0 0 2px!important;line-height:1.2!important} .dl-hdr-feat p{font-size:12.4px!important;color:var(--dlh-muted)!important;line-height:1.35!important;margin:0!important} .dl-hdr-panel-product{width:1120px;display:grid;grid-template-columns:230px 1fr 280px} .dl-hdr-tabs{padding:20px 14px;border-right:1px solid var(--dlh-line-soft);background:#fbfcfe;border-radius:14px 0 0 14px} .dl-hdr-tab{width:100%;text-align:left;background:none;border:none;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--dlh-ink);transition:.14s;margin-bottom:2px} .dl-hdr-arr{width:13px;height:13px;opacity:0;transition:.14s;color:var(--dlh-green-d)} .dl-hdr-tab:hover,.dl-hdr-tab.is-active{background:#fff;color:var(--dlh-green-d);box-shadow:0 2px 10px -4px rgba(11,32,70,.14)} .dl-hdr-tab.is-active .dl-hdr-arr,.dl-hdr-tab:hover .dl-hdr-arr{opacity:1} .dl-hdr-mini{margin-top:12px;padding-top:12px;border-top:1px solid var(--dlh-line-soft);display:flex;flex-direction:column;gap:3px} .dl-hdr-mini a{font-size:12.8px;color:var(--dlh-muted);text-decoration:none;padding:6px 12px;border-radius:8px;display:flex;align-items:center;gap:7px} .dl-hdr-mini a svg{width:14px;height:14px} .dl-hdr-mini a:hover{color:var(--dlh-green-d);background:var(--dlh-tint-green)} .dl-hdr-grid{padding:18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:2px;align-content:start} .dl-hdr-pane{display:none} .dl-hdr-pane.is-active{display:contents} .dl-hdr-promo{padding:22px 20px;display:flex;flex-direction:column;gap:10px} .dl-hdr-promo-product{border-radius:0 14px 14px 0;background:linear-gradient(165deg,var(--dlh-tint-green),#fcfefa)} .dl-hdr-promo-img{background:transparent;display:flex;align-items:center;justify-content:center;padding:6px 0 4px} .dl-hdr-promo-img img{max-width:100%;height:auto;max-height:130px;display:block;object-fit:contain} .dl-hdr-promo h3,.dl-hdr-promo .dl-hdr-promo-title{font-size:17px!important;font-weight:700!important;line-height:1.3!important;margin:6px 0 2px!important;color:var(--dlh-navy)!important} .dl-hdr-promo h3 .g,.dl-hdr-promo .dl-hdr-promo-title .g{color:var(--dlh-green-d)} .dl-hdr-promo h3 .n,.dl-hdr-promo .dl-hdr-promo-title .n{color:var(--dlh-navy)} .dl-hdr-promo p{font-size:12.8px!important;color:var(--dlh-muted)!important;line-height:1.5!important;margin:0!important} .dl-hdr-pills{font-size:12.8px;font-weight:600;color:var(--dlh-ink);margin:6px 0 4px} .dl-hdr-promo-cta{margin-top:6px;width:auto;align-self:flex-start;padding:10px 22px} .dl-hdr-promo-link{color:var(--dlh-green-d);font-weight:600;text-decoration:none;font-size:13px;margin-top:6px} .dl-hdr-promo-link:hover{text-decoration:underline} .dl-hdr-promo-stores{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap} .dl-hdr-store-btn{flex:1 1 130px;min-width:0;display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff;text-decoration:none;padding:8px 12px;border-radius:9px;line-height:1.1;transition:background .15s} .dl-hdr-store-btn:hover{background:#000;color:#fff} .dl-hdr-store-btn svg{width:20px;height:20px;flex-shrink:0} .dl-hdr-store-btn span{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;letter-spacing:.02em} .dl-hdr-store-btn small{font-size:8.5px;font-weight:500;opacity:.85;letter-spacing:.05em;text-transform:uppercase} .dl-hdr-store-btn b{font-size:13px;font-weight:700;line-height:1.15} .dl-hdr-panel-cols{width:1180px;display:grid;grid-template-columns:1fr 1fr 1fr 270px} .dl-hdr-scol{padding:22px 18px;border-right:1px solid var(--dlh-line-soft)} .dl-hdr-linkrow{display:flex;flex-direction:column;gap:1px;margin-top:5px} .dl-hdr-promo-solutions{border-radius:0 14px 14px 0;background:linear-gradient(165deg,var(--dlh-tint-green),#fcfefa)} .dl-hdr-badge{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--dlh-green-d);background:#fff;border:1px solid #d8e8c2;padding:6px 11px;border-radius:999px;margin-bottom:13px;align-self:flex-start} .dl-hdr-promo-solutions .dl-hdr-ghost{color:var(--dlh-green-d);font-weight:600;margin-top:13px;padding:0;text-decoration:none} .dl-hdr-badgenew{font-size:9px;font-weight:700;color:#fff;background:var(--dlh-green);padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle;letter-spacing:.04em} .dl-hdr-promo-resources{border-radius:0 14px 14px 0;background:linear-gradient(165deg,var(--dlh-tint-navy),#fbfdff)} .dl-hdr-hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;margin-left:auto} .dl-hdr-hamburger span{display:block;width:22px;height:2px;background:var(--dlh-navy);border-radius:2px;transition:.2s} .dl-hdr-drawer{position:fixed;top:0;right:0;height:100vh;width:100vw;max-width:100%;background:#fff;z-index:1100;transform:translateX(100%);transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;display:flex;flex-direction:column;box-shadow:none;font-family:'Inter','Poppins',system-ui,sans-serif} @media (min-width:640px){.dl-hdr-drawer{width:min(420px,92vw)}} .dl-hdr-drawer.is-open{transform:translateX(0);box-shadow:-24px 0 48px -20px rgba(11,32,70,.28)} .dl-hdr-drawer-scrim{position:fixed;inset:0;background:rgba(11,32,70,.45);backdrop-filter:blur(2px);z-index:1099;opacity:0;visibility:hidden;transition:.28s} .dl-hdr-drawer-scrim.is-open{opacity:1;visibility:visible} body.dl-hdr-lock{overflow:hidden} .dl-hdr-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--dlh-line);flex-shrink:0} .dl-hdr-drawer-logo{max-height:36px;width:auto} .dl-hdr-drawer-close{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--dlh-tint-navy);border:none;border-radius:10px;color:var(--dlh-navy);cursor:pointer;padding:0;transition:background .15s,color .15s,transform .15s} .dl-hdr-drawer-close:hover{background:var(--dlh-navy);color:#fff;transform:rotate(90deg)} .dl-hdr-drawer-close svg{width:16px;height:16px} .dl-hdr-drawer-body{flex:1;overflow-y:auto;padding:8px 12px 12px} .dl-hdr-drawer-section{border-bottom:1px solid var(--dlh-line-soft)} .dl-hdr-drawer-section:last-child{border-bottom:none} .dl-hdr-drawer-head-btn,.dl-hdr-drawer-link{width:100%;display:flex;align-items:center;gap:12px;background:none;border:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--dlh-navy);padding:12px 12px;cursor:pointer;text-align:left;text-decoration:none;border-radius:10px;transition:background .15s} .dl-hdr-drawer-head-btn:hover,.dl-hdr-drawer-link:hover{background:var(--dlh-tint-green)} .dl-hdr-drawer-section.is-open>.dl-hdr-drawer-head-btn{background:var(--dlh-tint-green);color:var(--dlh-navy)} .dl-hdr-drawer-ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--dlh-tint-green);color:var(--dlh-green-d);border-radius:9px;flex-shrink:0;transition:background .15s,color .15s} .dl-hdr-drawer-head-btn:hover .dl-hdr-drawer-ico,.dl-hdr-drawer-link:hover .dl-hdr-drawer-ico,.dl-hdr-drawer-section.is-open .dl-hdr-drawer-ico{background:var(--dlh-green);color:#fff} .dl-hdr-drawer-ico svg{width:18px;height:18px} .dl-hdr-drawer-link-label{flex:1;line-height:1.25} .dl-hdr-drawer-chev{width:14px;height:14px;color:var(--dlh-muted);flex-shrink:0;transition:transform .25s ease,color .15s} .dl-hdr-drawer-section.is-open .dl-hdr-drawer-chev{transform:rotate(180deg);color:var(--dlh-green-d)} .dl-hdr-drawer-panel{max-height:0;overflow:hidden;transition:max-height .32s ease} .dl-hdr-drawer-section.is-open .dl-hdr-drawer-panel{max-height:2000px} .dl-hdr-drawer-group{padding:6px 8px 12px 12px;margin-left:12px;border-left:2px solid var(--dlh-line-soft)} .dl-hdr-drawer-glabel{font-size:10.5px;font-weight:700;color:var(--dlh-green-d);text-transform:uppercase;letter-spacing:.08em;margin:8px 0 4px;padding-left:10px} .dl-hdr-drawer-group a{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:14px;font-weight:500;color:var(--dlh-ink);text-decoration:none;border-radius:7px;transition:background .12s,color .12s} .dl-hdr-drawer-group a:hover{background:var(--dlh-tint-green);color:var(--dlh-green-d)} .dl-hdr-drawer-dot{width:5px;height:5px;border-radius:50%;background:var(--dlh-line);flex-shrink:0;transition:background .12s} .dl-hdr-drawer-group a:hover .dl-hdr-drawer-dot{background:var(--dlh-green)} .dl-hdr-drawer-cta{padding:14px 16px 18px;border-top:1px solid var(--dlh-line);display:flex;gap:10px;flex-shrink:0;background:#fff} .dl-hdr-drawer-cta .dl-hdr-btn{flex:1;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-weight:600} @media (max-width:1180px){ .dl-hdr-nav,.dl-hdr-actions{display:none} .dl-hdr-hamburger{display:flex} .dl-hdr-bar{justify-content:space-between} } @media (max-width:1200px){ .dl-hdr-panel-product{width:min(96vw,1080px);grid-template-columns:210px 1fr 250px} .dl-hdr-panel-cols{width:min(96vw,1100px);grid-template-columns:1fr 1fr 1fr 240px} } /* ── desklog-extras.css ── */ /* * desklog-extras.css * Header (Max Mega Menu) + footer styling that is NOT part of the copied theme * stylesheets (bootstrap.min.css, main.css, theme-style.css, new-style.css). * Sources (verbatim port of the live desklog.io chrome): * - Max Mega Menu plugin-generated CSS (rendered inline block) * - wp custom CSS mega-menu/header overrides * - theme header.php inline