/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Site branding in header. */ .site-branding { display: flex; flex-shrink: 1; align-items: flex-end; min-width: calc( (2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding) ); /* Span minimum of 2 column widths. */ min-height: var(--sp3); margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */ padding-block: 0 var(--sp0-5); padding-inline-start: var(--container-padding); padding-inline-end: var(--container-padding); background-image: linear-gradient( 160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66% ); } @media (min-width: 31.25rem) { .site-branding { min-height: var(--sp4); } } @media (min-width: 43.75rem) { .site-branding { min-width: calc( (4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding) ); /* Span minimum of 4 column widths. */ min-height: var(--sp6); padding-block-end: var(--sp); } } @media (min-width: 62.5rem) { .site-branding { min-width: calc( (2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding) ); /* Span minimum of 2 column widths. */ } } @media (min-width: 75rem) { .site-branding { min-height: var(--site-header-height-wide); margin-inline-start: calc(-1 * var(--container-padding)); padding-block: 0; } } [dir='rtl'] .site-branding { background-image: linear-gradient( -160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66% ); } .site-branding--bg-gray { background: var(--color--gray-100); } .site-branding--bg-white { background: var(--color--white); } .site-branding__inner { display: flex; align-items: center; } .site-branding__inner a { -webkit-text-decoration: none; text-decoration: none; } @media (min-width: 75rem) { .site-branding__inner { height: var(--header-height-wide-when-fixed); padding-block: var(--sp0-5); padding-inline-start: 0; padding-inline-end: 0; } } .site-branding__logo { flex-shrink: 0; max-width: 100%; } .site-branding__logo img { width: auto; max-width: 100%; max-height: var(--sp2); } @media (min-width: 31.25rem) { .site-branding__logo img { max-height: var(--sp3); } } @media (min-width: 43.75rem) { .site-branding__logo img { max-height: var(--sp4); } } @media (min-width: 75rem) { .site-branding__logo img { max-height: calc(var(--header-height-wide-when-fixed) - var(--sp)); width: 160px; border-right: 2px solid #fff; padding-right: 13px; } } .site-branding__text { color: var(--color--white); font-size: 1.125rem; font-weight: bold; } .site-branding__text a { color: inherit; } @media (min-width: 43.75rem) { .site-branding__text { font-size: 1.75rem; line-height: 1.75rem; } } @media (min-width: 75rem) { .site-branding__text { letter-spacing: 0.02em; font-size: 2rem; line-height: var(--sp2); } } .site-branding--bg-gray .site-branding__text, .site-branding--bg-white .site-branding__text { color: var(--color--primary-50); } .site-branding__logo + .site-branding__text { margin-inline-start: 0.75rem; }