@startnext/chrome 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/header/header.css.d.ts +1 -1
  2. package/dist/components/header/header.css.d.ts.map +1 -1
  3. package/dist/index.js +2 -2
  4. package/dist/index.umd.js +2 -2
  5. package/package.json +1 -1
package/dist/components/header/header.css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export declare const headerCSS = "\n \n @font-face {\n font-family: \"PFDin\";\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinRegularData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinMediumData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinBoldData}) format(\"woff2\");\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, \"PFDin\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n\n :host {\n display: block;\n }\n\n /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar {\n height: 110px;\n }\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 38px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 40px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n top: 43px;\n gap: 24px;\n }\n }\n\n /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: inherit;\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n top: 39px;\n }\n }\n\n /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: \"\";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 160px;\n transform: translateY(-175px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 292px;\n }\n }\n\n /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__login {\n padding: 4px 6px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 600;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: 1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n color: var(--btn-primary-bg, #06E481);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n";
1
+ export declare const headerCSS = "\n \n @font-face {\n font-family: \"PFDin\";\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinRegularData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinMediumData}) format(\"woff2\");\n }\n\n @font-face {\n font-family: \"PFDin\";\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n src: url(${pfDinBoldData}) format(\"woff2\");\n }\n\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, \"PFDin\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n\n\n :host {\n display: block;\n }\n\n /* \u2500\u2500 Headbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* \u2500\u2500 States \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* \u2500\u2500 Left (Burger) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 34px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* \u2500\u2500 Right \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 38px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 12px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n gap: 24px;\n }\n }\n\n /* \u2500\u2500 Icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* \u2500\u2500 CTA Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: inherit;\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n }\n }\n\n /* \u2500\u2500 Main Nav (desktop > 1100px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: \"\";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* \u2500\u2500 Logo (Lottie) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 160px;\n transform: translateY(-180px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* \u2500\u2500 Claim \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 292px;\n }\n }\n\n /* \u2500\u2500 User Avatar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Login Button \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__login {\n padding: 4px 6px;\n font-size: 16px;\n font-weight: 600;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n /* \u2500\u2500 Language Dropdown \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: 1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n color: var(--btn-primary-bg, #06E481);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* \u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* \u2500\u2500 Drawer (shared) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* \u2500\u2500 Focus \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n";
2
2
  //# sourceMappingURL=header.css.d.ts.map
package/dist/components/header/header.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,2kpBA+sBrB,CAAC"}
1
+ {"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/components/header/header.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,0/oBA0sBrB,CAAC"}