@amsterdam/design-system-css/dist/header/header.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-header{display:grid;font-family:var(--ams-header-font-family);padding-block:var(--ams-header-padding-block);padding-inline:var(--ams-header-padding-inline)}.ams-header__logo-link{align-items:center;align-self:start;column-gap:var(--ams-header-logo-link-column-gap);display:flex;grid-area:1/1;inline-size:fit-content;outline-offset:var(--ams-header-logo-link-outline-offset);text-decoration:none}.ams-header__logo-link--hidden{opacity:0%;user-select:none}.ams-header__logo-container{flex-shrink:0;inline-size:.75rem;overflow:hidden}@media screen and (min-width: 36rem){.ams-header__logo-container{inline-size:auto}}.ams-header__brand-name{color:var(--ams-header-brand-name-color);font-size:var(--ams-header-brand-name-font-size);font-weight:var(--ams-header-brand-name-font-weight);line-height:1.35}.ams-header__navigation{column-gap:var(--ams-header-navigation-column-gap);display:flex;flex-wrap:wrap;grid-area:1/1;pointer-events:none;row-gap:var(--ams-header-navigation-row-gap)}.ams-header__menu{align-items:center;column-gap:var(--ams-header-menu-column-gap);display:flex;flex-wrap:wrap;justify-content:flex-end;margin-inline-start:auto;pointer-events:auto;row-gap:var(--ams-header-menu-row-gap);list-style:none;margin-block:0;padding-inline-start:0}@media screen and not (min-width: 68rem){.ams-header__menu-item{display:none}}.ams-header__menu-item--fixed{display:revert}.ams-header__menu-link{display:inline-block;text-decoration-line:var(--ams-header-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-header-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-header-menu-link-text-underline-offset);color:var(--ams-header-menu-item-color);font-size:var(--ams-header-menu-item-font-size);font-weight:var(--ams-header-menu-item-font-weight);line-height:var(--ams-header-menu-item-line-height);outline-offset:var(--ams-header-menu-item-outline-offset);padding-block:var(--ams-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-header__menu-link:hover{color:var(--ams-header-menu-item-hover-color)}.ams-header__menu-link:hover{text-decoration-line:var(--ams-header-menu-link-hover-text-decoration-line)}@media screen and (min-width: 68rem){.ams-header__mega-menu-button-item--hide-on-wide-window{display:none}}.ams-header__mega-menu-button{column-gap:var(--ams-header-menu-item-column-gap);cursor:var(--ams-header-mega-menu-button-cursor);display:grid;font-family:inherit;grid-auto-flow:column;color:var(--ams-header-menu-item-color);font-size:var(--ams-header-menu-item-font-size);font-weight:var(--ams-header-menu-item-font-weight);line-height:var(--ams-header-menu-item-line-height);outline-offset:var(--ams-header-menu-item-outline-offset);padding-block:var(--ams-header-menu-item-padding-block);touch-action:manipulation;white-space:nowrap;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;background:none;border:none;margin-block:0;margin-inline:0;padding-inline:0}.ams-header__mega-menu-button:hover{color:var(--ams-header-menu-item-hover-color)}.ams-header__mega-menu-button[aria-expanded=true]{font-weight:var(--ams-header-mega-menu-button-label-open-font-weight)}.ams-header__mega-menu-button-label,.ams-header__mega-menu-button-hidden-label{grid-area:1/1}.ams-header__mega-menu-button-hidden-label{font-weight:var(--ams-header-mega-menu-button-label-open-font-weight);pointer-events:none;user-select:none;visibility:hidden}.ams-header__menu-icon line{stroke:currentColor;stroke-width:3px;transform-origin:center;transition:translate .1s ease-in-out,rotate .2s ease-in-out,opacity .1s ease-in-out}@media(prefers-reduced-motion){.ams-header__menu-icon line{transition:none}}.ams-header__menu-icon .ams-header__menu-icon-top{translate:0 -7px}.ams-header__menu-icon .ams-header__menu-icon-bottom{translate:0 7px}.ams-header__menu-icon--open .ams-header__menu-icon-top{rotate:45deg;translate:0}.ams-header__menu-icon--open .ams-header__menu-icon-middle{opacity:0%}.ams-header__menu-icon--open .ams-header__menu-icon-bottom{rotate:-45deg;translate:0}.ams-header__mega-menu{inline-size:100%;pointer-events:auto}.ams-header__mega-menu .ams-grid{padding-inline:0}.ams-header__mega-menu--closed.ams-header__mega-menu--closed{display:none}@media screen and (min-width: 68rem){.ams-header__grid-cell-narrow-window-only{display:none}}/*# sourceMappingURL=header.css.map */