/* ========================================================= * Header Widget — Variant V2 * * The panel is moved to at runtime by scripts-v2.js * to escape the `transform` on `.header` (which would * otherwise contain `position: fixed`). That's why panel * selectors are NOT scoped under `.header-widget--v2`. * * The closed navbar (logo, language, links, button, mobile) * keeps using the classic styles untouched. * ========================================================= */ /* ========================================================= * Panel base + open state * Sits just below the navbar and fills the rest of the * viewport. Solid opaque background — feels like a * continuation of the page, not a modal. * ========================================================= */ .hw2__panel { --hw2-bg: #000000; --hw2-fg: #DDDDDD; --hw2-fg-muted: #999999; --hw2-rule: rgba(255, 255, 255, 0.18); --hw2-accent: #FFC432; /* yellow */ --hw2-active: #25B1E1; /* light-blue chevron for active item */ --hw2-navbar-height: 80px; /* adjust to match real navbar height */ display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; padding: var(--hw2-navbar-height) 0 24px; overflow-y: auto; background: var(--hw2-bg); color: var(--hw2-fg); font-family: "Hanken Grotesk", sans-serif; box-sizing: border-box; } .hw2__panel.is-open { display: block; } .hw2__panel, .hw2__panel *, .hw2__panel *::before, .hw2__panel *::after { box-sizing: border-box; } /* Reset theme/Elementor link & button styles that bleed in because the panel lives in (outside .elementor). No hover background, no movement — only colour/underline changes are allowed on the elements themselves. */ .hw2__panel a, .hw2__panel a:link, .hw2__panel a:visited, .hw2__panel a:hover, .hw2__panel a:focus, .hw2__panel a:active, .hw2__panel button, .hw2__panel button:hover, .hw2__panel button:focus, .hw2__panel button:active { background: none !important; background-color: transparent !important; box-shadow: none !important; text-decoration: none !important; transform: none !important; border-radius: 0 !important; outline: none !important; } .hw2__panel button { -webkit-appearance: none; appearance: none; border: 0 !important; } /* Body scroll lock while a panel is open */ body.hw2-no-scroll { overflow: hidden; } /* Inner layout container — no visible "box", just centers content */ .hw2__panel-box { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px; } /* Close (×) — yellow ring, larger hit area, centered glyph */ .hw2__panel button.hw2__panel-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; padding-top: 6px; padding-bottom: 10px; border-radius: 50% !important; border: 2px solid var(--hw2-accent) !important; background: transparent !important; color: var(--hw2-accent) !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } .hw2__panel button.hw2__panel-close:hover { background: var(--hw2-accent) !important; color: var(--hw2-bg) !important; } .hw2__panel-close span { display: block; font-size: 24px; line-height: 1; font-weight: 400; } /* Title with gold underline beneath the text */ .hw2__panel .hw2__panel-title { position: relative; display: inline-block; margin: 0 !important; padding-bottom: 8px !important; color: var(--hw2-fg) !important; font-family: "Hanken Grotesk", sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } /* ========================================================= * Layouts * - --single : one section title + a flat list of items * - --two-level: left nav with categories + right items stack * Both share the same separator line above the content. * ========================================================= */ .hw2__panel-layout { position: relative; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hw2-rule); } .hw2__panel-layout--two-level { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; } /* Three-level: industries | companies | detail card */ .hw2__panel-layout--three-level { display: grid; grid-template-columns: 200px 220px 1fr; gap: 48px; align-items: start; } /* ========================================================= * Items list (used by both layouts; only `.is-active` shows * inside the two-level stack — single layout always shows it) * ========================================================= */ .hw2__panel-items { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 24px; } .hw2__panel-items.is-active { display: flex; } .hw2__panel-stack { position: relative; min-width: 0; } .hw2__panel-item { display: flex; align-items: center; } .hw2__panel a.hw2__panel-item-link, .hw2__panel a.hw2__panel-item-link:link, .hw2__panel a.hw2__panel-item-link:visited { flex: 1; display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--hw2-fg-muted) !important; transition: color 0.15s ease; } .hw2__panel a.hw2__panel-item-link:hover { color: var(--hw2-fg) !important; } .hw2__panel .hw2__panel-item-text { font-family: "Hanken Grotesk", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0 !important; } /* Optional section title used by the single-level layout */ .hw2__panel-section-title { position: relative; display: inline-block; margin: 0 0 16px; padding-bottom: 6px; color: var(--hw2-fg); font-size: 15px; font-weight: 500; } .hw2__panel-section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--hw2-accent); } /* ========================================================= * Two-level: left nav (categories) * ========================================================= */ .hw2__panel-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .hw2__panel-nav-item { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hw2__panel button.hw2__panel-nav-btn { padding: 0; margin: 0; cursor: pointer; color: var(--hw2-fg-muted) !important; font: inherit; width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.15s ease; } .hw2__panel button.hw2__panel-nav-btn:hover { color: var(--hw2-fg) !important; } .hw2__panel-nav-item.is-active button.hw2__panel-nav-btn { color: var(--hw2-fg) !important; } /* Link + arrow variant (category is clickable AND expandable) */ .hw2__panel a.hw2__panel-nav-link { flex: 1; display: inline-flex; align-items: center; color: var(--hw2-fg-muted) !important; transition: color 0.15s ease; } .hw2__panel a.hw2__panel-nav-link:hover { color: var(--hw2-fg) !important; } .hw2__panel-nav-item.is-active a.hw2__panel-nav-link { color: var(--hw2-fg) !important; } .hw2__panel button.hw2__panel-nav-arrow { flex: 0 0 auto; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; } /* Hover underline for the link-variant text */ .hw2__panel a.hw2__panel-nav-link:hover .hw2__panel-item-text::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--hw2-fg); } /* Chevron turns celeste on hover of its trigger */ .hw2__panel button.hw2__panel-nav-arrow:hover .hw2__panel-item-arrow, .hw2__panel button.hw2__panel-nav-btn:hover .hw2__panel-item-arrow { color: var(--hw2-active); } /* Active category — white text + blue chevron (no underline) */ .hw2__panel-nav-item.is-active .hw2__panel-nav-btn { color: var(--hw2-fg); } .hw2__panel-nav-item.is-active .hw2__panel-item-arrow { color: var(--hw2-active); } /* Hover underline — white, only on hover, for nav categories and items */ .hw2__panel-item-text { position: relative; } .hw2__panel a.hw2__panel-item-link:hover .hw2__panel-item-text::after, .hw2__panel button.hw2__panel-nav-btn:hover .hw2__panel-item-text::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--hw2-fg); } /* Chevron (>) — gold default, blue when active */ .hw2__panel-item-arrow { flex: 0 0 auto; width: 20px; height: 20px; background-color: currentColor; color: var(--hw2-accent); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* ========================================================= * Cards (archives — Insights/Blog — and later case studies) * ========================================================= */ .hw2__panel-cards { display: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; } .hw2__panel-cards.is-active { display: grid; } .hw2__card { display: flex; flex-direction: column; gap: 12px; } .hw2__panel a.hw2__card-media { display: block; width: 100%; aspect-ratio: 1 / 1; background: #1e1e1e !important; border-radius: 12px !important; overflow: hidden; } .hw2__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .hw2__card-title { margin: 0; color: var(--hw2-fg) !important; font-family: "Hanken Grotesk", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; } .hw2__card-desc { margin: 0; color: var(--hw2-fg-muted) !important; font-family: "Hanken Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; overflow: hidden !important; } .hw2__panel a.hw2__card-btn { align-self: flex-start; margin-top: 4px; padding: 8px 20px; border: 1px solid var(--hw2-accent) !important; border-radius: 999px !important; color: var(--hw2-accent) !important; font-family: "Hanken Grotesk", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; transition: background 0.15s ease, color 0.15s ease; } .hw2__panel a.hw2__card-btn:hover { background: var(--hw2-accent) !important; color: var(--hw2-bg) !important; } /* ========================================================= * Three-level: middle company button + detail column * ========================================================= */ .hw2__panel button.hw2__panel-cs-btn { padding: 0; margin: 0; cursor: pointer; color: var(--hw2-fg-muted) !important; font: inherit; width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; transition: color 0.15s ease; } .hw2__panel button.hw2__panel-cs-btn:hover, .hw2__panel-cs-item.is-active button.hw2__panel-cs-btn { color: var(--hw2-fg) !important; } .hw2__panel button.hw2__panel-cs-btn:hover .hw2__panel-item-arrow, .hw2__panel-cs-item.is-active .hw2__panel-item-arrow { color: var(--hw2-active); } .hw2__panel button.hw2__panel-cs-btn:hover .hw2__panel-item-text::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--hw2-fg); } .hw2__panel-detail { position: relative; min-width: 0; } .hw2__panel-cs-pane { display: none; } .hw2__panel-cs-pane.is-active { display: block; } /* Detail card: image on the left, text block on the right */ .hw2__card--detail { display: grid; grid-template-columns: 220px 1fr; column-gap: 24px; row-gap: 10px; align-items: start; } .hw2__card--detail .hw2__card-media { grid-column: 1; grid-row: 1 / span 3; width: 220px; } .hw2__card--detail .hw2__card-title, .hw2__card--detail .hw2__card-desc, .hw2__card--detail .hw2__card-btn { grid-column: 2; } .hw2__panel a.hw2__card--detail-btn, .hw2__card--detail .hw2__card-btn { justify-self: start; width: fit-content; } /* ========================================================= * Mobile * ========================================================= */ @media (max-width: 991px) { .hw2__panel-layout--two-level, .hw2__panel-layout--three-level { grid-template-columns: 1fr; gap: 28px; } .hw2__card--detail { grid-template-columns: 1fr; } .hw2__card--detail .hw2__card-media { grid-column: 1; grid-row: auto; width: 100%; } .hw2__panel-box { padding: 24px 20px 28px; } }