@swisspost/internet-header 1.10.0 → 1.11.0

package/dist/collection/components/post-internet-header/post-internet-header.css

@@ -1,403 +1 @@
-/**
- * Colors used by the post style guide
- */
-/**
- * Maps. Allow maps to have custom colors from the project
- * by always merging into a default empty map
- */
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 700;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 400;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff");
-}
-@font-face {
-  font-display: swap;
-  font-family: "Frutiger Neue For Post";
-  font-weight: 300;
-  font-style: italic;
-  src: url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"), url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff");
-}
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-}
-
-.btn-blank {
-  background-color: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-
-.nav-link {
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-  text-decoration: none;
-  color: rgba(0, 0, 0, 0.8);
-  transition: color 200ms;
-  background-color: transparent;
-  box-shadow: none;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.nav-link:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-}
-.nav-link:hover, .nav-link:focus {
-  color: black;
-}
-.nav-link:focus-visible {
-  z-index: 1;
-  position: relative;
-}
-.nav-link > svg {
-  width: 1.4em;
-  height: 1.4em;
-  flex-shrink: 0;
-}
-.nav-link > span {
-  flex-shrink: 1;
-}
-
-.no-list {
-  list-style: none;
-  padding-left: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-*,
-:host,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-:host {
-  font-family: "Frutiger Neue For Post", system-ui, sans-serif;
-}
-
-button {
-  font: inherit;
-  padding: 0;
-}
-
-a,
-button {
-  border-radius: 4px;
-  outline: none;
-  outline-offset: 2px;
-  /* Compatibility with button-group */
-}
-a:is(:focus-visible, :focus-within, .pretend-focus),
-button:is(:focus-visible, :focus-within, .pretend-focus) {
-  outline: 2px solid var(--post-contrast-color);
-  border-radius: 4px;
-}
-
-img,
-svg {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-@media (forced-colors: active) {
-  svg {
-    color: white;
-  }
-}
-
-.box > *:first-child {
-  margin-top: 0;
-}
-.box > *:last-child {
-  margin-bottom: 0;
-}
-
-.mirrored {
-  transform: scaleX(-1);
-}
-
-.rotate-270 {
-  transform: rotate(270deg);
-}
-
-.bold {
-  font-weight: 700;
-}
-
-.light {
-  font-weight: 300;
-}
-
-.d-flex {
-  display: flex;
-}
-
-.d-inline-flex {
-  display: inline-flex;
-}
-
-.align-items-center {
-  align-items: center;
-}
-
-@media (min-width: 1441px) {
-  .wide-container {
-    margin: 0 auto;
-    max-width: 1440px;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .container {
-    padding-right: 16px;
-    padding-left: 16px;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .container {
-    padding-right: 32px;
-    padding-left: 32px;
-  }
-}
-@media (min-width: 1024px) {
-  .container {
-    padding-right: 40px;
-    padding-left: 40px;
-  }
-}
-
-@media (max-width: -0.02px) {
-  .hidden-xs {
-    display: none;
-  }
-}
-
-@media (max-width: 399.98px) {
-  .hidden-sm {
-    display: none;
-  }
-}
-
-@media (max-width: 599.98px) {
-  .hidden-rg {
-    display: none;
-  }
-}
-
-@media (max-width: 779.98px) {
-  .hidden-md {
-    display: none;
-  }
-}
-
-@media (max-width: 1023.98px) {
-  .hidden-lg {
-    display: none;
-  }
-}
-
-@media (max-width: 1279.98px) {
-  .hidden-xl {
-    display: none;
-  }
-}
-
-@media (max-width: 1440.98px) {
-  .hidden-xxl {
-    display: none;
-  }
-}
-
-/**
- * Default position: scrolled
- * Logo is being scaled up for the initial view (scrollY = 0). This enables media queries to override
- * mobile behaviour without re-calculation
-*/
-:host {
-  --logo-scale: 1;
-}
-@media (max-width: 1023.98px) {
-  :host {
-    --logo-scale: 1 !important;
-  }
-}
-
-post-logo {
-  height: var(--header-height);
-  transform-origin: bottom left;
-  transform: scale(var(--logo-scale));
-}
-
-post-main-navigation {
-  margin-left: calc(var(--header-height) * var(--logo-scale) - var(--header-height));
-}
-
-:host {
-  display: block;
-  position: relative;
-  font-size: 1rem;
-  font-weight: 300;
-  z-index: var(--header-z-index, 10);
-  --header-height: 3.5rem;
-  --meta-header-height: 0px;
-  --language-dropdown-margin-top: 0px;
-}
-@media (min-width: 1024px) {
-  :host {
-    --meta-header-height: 3rem;
-    --header-height: 4rem;
-  }
-}
-@media (min-width: 1280px) {
-  :host {
-    --header-height: 4.5rem;
-  }
-}
-
-:host([meta=false]) {
-  --meta-header-height: 0px;
-  --language-dropdown-margin-top: 1px;
-}
-
-@supports (position: sticky) {
-  :host(:not(.stickyness-none)) {
-    position: sticky;
-  }
-  :host(.stickyness-full) {
-    top: 0;
-  }
-  :host(.stickyness-main) {
-    top: calc(var(--meta-header-height, 0px) * -1);
-  }
-  :host(.stickyness-minimal) {
-    top: calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px) * -1);
-    transition: top 200ms ease-in;
-  }
-  :host(.stickyness-minimal.scrolling-up),
-  :host(.stickyness-minimal.dropdown-open) {
-    top: calc(var(--meta-header-height, 0px) * -1);
-    transition: top 200ms ease-out;
-  }
-}
-.post-internet-header {
-  border-bottom: 1px solid hsl(0, 0%, 90%);
-  background-color: white;
-}
-
-.main-navigation-container {
-  display: flex;
-}
-.main-navigation-container > .main-navigation-controls {
-  flex: 0 0 auto;
-}
-
-.main-navigation {
-  display: flex;
-}
-
-.sub-navigation-container {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  display: flex;
-  background: white;
-  visibility: hidden;
-}
-
-.main-navigation-item:hover .sub-navigation-container {
-  visibility: visible;
-}
-
-.main-navigation-controls {
-  display: flex;
-  margin-left: auto;
-}
-@media (max-width: 1023.98px) {
-  .main-navigation-controls {
-    font-weight: 400;
-  }
-}
-@media (min-width: 1024px) {
-  .main-navigation-controls {
-    font-size: 1.0625rem;
-  }
-}
-.main-navigation-controls > * {
-  border-left: 1px solid hsl(0, 0%, 90%);
-}
-
-.menu-button {
-  display: flex;
-  align-items: center;
-  padding: 0 calc(1rem - 1px);
-  font-weight: 300;
-  cursor: pointer;
-  border-left: 1px solid hsl(0, 0%, 90%);
-  order: 1; /* Display on the far right because of tab order */
-}
-@media (min-width: 1024px) {
-  .menu-button {
-    display: none;
-  }
-}
-@media (min-width: 600px) and (max-width: 1023.98px) {
-  .menu-button .visually-hidden {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: auto;
-    overflow: visible;
-    clip: auto;
-    visibility: visible;
-    margin-right: 0.5rem;
-  }
-}
-.menu-button svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.full-width .wide-container {
-  max-width: none;
-}
+@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Bold.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:700;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-BdIt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Rg.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:400;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-It.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-Lt.woff") format("woff")}@font-face{font-display:swap;font-family:"Frutiger Neue For Post";font-weight:300;font-style:italic;src:url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff2") format("woff2"),url("https://fonts.post.ch/frutigerneueforpost/v2/FrutigerNeueforPostW05-LtIt.woff") format("woff")}.visually-hidden{position:absolute;width:1px;height:1px;border:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.btn-blank{background-color:rgba(0,0,0,0);border:none;border-radius:0;padding:0}.nav-link{outline:none;outline-offset:2px;text-decoration:none;color:rgba(0,0,0,.8);transition:color 200ms;background-color:rgba(0,0,0,0);box-shadow:none;border:0;margin:0;cursor:pointer;display:flex;align-items:center;gap:.5rem}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color)}.nav-link:hover,.nav-link:focus{color:#000}.nav-link:is(:focus-visible,:focus-within,.pretend-focus){z-index:1;position:relative}.nav-link>svg{width:1.4em;height:1.4em;flex-shrink:0}.nav-link>span{flex-shrink:1}.no-list{list-style:none;padding-left:0;margin-top:0;margin-bottom:0}*,:host,*::before,*::after{box-sizing:border-box}:host{font-family:"Frutiger Neue For Post",system-ui,sans-serif}button{font:inherit;padding:0}a,button{border-radius:4px;outline:none;outline-offset:2px}a:is(:focus-visible,:focus-within,.pretend-focus),button:is(:focus-visible,:focus-within,.pretend-focus){outline:2px solid var(--post-contrast-color);border-radius:4px}img,svg{max-width:100%;max-height:100%}@media(forced-colors: active){svg{color:#fff}}.box>*:first-child{margin-top:0}.box>*:last-child{margin-bottom:0}.mirrored{transform:scaleX(-1)}.rotate-270{transform:rotate(270deg)}.bold{font-weight:700}.light{font-weight:300}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.align-items-center{align-items:center}@media(min-width: 1441px){.wide-container{margin:0 auto;max-width:1440px}}@media(max-width: 599.98px){.container{padding-right:16px;padding-left:16px}}@media(min-width: 600px)and (max-width: 1023.98px){.container{padding-right:32px;padding-left:32px}}@media(min-width: 1024px){.container{padding-right:40px;padding-left:40px}}@media(max-width: -0.02px){.hidden-xs{display:none}}@media(max-width: 399.98px){.hidden-sm{display:none}}@media(max-width: 599.98px){.hidden-rg{display:none}}@media(max-width: 779.98px){.hidden-md{display:none}}@media(max-width: 1023.98px){.hidden-lg{display:none}}@media(max-width: 1279.98px){.hidden-xl{display:none}}@media(max-width: 1440.98px){.hidden-xxl{display:none}}:host{--logo-scale: 1}@media(max-width: 1023.98px){:host{--logo-scale: 1 !important}}post-logo{height:var(--header-height);transform-origin:bottom left;transform:scale(var(--logo-scale))}post-main-navigation{margin-left:calc(var(--header-height)*var(--logo-scale) - var(--header-height))}:host{display:block;position:relative;font-size:1rem;font-weight:300;z-index:var(--header-z-index, 10);--header-height: 3.5rem;--meta-header-height: 0px;--language-dropdown-margin-top: 0px}@media(min-width: 1024px){:host{--meta-header-height: 3rem;--header-height: 4rem}}@media(min-width: 1280px){:host{--header-height: 4.5rem}}:host([meta=false]){--meta-header-height: 0px;--language-dropdown-margin-top: 1px}@supports(position: sticky){:host(:not(.stickyness-none)){position:sticky}:host(.stickyness-full){top:0}:host(.stickyness-main){top:calc(var(--meta-header-height, 0px)*-1)}:host(.stickyness-minimal){top:calc((var(--header-height, 0px) + var(--meta-header-height, 0px) + 1px)*-1);transition:top 200ms ease-in}:host(.stickyness-minimal.scrolling-up),:host(.stickyness-minimal.dropdown-open){top:calc(var(--meta-header-height, 0px)*-1);transition:top 200ms ease-out}}.post-internet-header{border-bottom:1px solid #e6e6e6;background-color:#fff}.main-navigation-container{display:flex}.main-navigation-container>.main-navigation-controls{flex:0 0 auto}.main-navigation{display:flex}.sub-navigation-container{position:absolute;top:100%;left:0;width:100%;display:flex;background:#fff;visibility:hidden}.main-navigation-item:hover .sub-navigation-container{visibility:visible}.main-navigation-controls{display:flex;margin-left:auto}@media(max-width: 1023.98px){.main-navigation-controls{font-weight:400}}@media(min-width: 1024px){.main-navigation-controls{font-size:1.0625rem}}.main-navigation-controls>*{border-left:1px solid #e6e6e6}.menu-button{display:flex;align-items:center;padding:0 calc(1rem - 1px);font-weight:300;cursor:pointer;border-left:1px solid #e6e6e6;order:1}@media(min-width: 1024px){.menu-button{display:none}}@media(min-width: 600px)and (max-width: 1023.98px){.menu-button .visually-hidden{position:static;width:auto;height:auto;margin:auto;overflow:visible;clip:auto;visibility:visible;margin-right:.5rem}}.menu-button svg{width:1.5rem;height:1.5rem}.full-width .wide-container{max-width:none}