.header { background-color: var(--color-header-bg); color: var(--color-header-text); font-family: GoogleSansFlex, "Google Sans", ui-sans-serif,system-ui,sans-serif; font-size: 19px; font-weight: 500; line-height: 25px; position: relative; } .header-simple { text-align: center; } .header-wrap { position: relative; } #header { border-block-end: 1px solid var(--color-border); } .header-inner { max-width: var(--widemax); padding-inline: var(--space-s, 0.7rem); } .header-aside { justify-content: flex-end; } .header-trigger { margin-inline-start: 1rem; } .header.featured-image-cover { padding-block-end: 0; } .site-title { vertical-align: middle; } :where(.header) .site-title, :where(.header) .site-title:hover { color: var(--color-header-title); } .header-logo { display: inline-block; } .site-logo { display: inline-block; vertical-align: middle; } .custom-logo-link { display: inline-block; position: relative; width: 45px;z-index: 10; } .header-simple .site-logo { display: inline-block; } .tagline { color: var(--color-header-tagline); font-size: 19px; line-height: 31px; } .tagline a { color: var(--color-header-tagline); } .header-triggers { text-align: right; } .header-trigger { cursor: pointer; display: inline-block; position: relative; vertical-align: middle; } .header-menu-trigger-icon { font-size: 25px; line-height: 1; vertical-align: middle; } .header-trigger-text { margin-inline-start: 0.3125rem; vertical-align: middle; } .has-mobile-menu .header-menu-trigger-icon::before { content: '\e810'; } .header-btn { display: inline-flex; align-items: center; gap: 0.35em; padding: 1rem1.9375rem; font-weight: 600; border-radius: var(--radius-m, 0.5rem); text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; vertical-align: middle; } .header-btn:hover { transform: translateY(-1px); } .header-btn-primary { background-color: var(--color-button); color: var(--color-button-text); } .header-btn-primary:hover { background-color: var(--color-button); opacity: 0.9; color: var(--color-button-text); } .header-btn-secondary { background-color: var(--color-secondary); color: var(--color-text-light); } .header-btn-secondary:hover { background-color: var(--color-secondary); opacity: 0.9; color: var(--color-text-light); } .header-btn-outline { background-color: transparent; border: 2px solid var(--color-header-menu-links); color: var(--color-header-menu-links); } .header-btn-outline:hover { background-color: var(--color-header-menu-links); color: var(--color-text-light); } @media (max-width: 768px) { .header-triggers { display: flex; flex-direction: row; align-items: center; gap: 0.3125rem; padding-block-start: 0; } .header-btn { padding: 0.3125rem1rem; font-size: 0.875rem; } .header-btn-text { display: none; } } .md-more-menu > a { font-weight: 700; letter-spacing: 0.15em; } .md-more-menu .sub-menu .menu-item { white-space: nowrap; } :where(.header) a { color: var(--color-header-menu-links); } :where(.header) a:hover { color: var(--color-header-menu-hover); } :where(.header) .button, :where(.header) .button:hover, :where(.header) .menu>.current-menu-item.button>a { color: var(--color-text-light); } @media (min-width: 768px) { .header { padding-block-end: 4px; padding-block-start: 4px; } .header-wrap { display: flex; align-items: center; gap: 1rem; } .header-logo { flex-shrink: 0; } .header-aside { flex: 1 1 0%; min-width: 0; display: flex; justify-content: flex-end; align-items: center; } .header-aside .header-menu { flex: 1 1 0%; min-width: 0; } .header-aside .menu-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; } .header-aside .menu-header > .menu-item { white-space: nowrap; } .md-more-menu { position: relative; } .md-more-menu > .sub-menu { min-width: 200px; right: 0; } .header-triggers { flex-shrink: 0; display: flex; align-items: center; gap: 0.3125rem; } .site-title { font-size: 34px; line-height: 49px; } .header-standard .site-logo { margin-inline-end: 0.625rem; } } @media (max-width: 768px) { .header { font-size: 18px; line-height: 29px; padding-block-start: 10px; padding-block-end: 10px; } .site-title { font-size: 24px; line-height: 49px; } .tagline { font-size: 18px; line-height: 29px; } .header-wrap { display: flex; align-items: center; justify-content: space-between; } .header-triggers { flex-shrink: 0; z-index: 100; } } @media (max-width: 640px) { .header { font-size: 17px; line-height: 28px; padding-block-start: 10px; padding-block-end: 10px; } .site-title { font-size: 24px; line-height: 44px; } .tagline { font-size: 17px; line-height: 28px; } } .has-featured-image-cover .site-title, .has-featured-image-cover .header-btn { color: var(--color-inverse, #eee); }