@startnext/chrome 0.1.6 → 0.1.8
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const footerCSS = "\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, -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 background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n
|
|
1
|
+
export declare const footerCSS = "\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, -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 background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* \u2500\u2500 Sections \u2500\u2500 */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* \u2500\u2500 Title \u2500\u2500 */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* \u2500\u2500 Social \u2500\u2500 */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* \u2500\u2500 Stats \u2500\u2500 */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* \u2500\u2500 Navigation columns \u2500\u2500 */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* \u2500\u2500 B Corp \u2500\u2500 */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* \u2500\u2500 Funding notice \u2500\u2500 */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Payments \u2500\u2500 */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* \u2500\u2500 Logo \u2500\u2500 */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* \u2500\u2500 Claim \u2500\u2500 */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* \u2500\u2500 Dimmed section (legal + copyright) \u2500\u2500 */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* \u2500\u2500 Responsive \u2500\u2500 */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n";
|
|
2
2
|
//# sourceMappingURL=footer.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.css.d.ts","sourceRoot":"","sources":["../../../src/components/footer/footer.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"footer.css.d.ts","sourceRoot":"","sources":["../../../src/components/footer/footer.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,49MAyTrB,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const headerCSS = "\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, -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-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 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 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n display: flex;\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 *, *::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, -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: 120px;\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: 252px;\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-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 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 Color Mode Toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode=\"dark\"]) .headbar__color-mode-moon {\n display: flex;\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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../src/data/mockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAgFhE,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAY5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7D;AAGD,wBAAgB,iBAAiB,CAAC,IAAI,SAAO,GAAG,UAAU,
|
|
1
|
+
{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../src/data/mockData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAgFhE,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAY5D,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7D;AAGD,wBAAgB,iBAAiB,CAAC,IAAI,SAAO,GAAG,UAAU,CAoIzD;AAED,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,UAAoC,CAAC;AAGlE,wBAAgB,iBAAiB,CAAC,IAAI,SAAO,GAAG,UAAU,CA2FzD;AAED,sDAAsD;AACtD,eAAO,MAAM,cAAc,EAAE,UAAoC,CAAC"}
|